Window环境下搭建Vue.js开发环境

原文链接:http://blog.csdn.net/solo95/article/details/72084907

笔者最近在进行前端的学习，在点完了HTML5、CSS3、JavaScript等技能树之后，是时候开始框架的学习了。目前为止前端框架呈现出React、Angular、Vue三足鼎立的局面，在这三种框架中，Vue最为简单，使用场景最为广泛，因此笔者从Vue开始学习，但是发现网上能搜到的Vue安装教程均不全面，所以写出此篇供大家学习。

大致步骤

• 安装Node.js
• 安装Vue.js
• 安装Webpack

Step1: 安装Node.js

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。

Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

Node.js 的包管理器 npm，是全球最大的开源库生态系统。后续安装都依赖于npm命令(笔者注)。

官方下载地址：
https://nodejs.org/en/download/

1. 下载完成后直接安装，选择默认路径，Windows还是比较方便的，这时候请注意，其他教程都有设置Path的步骤，其实你可以不设置，因为Windows下安装的时候默认有add to Path功能。
2. Win + R打开cmd，然后输入node --version看到版本信息说明安装成功，接下来输入npm install node安装node的二进制文件，这可能耗费一点时间。

如果在上述步骤遇到问题可以参考这里：
http://www.runoob.com/nodejs/nodejs-install-setup.html
其中二进制文件的方法与上述步骤有所差异，菜鸟教程是下载exe直接安装。

Step 2: 安装Vue.js

首先使用淘宝的镜像升级npm，使其可以使用cnpm命令(单纯的npm可能由于网络长城因而速度受限)。

1. 升级npm
   npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装Vue
   cnpm install vue

3. 安装Vue官方提供的命令行工具
   cnpm install -g vue-cli

Step3: 安装webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript、JSX等），并将其打包为合适的格式以供浏览器使用。

1. 安装WebPack
   cnpm install webpack -g

2. 在合适位置新建一个文件夹，命名为Vue-Demo，点进文件夹，右键git bash here。(如果没有安装Git你需要手动在cmd中cd进这个目录)

3. 使用vue init webpack vue-test创建一个示例目录,回车下一步，遇到选择都选n。

4. cd vue-test进入这个目录,遇到命令行界面卡死，可以鼠标点进这个目录，然后git bash here。(如果没有安装Git你需要手动在cmd中cd进这个目录)

5. cnpm install安装依赖

6. cnpm run dev

7. 浏览器输入localhost:8080看到Vue界面证明所有步骤均成功。

遇到问题参考这里：

http://www.cnblogs.com/jiajia123/p/6132265.html