【参考资料】：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 文件夹里的内容
网友评论