一.安装流程
注：这里是windows系统的环境搭建。
- 安装node.js.
- 基于node.js,利用淘宝npm镜像安装相关依赖,
即安装cnpm. - 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架.
- 创建项目测试环境是否搭建好。
- 安装webpack,静态模块打包器。
二.流程详情
1.安装node.js
https://nodejs.org/en/
如图所示：
安装最新版本的LTS包 （长期稳定版本）
这里默认安装路径为 “C:\Program Files\nodejs” , 你可以修改目录，并点击 next（下一步）：
验证node.环境
- 键盘同时按下 windows+R 按键，打开dos命令窗口。
- 输入： node-v ,
显示node版本信息，则node.js安装成功。
如图：
2 安装cnpm
dos命令窗口输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
回车， 等待安装完成…
验证
输入： cnpm -v
显示相关信息，则安装成功。
3.安装全局vue-cli脚手架
简介：vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板。
dos命令窗口输入：
cnpm install -g vue-cli
回车，等待安装完成…
验证
输入： vue -V
注意：这里的V大写
显示版本信息， 则安装成功。
4. 创建第一个vue项目测试
① 定位到创建文件所在位置：
② 执行命令：vue init webpack Demo
③ 进入项目，下载依赖，输入：
cd Demo
cnmp install
④测试是否成功
运行：dos命令窗口输入：npm run dev
注意：如果报如图错误，则是你漏了一步，项目依赖没有下载。
在项目位置，输入： cnmp install，回车。
在浏览里输入：localhost:8080(默认端口为8080)
如图所示，则创建成功。
注意：
1.vue init webpack vuedemo创建项目时报错，提示连接超时.
原因是 vue-cli安装时出现问题，少了一个package,那是因为你可能使用国外的npm install -g vue-cli 安装脚手架，需要*，访问受到限制。而使用国内淘宝镜像cnpm install -g vue-cli命令安装，则不会出现这问题.
解决办法有两种：
1.参照别人的离线下载包方法
2. 直接卸载vue-cli脚手架，重新使用cnpm install -g vue-cli利用淘宝npm镜像安装。
① 卸载指令： npm uninstall vue-cli -g
② 检查是否安装cnpm, cnpm安装成功后，输入cnpm install -g vue-cli命令安装。
2.npm run dev 运行项目时报错，从以下几个方面检查：
1. 8080端口号可能被别的资源占用，修改端口号。
2. 项目依赖node_modules文件是否在项目目录存在。
3. 关闭windows防火墙和杀毒软件。
5.安装Webpack(项目打包工具)
由于很多浏览器还不支持ES6规范，所以可以使用webpack 把各种资源当做模块来处理和使用，打包成相应的支持的版本
①安装全局webpack
cnmp install webpack -g
②安装全局webpack-cli
cnmp install webpack-cli -g