一起走进Vue.js——vue-cli脚手架

上期我们学习了 Vue.js 的实例方法和内置组件，这期我们来学习 Vue.js 的 vue-cli 脚手架。

使用 Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目构建和部署、热加载、代码单元测试等事情，如果每个项目都要手动完成这些工作，那无疑效率低下，所以通常我们会使用一些脚手架工具来帮助完成这些事情。在Vue.js生态中我们可以使用 vue-cli 脚手架工具来快速构建项目。

一、安装 vue-cli

1、安装 vue-cli 的前提是我们安装了 npm（具体安装方法见Vue.js第一期），我们可在命令行工具里输入npm -v检测是否安装了 npm 以及版本。

2、确保 npm 安装后，接下来我们可以用 npm 命令安装 vue-cli ，在命令行输入：npm install vue-cli -g

3、安装好以后可以用vue -V来检测 vue-cli 的版本

二、初始化项目

我们用 vue init 命令来初始化项目：vue init

init：表示我们要用 vue-cli 初始化项目；

：表示模板名称，vue-cli官网为我们提供了5种模板：

1、webpack：一个全面的 webpack+vue-loader 的模板，功能包括热加载、linting、检测和CSS扩展；

2、webpack-simple：一个简单 webpack+vue-loader 模板，不包含其他功能，可以快速的搭建 vue 的开发环境；

3、browserify：一个全面的 Browserify+vueify 模板，功能包括热加载、linting、单元测试；

4、browserify-simple：一个简单的 Browserify+vueify 模板，不包含其他功能，可以快速的搭建 vue 的开发环境；

5、simple：一个最简单的单页应用模板。

：标识项目名称，这个可以根据自己的项目起名称。

目前在实际开发中，比较火的是 webpack 模板，我们也安装这个模板，需要在命令行中输入：vue init webpack vueCliTest

输入命令后，会询问我们几个选项，我们根据自己的需求填写就可以了。

● Project name：项目名称，如果不需要更改直接回车就可以了。（注意：这里不能使用大写，所以我们把名称给成 vueclitest ）

● Project description：项目描述，默认为 A Vue.js project 直接回车，不用编写。

● Author：作者，如果你有配置 git 的作者，它会读取。

● Install vue-router?是否安装vue的路由插件，我们这里需要安装，选择Y

● Use ESLint to lint your code?是否用 ESLint 来限制你的代码错误和风格。我们这里输入n，如果是大型团队开发，最好进行配置。

● setup unit tests ?是否需要安装单元测试工具，我们这里不需要，输入n。

● Setup e2e tests with Nightwatch?是否安装 e2e 来进行用户行为模拟测试，我们这里不需要，输入n；

● Should we run ` npm install ` for you after the project has been created?是否在我们的项目创建后运行 npm install，它会有三个选项，我们选择第一个运行选项，然后回车。

接着我们用命令行的形式进入我们的 vueCliTest 项目目录中，然后在开发模式下运行我们的程序。

cd vueCliTest

npm run dev

然后进入 http://localhost:8080/#/ 页面

出现这个页面，说明我们的初始化已经成功。

注：1、如果我们在命令行输入 vue init webpack vueCliTest 没有出现接下来的内容或者报错，那说明我们的webpack没有安装成功，可能是以下三个原因：

● node 版本过低，升级为最新版本，然后重新安装；

● 权限问题，在Liux、Mac安装是需要权限，如果是Windows系统，要使用管理员身份安装；

2、如果我们执行 npm run dev 没有弹出 http://localhost:8080/#/ 页面，那可能是我们配置有问题，我们在项目目录里面找到 config 文件夹里面的 index.js 文件，找到 autoOpenBrowser ，将其 false 值改为 true，然后重新执行一遍打开页面的程序即可。

三、Vue-cli 的项目结构

补充：npm run build 命令

在命令行中输入 npm run build 命令后，vue-cli 会自动进行项目发布打包，在执行完 npm run build 命令后，在项目根目录生成了 dist 文件夹，这个文件夹里边就是我们要传到服务器上的文件。

dist 文件夹下目录包括：

● index.html 主页文件

● static 静态资源文件夹：里面是js、css和一些图片文件