【Vue】vue-cli 的认识与使用

【参考资料】：Vue.js - 使用vue-cli搭建项目（附：详细操作步骤）

Vue是一个流行的属于MVVM的前端框架。

Vue.js 的全家桶有：vue-router、vuex、vue-resource和vue-cli

话不多说，咱们开始。

第一步，环境搭建

1. 先下载安装Node.js

    选择安装路径，然后一直Next就好了。

2. 检测Node.js是否安装成功

图 1-1 在命令窗口输入npm -v

第二步，安装vue-cli

1. 输入运行命令安装：npm install -g vue-cli

图 2-1 在命令窗口输入npm install -g vue-cli  

（注：以后要是想更新 vue-cli 可以在命令窗口运行：npm update vue-cli -g）

2.测试 vue-cli 是否安装成功

在命令窗口输入（注：后面的 V 是大写）： vue -V

图 2-2 在命令窗口输入 vue -V

此时，出现相应的版本号，说明安装成功。

第三步，构建项目

1. 在命令窗口进入到你需要创建项目的目录位置

图 3-1 这里是放到我的D盘里

2. 创建项目空间

再在当前命令窗口下输入：vue init webpack vue_demo

（最后一个参数是自定义的项目名称，命名为：vue_demo）

图 3-2-1 创建项目空间

（除了第三个选项需要输入个作者外，其他选项我们直接回车，或者输入 y 回车就可以了。）

图 3-2-2 各选项的具体说明

3. 构建完成后，会发现当前目录下多了项目文件夹 vue_demo

图 3-3-1 vue_demo项目文件夹

（注：开发时，我们自己的项目文件都需要放到 src 文件夹下）

4. 修改 config/index.js

将 build 属性节点下的 assetsPublicPath 改成 '' （注意是 build 下 的 assetsPublicPath，不要改 dev 下的了）

图 3-4-1  修改config/index.js的好处   图 3-4-2  修改的地方

第四步，启动项目

1. 在命令窗口里，进入到项目文件夹中，输入命令并运行：npm run dev

图 4-1 项目开始跑起来

2. 项目运行成功，并在浏览器输入：http://localhost:8080/ 

图 4-2 项目运行成功，测试成功

第五步，发布项目

1. 在项目开发完成之后，可以执行命令（ npm run build ）来进行打包工作。

图 5-1  打包项目 npm run build 

2. 打包完成后，项目中会生成 dist 文件夹，我们只需要 dist 文件夹里的内容放到服务器上就行了。

图 5-2-1 项目打包成功 图 5-2-2  dist 文件夹里的内容