使用vue-cli脚手架初始化vue项目

最近新学了一下很火的vue.js，下面是我的利用所学的初始化一个简单vue项目。
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

首先去node官网下载LTS（长期支持稳定）版本，下载下来后，双击 一步一步安装即可；

然后测试安装是否OK，在电脑右下角的搜索框输入cmd回车，打开如下界面，在界面上输入 node --version ，如果出现版本号则安装成功。

安装Node的时候，Npm包管理工具也是一并安装的；
npm -v

第二步：安装Vue-cli

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

全局安装命令：npm install -g [email protected]

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

等安装完后，vue -V

说明安装没问题

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

进入你要保存vue项目的路径，在路径上面输入cmd回车直接进入命令行窗口

之后输入
命令：vue init webpack vue_demo2

一个简单的vue项目就下载在我所演示的F:\HBuilderProjects\Vue目录下

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

核心本质，是去github下载一个模版， https://github.com/vuejs-templates/webpack

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

一些设置选项：

设置项目名称，项目描述，作者，以及选择构建模式，我们选运行+编译模式；

vue-router后面要用到，所以选用，

eslint代码验证用到讲到，所以选用，以及选标准模式；

我们不用单元测试，所以no，以及e2e测试 也是no

然后那个再选用NPM下载；

我们等待下载定制的模版吧；

等下载万完成后，

第四步：启动项目

直接在下载界面进入项目，cd vue_demo2,之后再输入 npm run dev启动项目。

出现如图所示说明项目启动成功，用它提示的地址直接在浏览器访问

这样就成功了。
好了以上就是下载和启动一个简单的vue项目的步骤了