做前端很长时间了。最近有项目，前端想构建成单页面应用。对比VUE和REACT，犹豫了几天，还是先选择了VUE，不为别的，就感觉VUE上手会更容易一些。
不过，环境搭建也是很费神了，因为是第一次，整个过程都是从查资料开始，所以记录一下，备查。
一、nodejs
所有从零开始的，都先装nodejs吧。windows下倒也简单，到官网，下载windows版本，注意64位或32位的区别，然后next一步步安装就好。注意：如果是win10系统，npm版本要求在 3.0以上，否则最后运行服务时会报错。
（关于nodejs，建议在安装使用前，多看看相关文档，基础扎实了用起来才顺手。）
安装路径可以改。默认装C盘，时间久了C盘空间又不够了。我的话，喜欢装到D盘（D:\Program Files\nodejs）。
安装完成后，可以先查看有没有装成功：
打开windows命令窗，分别输入node -v 和 npm -v ，如果回车后输出相应的版本信息，则说明安装成功了。
（有的教程会单独讲述npm的安装，但现在的node版本，基本上都带着npm，装完node就有npm了，不需要单独安装）
下面，是很重要的一步：配置环境变量。开发过程中，很多插件、包、模块，你不希望都装到C盘去吧？（这就是前面提到的，为什么不把nodejs装到C盘的原因。）所以，我们都习惯在nodejs的安装目录下，创建两个目录（node_cache、node_global），用来安装模块，如下图：
空文件夹创建完成后，打开windows命令窗输入下面两个命令：
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
如果没有报错，那说明配置已经完成了，ok了。
好了，测试一下。以express安装为例：
命令窗下，输入 npm install express -g ，然后回车，正确的话，信息应该如下：
测试一下，命令窗输入 node 回车，然后输入：require(‘express’)，查看输出的信息，如报错则表明环境配置错误，再次核对与以上配置无误。
二、VUE开发环境的搭建
nodejs安装完成，可以进行vue开发环境的搭建了。vue有一个专门的脚手架工具，叫vue-cli，可以快速搭建vue的开发环境。不过，在安装vue-cli之前，建议先装一下淘宝的npm镜像。国内访问国外的资源是很虐心的，直接用npm装vue的脚手架，我从来没成功过。所以，先安装淘宝镜像cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等一会儿，应该很容易安装的。
cnmp安装成功后，就可以用淘宝的npm镜像安装vue-cli了，命令如下：
cnpm install -g vue-cli
应该很容易安装成功。（直接用 npm install -g vue-cli 的话，从来没安装成功过。）安装完成后，使用vue -V 命令测试一下，如果安装成功，它会输出vue的版本号。
如果以上操作都正确了，那说明vue开发环境搭建成功了。
三、创建一个VUE 项目
现在开发环境已经搭建完成，可以创建项目，进入vue的开发了。
vue项目可以创建在任何目录，我自己就比较喜欢把项目进行集中管理，因此我都会有统一的项目目录。
进入项目目录，如：%:/mypro/myapp/ ，按住shift 键点击鼠标右键，在弹出的上下文菜单中，点击 “在此处打开命令窗口”，打开windows命令窗口，输入：
vue init webpack 你的项目名称（如：text_vue）
回车，会自动帮你下载vue的相关模板文件，成功后的信息应该如下：
按提示，进入项目目录：cd eduApp
接着，按提示，npm install ，安装npm依赖项；如果安装成功，项目目录eduApp的文件结构应该如下图：
依赖项安装完成后，最后运行： npm run dev ，运行web服务（这个服务，我理解是nodejs创建的一个web服务）。默认的web端口为8080，如果要修改，在 npm run dev 之前，到项目目录下的文件：config/index.js ，用编辑器打开，把dev 下面的 port:8080 改为其它，如：port:8060 ，如下图：
保存文件。然后，npm run dev 吧，前面的配置、安装都正确的话，会在默认浏览器中弹出如下页面：
一个vue项目算是跑起来了。后面有时间，将会陆续写一些vue的开发心得。