windows 搭建vue环境 创建vue项目

1. 安装npm

• 有空再写......

2. 测试npm是否安装成功 :控制台输入npm ，回车。

   
   npm安装成功.png
3. 下载npm依赖包：
   安装命令：
   npm install -g cnpm --registry=https://registry.npm.taobao.org

这步需要一些时间，完成后控制台如下：

下载依赖包.png

4. 测试是否成功：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

7. 安装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)

1. 脚手架那套系统帮你模块化，比如每个页面都是一个组件，可以抽象出共用组件分给不同页面用。直接引用其实也能做，你也得搭一套js的模块化，再放到你的index.html，功能是一样的，自己设计一套也挺麻烦，要考虑很多问题。

2. 脚手架有一个统一的入口main.js，你引入router，resource，vuex很方便，也很清晰，你的方式项目庞大以后，容易乱。

3. 脚手架提供了测试服，你现在用的是单机版，测试服在本地监听端口进行测试，可以使用ajax请求，可以将请求代理到web端接口进行联调。

4. webpack配合vue单文件，css，js，html整合在一起，每个部分都是一个模块，同样图片模板都是一个模块，你可以在webpack里配置这些文件的处理方式，比如自动添加css前缀，使用less，sass，jade，将小于多少的图片转成base64，等等等等。

5. 使用npm管理你的开发和插件，想用什么插件直接npm install，不用手动script标签引入，插件很多的时候不用考虑那么多，直接找到配置表，版本管理也很方便。

你就算不用vue-cli，也有必要找一套vue的项目模板，基本路数都差不多，你总有那么多事要做。要么，你自己设计一套vue的架构，也没问题，前提就是方便，规划的合理，脉路清晰。