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

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。下面就是使用vue-cli快速搭建一个vue项目的详细步骤。

1. 安装 node.js(npm)，因为会用到npm包管理工具下载项目依赖等

2. 安装 webpack: npm install webpack -g

3. 安装 vue-cli： npm install vue-cli –g

4. 通过vue-cli，初始化vue项目： vue init webpack projectName(项目名)

5. 进入到项目目录： cd projectName(项目名)

6. 安装项目依赖： npm install

7. 启动项目： npm run dev

安装流程详解

1、安装nodejs运行环境，npm是安装node之后自带的包管理工具

• 在官网下载，傻瓜式安装
• 打开命令行工具，输入node -v或者npm -v检测是否安装成功

2、安装淘宝镜像（cnpm）

• 安装原因：npm的服务器是外国的，安装模块会很慢，cnpm将npm上面的模块同步到国内服务器，会提高安装模块的时间
• 在命令行输入以下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

• cnpm使用如下

cnpm install 包名

ps：安装模块的时候将npm换成cnpm就行，install可以简写成i
3、安装webpack模块打包机

cnpm i webpack -g

ps：安装成功后输入webpack -v检测是否安装成功，出现版本号，则说明安装成功
4、安装vue-cli脚手架工具

cnpm i vue-cli -g

ps：安装成功后输入vue -V检测是否安装成功，出现版本号，则说明安装成功
5、通过vue-cli初始化项目

vue init webpack projectName(项目名)

ps：项目名不能大写，不能使用中文名，否则会报错
输入以上命令后，会让你回答以下问题：

$ vue init webpack projectName--------------------- 安装vue-cli,初始化vue项目的命令
? Target directory exists. Continue? (Y/n) y---------------------找到了projectName这个目录是否要继续
? Target directory exists. Continue? Yes
? Project name (projectName)  回车------------------项目的名称（默认是文件夹的名称）
? Project name projectName
? Project description (A Vue.js project)  回车----------------项目描述，默认不写
? Project description A Vue.js project
? Author (OBKoro1)  回车------------------项目创建者
? Author OBKoro1 
? Vue build (Use arrow keys)  回车------------------选择打包方式，有两种方式（runtime和standalone），使用默认即可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安装路由，一般都要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则，这里个人建议选no，因为经常会各种代码报错，新手还是不安装好
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) n--------------------是否安装单元测试
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n--------------------是否安装e2e测试 
? Setup e2e tests with Nightwatch? No

6、进入到项目目录

cd projectName(项目名)

7、安装项目依赖

cnpm i

8、启动项目

cnpm run dev

项目启动成功后会出现如下界面：

在浏览器输入上图中的地址，就可以出现如下页面：

ps：这里是默认服务启动的是本地的8080，所以确保你的8080端口不被别的程序所占用，当有其他vue项目运行的时候，可以用ctrl+c来中断运行。
好的，到这里，一个vue项目就搭建成功啦~
那么，接下来我们看看，这个vue项目里面自动生成的文件具体是怎样的解构，分别是什么意思，可以看看下面这张图的解释：