通过安装node.js和npm的方法来安装vue
在用 Vue 构建大型应用时推荐使用 npm 安装。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。
- npm: Nodejs下的包管理器
- webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
- vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
【步骤1】：进入https://nodejs.org/zh-cn/ 下载node.js
【步骤2】：安装node.js
【步骤3】：安装完成后测试
1、安装完成后，进入对应目录查看安装完成的文件。
2、测试node.js和npm是否安装成功。打开cmd，在cmd下输入node -v，npm -v出现下图版本提示就是完成了NodeJS和npm的安装。
【步骤4】：配置npm
npm配置模块路径和cache路径。先配置npm的全局模块的存放路径以及cache的路径。
1、在NodeJs下建立"node_global"及"node_cache"两个文件夹。
2、配置prefix和cache两个参数
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
然后再输入命令 npm list -global ，查看npm本地仓库。
3、配置镜像站参数registry
输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站
4、查看所有配置的信息
输入命令npm config list 显示所有配置信息（可以看到配置的三个参数prefix、cache和registry全部显示出来）
5、检查镜像站是否OK
npm config get registry （检查镜像站是否OK，命令1）
npm info vue （检查镜像站是否OK，命令2）看看能否获得vue的信息，（注意要用管理员身份运行cmd）此时node_cache文件夹里面多了一个文件_cacache。
6、将npm更新到最新版本
打开cmd，输入npm install npm -g 对npm进行更新到最新版。
更新版本后，使用 也可以进入cmd，输入npm list -g 查看node_global文件夹里面的内容。也可以直接打开node_global文件夹查看生成的文件。这时，默认的模块路径D:\Program Files\nodejs\node_modules会变为D:\Program Files\nodejs\node_global\node_modules
这时候运行npm install会报错，例如运行npm install vue，会报错，因为没有配置环境变量。
7、配置系统变量
在环境变量的系统变量中添加系统变量，变量名是NODE_PATH，变量值是D:\Program Files\nodejs\node_global\node_modules
设置完成后，重新打开cmd
8、安装vue
运行npm install vue -g，把Vue安装到全局目录node_global下
安装完成后，进入node_global文件夹可以看到自动生成一个vue文件夹。
9、安装vue-cli（vue脚手架）
运行npm install vue-cli -g，把Vue-cli安装到全局目录node_global下
安装完成后，进入node_global文件夹可以看到自动生成一个vue-cli文件夹。
10、安装vue-router
输入命令：npm install vue-router -g
11、把vue添加到环境变量中去
环境变量的变量值为vue.cmd所在的路径，D:\Program Files\nodejs\node_global\
12、查看vue版本号
配置环境变量后一定要重启cmd，重启以后，打开cmd运行vue -V （注意V大写），可以成功的查看vue的版本号。
13、创建项目vue01
切换到D盘（nodejs的根目录）下。运行vue init webpack vue01，创建项目完成！
此时可以看到在D盘根目录下生成了一个名称为vue01的文件夹，打开文件夹查看里面内容。
14、初始化vue安装依赖
进入目录cd vue01（目录名称），运行npm install 安装依赖。
15、运行开发vue
运行npm run dev，看到complied successfully代表成功！
16、成功打开页面
浏览器打开localhost:8081可以看到下main的页面，端口号根据与上图中的端口号一致。成功界面，提示打开地址http://localhost:8080
17、生成静态文件
运行cmd，进入根目录D盘，运行npm run build。
运行完成后，自动在vue01文件夹下生成名称为dist文件夹。
18、打开dist文件夹
打开dist文件夹下的index.html页面。
html的代码为：
1 <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>myproject</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.b38abd1e8f82054d7d19.js></script><script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script></body></html>
19、总结
nmp下新建出来的vue01的目录说明：
