- 安装npm
- 有空再写......
-
测试npm是否安装成功 :控制台输入npm ,回车。
- 下载npm依赖包:
安装命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这步需要一些时间,完成后控制台如下:
-
测试是否成功:cnpm -v
5.安装vue-cli
安装命令:cnpm install -g vue-cli
结果如下
6.测试vue-cli是否安装成功
控制台输入vue ,回车。
- 安装git 详见百度git安装图解
git.exe下载路径:http://msysgit.github.com/
8.git启动成功(测试)
9.创建我的第一个vue项目
vue init webpack my-first-vue-project
报错!
解决:升级node和npm版本。
在官网上下载稳定版node,重新安装,注意路径要和原来的一样(通过where node找到原来node安装路径)。
更新后node版本8.9.3 npm版本 5.6.0 (npm需3.0版本以上)
更新后成功创建项目
输入上图提示的网址:http://localhost:8080
结果如下:
搭建脚手架好处(比直接引用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的架构,也没问题,前提就是方便,规划的合理,脉路清晰。