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

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

 

笔者最近在进行前端的学习，在点完了HTML五、CSS三、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