Vue开发环境搭建（全）—— H5最新开发环境搭建

项目现在要试用hybird模式，需要重新把web前端拾起来了，前端开发框架打算采用现在发展很迅速的Vue框架，下面介绍下它的环境的配置。

---

1.安装和配置NodeJS

去nodejs官网下载最新的版本，我的是windows系统，下载的文件是exe执行文件，直接双击运行，不停地点击“下一步”/“next”，直到安装完成，期间留意一下自己选择的安装地址。安装完成之后需要配置npm的环境变量和nodejs的环境变量。具体步骤参考，这个步骤写得很清楚了但其中最后的cluster模块随便装不装，反正我配置的时候没有安装，直接安装的Vue，下面重点介绍安装Vue步骤。

2.安装Vue

# 最新稳定版
$ npm install vue

我们可以通过参考最后提到的require指令来验证是否成功安装了Vue。但是要注意的是执行require（module）指令的位置要是安装module的目录下敲才能验证到想看到的结果。

看到下面这张图说明你的Vue安装成功咯~

3.安装Vue-CLI

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

# 全局安装脚手架
$ npm install vue-cli -g

安装的时候会提示一些可选项，大概选择步骤是：
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名 ：回车
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
Set up unit tests（安装测试工具）：n
Setup e2e tests with Nightwatch（也是测试相关）：n
Should we run npm install for you after the project has been created? (recommended)：选择：No, I will handle that myself


这下你在浏览器打上localhost:8080就能查看你Copy下来的Vue的Demo了。
恭喜，你已经成功安装Vue开发web前端的环境了。

4.安装扩展Vue Devtools

在使用 Vue 时，官方推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
具体步骤就是：
1.先;
2.然后点Google Chrome的更多-更多工具-扩展程序，然后搜索Vue Devtools;(或者直接点击链接)
3.按照提示安装就行；
安装之后Chrome会出现图标，然后只要是Vue的网页，这个图标都会亮，然后你点开控制台（F12）之后就会显示
点开Vue可以看到

5. 安装WebStorm/HBuilder/IDEA IntelliJ

安装适合自己使用的编码工具会事半功倍，从安装之后直接查看Demo代码的效果来看：IDEA IntelliJ表现不太好，vue代码都是暗色的——不好看（需要安装插件），而且从启动软件的速度来看IDEA IntelliJ也是最慢的。建议下载Hbuilder或者WebStorm来编辑工程的代码。

6.国内镜像

很多module都是国外的，国内的下载环境因为防火墙的缘故难免会遇到下载异常缓慢的现象，我在上面第二步下载Vue的时候就使用了淘宝的镜像，会大大提高下载速度，建议使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。或者采用下面这种方式（每次都需要加载镜像地址比较麻烦）：

---

前面三步都是要必须安装的，后面三步看个人需要是否安装。