如何使用vue-cli快速搭建项目

爱被打了一巴掌 2021-09-16 06:00 423阅读 0赞

vue-cli是vue中一个强大的构建工具，大大降低了webpack的使用难度，支持热更新。使用vue-cli使你快速的搭建项目。

首先，你得要先安装vue-cli，那么在安装之前你得先确认一下你的电脑有没有node.js（如果没有，那么请先安装node）,有了node以后直接在命令行进行操作：

全局安装：npm install -g vue-cli

![70][]

安装完成之后输入：vue -V查看版本号，注意后面的v一定是大写的；

![70 1][]

OK,安装成功！

接下来你就可以新建一个文件夹用来存放项目，然后在这个文件夹下打开命令行：

vue init webpack map

那么在这里：

init 表示我要用vue-cli来初始化项目

webpack 模板名称

map 表示项目名称 自定义

开始安装后会有提示，如下图（可按下图提示进行）：

![70 2][]

接下来就等待安装成功：

![70 3][]

好了，现在项目已经搭建成功，cd进入项目文件夹，然后在命令行输入：

npm install

下载安装依赖，下载完成后，进入项目文件夹可以看到，脚手架已经为我们搭好了基础，剩下的部分就靠我们自己进行开发了：  
![70 4][]

那么src下就是我们页面的存放区域，我们在开发项目时，会在这里面创建各个单页面组件和组件之间的路由跳转以及组件之间的传值。static是放置静态文件的区域，在这里我们可以存放css,js以及img。

详细的项目目录结构如图：

![70 5][]

[70]: /images/20210813/c5b89aadd0244ddd85e5e1967c864b98.png
[70 1]: /images/20210813/2742b5a4c0e64b2da955b33df73c5fde.png
[70 2]: /images/20210813/06ee48ef73f24c0481c783c955901dc8.png
[70 3]: /images/20210813/5f2dbae70b9f48e08bf9942f3e34d9e6.png
[70 4]: /images/20210813/3dfa3c0633344dca8f868a86da22485f.png
[70 5]: /images/20210813/272c5a785077479f97f0559d74f68e0d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用create-react-app脚手架快速搭建一个react项目

reate-react-app是一个react工程脚手架，可快速构建一个react应用。内置webpack、babel、es6等特性，开发者无需关注配置，关注业务模块的开...

￡神魔★判官ぃ/ 2024年04月17日 05:30/ 0 赞/ 84 阅读

相关如何快速搭建springboot项目

在IntelliJ IDEA中，可以按照以下步骤快速创建一个Spring Boot项目： 1. 打开 IntelliJ IDEA，点击欢迎界面上的"Create New Pr

曾经终败给现在/ 2024年03月17日 09:09/ 0 赞/ 103 阅读

相关 SpringBoot项目搭建和快速搭建步骤

前言 1.SpringBoot是对Spring框架的再封装，提供基于注解的开发，不再需要写大量的XML文件配置 2.每一个工程都可以打成jar包独立部署，其中内置To

曾经终败给现在/ 2023年07月20日 05:57/ 0 赞/ 25 阅读

相关 React项目快速搭建之脚手架搭建

create-react-app是Facebook官方推出的脚手架，基本可以零配置搭建基于webpack的React开发环境 `npm install -g create-r

水深无声/ 2023年06月15日 13:24/ 0 赞/ 21 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 333 阅读

相关 springBoot快速搭建项目

为了方便，controller就直接在入口类中写了 @SpringBootApplication //springboot的核心注解，目的是开启自动配置.包含

小咪咪/ 2022年06月05日 08:19/ 0 赞/ 369 阅读

相关快速搭建tornado项目

福利:现成的项目结构可以参见[一个tornado项目的基本目录结构][tornado] 一前提： 1、需要先搭建好环境[搭建virtualenvwrapper

野性酷女/ 2022年05月26日 08:18/ 0 赞/ 206 阅读

相关使用vue-cli 快速搭建Vue项目

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目 webpack是一个现代 JavaScript 应用程序的静态模块

落日映苍穹つ/ 2022年05月18日 04:59/ 0 赞/ 300 阅读

相关使用IDEA快速搭建Spring boot项目

Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需

傷城~/ 2022年04月12日 04:28/ 0 赞/ 317 阅读

相关如何使用vue-cli快速搭建项目

vue-cli是vue中一个强大的构建工具，大大降低了webpack的使用难度，支持热更新。使用vue-cli使你快速的搭建项目。首先，你得要先安装vue-cli，那么在安

爱被打了一巴掌/ 2021年09月16日 06:00/ 0 赞/ 424 阅读