- 安装npm
- 有空再写......
-
测试npm是否安装成功 :控制台输入npm ，回车。
npm安装成功.png
- 下载npm依赖包：
安装命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
这步需要一些时间，完成后控制台如下：
下载依赖包.png
-
测试是否成功：cnpm -v
cnpm.png
5.安装vue-cli
安装命令：cnpm install -g vue-cli
结果如下
vue-cli安装1.png
vue-cli安装2.png
6.测试vue-cli是否安装成功
控制台输入vue ，回车。
vue-cli安装成功.png
- 安装git 详见百度git安装图解
git.exe下载路径：http://msysgit.github.com/
git下载页.png
8.git启动成功（测试）
git.png
9.创建我的第一个vue项目
vue init webpack my-first-vue-project
报错.png
报错！
解决：升级node和npm版本。
在官网上下载稳定版node,重新安装，注意路径要和原来的一样（通过where node找到原来node安装路径）。
更新后node版本8.9.3 npm版本 5.6.0 （npm需3.0版本以上）
更新后成功创建项目
成功.png
image.png
image.png
image.png
输入上图提示的网址：http://localhost:8080
结果如下：
image.png
搭建脚手架好处(比直接引用js)
-
脚手架那套系统帮你模块化，比如每个页面都是一个组件，可以抽象出共用组件分给不同页面用。直接引用其实也能做，你也得搭一套js的模块化，再放到你的index.html，功能是一样的，自己设计一套也挺麻烦，要考虑很多问题。
-
脚手架有一个统一的入口main.js，你引入router，resource，vuex很方便，也很清晰，你的方式项目庞大以后，容易乱。
-
脚手架提供了测试服，你现在用的是单机版，测试服在本地监听端口进行测试，可以使用ajax请求，可以将请求代理到web端接口进行联调。
-
webpack配合vue单文件，css，js，html整合在一起，每个部分都是一个模块，同样图片模板都是一个模块，你可以在webpack里配置这些文件的处理方式，比如自动添加css前缀，使用less，sass，jade，将小于多少的图片转成base64，等等等等。
-
使用npm管理你的开发和插件，想用什么插件直接npm install，不用手动script标签引入，插件很多的时候不用考虑那么多，直接找到配置表，版本管理也很方便。
你就算不用vue-cli，也有必要找一套vue的项目模板，基本路数都差不多，你总有那么多事要做。要么，你自己设计一套vue的架构，也没问题，前提就是方便，规划的合理，脉路清晰。
网友评论