vue开发环境搭建vue-cli、npm (超详细傻瓜式安装教程)
一、使用之前，我们先来掌握3个东西是用来干什么的。
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
二、安装node.js
官网：https://nodejs.org/en/
本文演示最新版本，可自行选择其他版本
所有版本：https://nodejs.org/dist/
双击打开下载的.msi安装文件开始安装
三、配置npm管理器
1.查看信息
管理员身份运行cmd或者 win+x 选择 windows powershell 管理员 进行后续操作
依次执行下列命令查看是否安装成功
查看安装时勾选的环境变量配置：echo %path%
查看安装的node.js版本：node -v
查看安装的node.js自带npm包管理器版本：npm -v
2.可选操作，这一步可以忽略
执行命令npm list -g 可以看到默认的全局配置路径
默认是 C:\Users\Administrator\AppData\Roaming\npm\node_modules，我们来把他单独配置出来
1).新建文件夹
新建一个node_global文件夹作为node各种包的全局路径，根据个人习惯把它放到nodejs安装目录中
新建一个node_chahe文件夹作为node各种包处理出错时的日志记录，根据个人习惯也把它放到nodejs安装目录中
2).更改默认配置(路径自行更改)
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_chahe"
3.配置npm镜像
npm config set registry=http://registry.npm.taobao.org
服务器在国外，不配置的话下载可能会很慢或者根本连不上
4.查看是否配置成功
输入 npm config list 查看之前的默认配置是否更改成功
输入 npm list -g 查看全局路径是否更改成功
输入 npm info vue 查看镜像是否有效，返回vue版本信息即为有效
四.安装Vue相关环境
1.安装vue
npm install vue -g vue是2.x版本的
若要安装最新3.x则使用vue@next
npm install vue@next -g
当然你也可以指定版本安装
查看脚手架版本号：npm view vue versions --json
安装命令：npm install vue@版本号 -g
2.安装vue-cli
PS：如果已经安装过其他版本，需要升级或降级，先卸载再重新安装
卸载：npm uninstall vue-cli -g 或 npm uninstall @vue/cli -g
安装：npm install vue-cli -g vue-cli是对应vue 1.x和2.x的脚手架
若要安装最新vue-cli则使用 @vue/cli ，其对应vue 3.x的脚手架
npm install @vue/cli -g
当然你也可以指定版本安装
查看脚手架版本号：npm view vue-cli versions --json 或 npm view @vue/cli versions --json
安装命令：npm install vue-cli@版本号 -g 或 npm install @vue/cli@版本号 -g
3.安装vue-router
npm install vue-router -g
指定版本同上
4.检查安装
输入：npm list -g 返回安装的模块即为成功
5.配置环境变量
此电脑-->右键属性-->高级系统设置-->环境变量-->系统变量中找到Path 在后面追加vue-cli的配置路径
win7 是一行，添加时用英文分号(;)隔开，最后面不需要添加分号
win10 是一个列表，直接点击新建粘贴进去即可
6.检查配置
打开新的cmd窗口，输入 vue -V 返回vue-cli的版本号即为配置成功
五、新建项目测试(打开cmd切换到想要新建项目的目录路径)
PS：vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。
1.初始化webpack
vue init webpack test01
可能会出现命令提示，按照提示执行以下即可
2.填写项目信息，等待创建
3.运行项目
根据提示运行命令：cd test01 和 npm run dev ，用网页打开项目运行地址即可