win7从0开始搭建Vue开发环境

从0开始搭建Vue开发环境

1.下载node.js

下载地址：https://pan.baidu.com/s/1kVg9hFx 提取密码: 8ufp
版本信息：node-v6.0.0-x64.msi（6.0.0；Windows 64位）

2.安装node.js

直接双击打开node-v6.0.0-x64.msi，傻瓜式安装（循环next）;
可以选安装地址，自己选择（但是路径不要有中文！）

3.查看node.js是否安装成功

打开windows命令窗口cmd,输入node -v 和npm -v查看版本；

4.设置NPM模块安装路径和NPM缓存路径

随便哪个磁盘（我是E盘）新建一个文件夹（名字自取，但是路径不要有中文！）,在该文件夹下新建2个文件夹，名字为cache,global;

cmd下输入npm set prefix "E:\nodeJs\global"和npm set cache “E:\nodeJs\cache”；
（斜体内容为你自己的文件路径）

5.挂淘宝镜像

具体步骤见链接http://cnodejs.org/topic/4f9904f9407edba21468f31e
这是为了防止npm(全称Node.js的包管理器,npm是安装命令）安装报错；
【cmd执行图片之后补】（有生之年大概不会补了……）
6.安装webpack

继续cmd下输命令：npm install webpack -g
PS：如果你淘宝镜像的方法是这个：npm install -g cnpm --registry= https://registry.npm.taobao.org，则你的命令是：cnpm install webpack -g
【cmd执行图片之后补】（有生之年大概不会补了……）

7.安装vue脚手架

命令：npm install vue-cli -g
【cmd执行图片之后补】（有生之年大概不会补了……）
++++++++++++++++++++++++++++++++++
第6，7步安装完成后，你之前新建的global文件夹下会有一个node_modules文件夹，这里面有webpack和vue-cli两个文件夹；

8.新建vue项目测试开发环境是否可行

新建一个文件夹存放项目（类似eclipse的工作空间），路径不要有中文！
我的地址：E:\vue_work
cmd下进入该目录下

输入vue init webpack-simple 工程名字（工程名字不能用中文），然后会有初始设置（项目名，作者等），一直按“enter”默认就可以了，你也可以自己设置；

9.安装项目依赖

然后！依次！执行上图的‘To get started:’下3个命令；

npm install这个步骤会有点慢，执行完后项目结构如下图。

10.完成

浏览器页面：

npm终端:

11.怎么办，第X步有报错？！

每个人的电脑环境都不一样，我安装用这样的方法ok，但是有人就不可以，如果有ERR报错推荐这篇文http://www.open-open.com/lib/view/open1476240930270.html，博主除了安装方法还写了一些错误如何解决，和Vue入门的相关介绍。