14.Vue cli脚手架安装

vue-cli 是vue官方提供的一个脚手架工具，用于初始化一个Vue项目；

vue-cli的优势:

1、成熟的vue项目架构设计，而且会跟随vue版本的更迭而更新；

2、提供了一套本地测试服务器，而且是一个热加载的服务器；

3、提供了自己的一套集成打包上线的方案，webpack 或者gulpify在创建项目的时候可以进行选择；

有了以上优势，可以非常快速的搭建项目；

vue-cli对系统的要求:

vue-cli 是命令行的一个工具，系统需要

1、node.js(>=4.x)

2、能使用node的命令行终端；

第一步，我们安装node.js；第二步：安装Vue-cli；

vue-cli脚手架最新版本是3，我们先学习稳定版2

全局安装命令：npm install -g vue-cli@2.9.6

执行后，慢慢等待吧，要搞一会呢；

等安装完后，vue -V

第三步：使用vue-cli脚手架来新建vue项目；

命令：vue init webpack vue_demo ，webpack是打包方式 vue_demo是项目名称

vue_demo是项目名称，我们自己取名即可；

核心本质，是去github下载一个模版，点击跳转下载地址

通过脚手架可以设置名称，以及定制插件；

创建一个文件夹作为工作空间：workspace_vue

定义说明：
Project name vue_demo：设置项目名称也可以自己定义

Project description ：项目描述

Author：作者

Vue build：运行+编译

Install vue-router?：路由

Use ESLint to lint your code?：验证代码的插件，用来规范代码

Pick an ESLint preset：选择那个ESLint

Set up unit tests：单元测试

Setup e2e tests with Nightwatch?：e2e测试

Should we run npm install for you after the project has been created? (recommended)：管理工具

管理工具这里有两个选项：npm和yarn

npm run dev：启动命令

模版项目就OK了；

每个文件的详解，可以参考：https://segmentfault.com/a/1190000014804826

后面我们也会讲解和熟悉到这些配置；需要有个过程；

第四步：运行项目

我们先打开webstorm 然后open打开刚才的vue_demo项目

打开左下角终端Terminal 输入启动命令：npm run dev

访问：http://localhost:8080/#/，显示这个的话就说明完全OK；

第五步：优化配置，轻松写学习开发；

我们稍微优化下配置，让端口搞成默认80，以及启动后自动打开浏览器，顺便熟悉下配置；

打开config下的index.js 把 port改成80 autoOpenBrowser改成true即可。

然后重启试下；