1. Vue JS环境搭建过程

1. 基础安装：node.js

　　下载：

　　　　node.js官网：https://nodejs.org/en/，下载相应版本安装文件node-vXXX.msi

　　安装：

　　　　双击执行安装文件，默认操作一步步安装；

　　　　完成后，自动配置环境变量。

　　验证：

　　　　打开命令行，输入node -v，正常显示node版本号；

　　　　输入npm -v，正常显示npm版本号

2.环境配置

　　安装完成后，默认npm仓库目录位于 user\appdata\roaming 目录下的 npm、npm-cache

　　在此需将其移动至安装目录下面，在node安装目录下创建以下文件夹：

　　　　mkdir node_cache

　　　　mkdir node_global

　　配置仓库目录至node安装目录，执行以下命令：

　　　　npm config set prefix "x:\nodejs\node_global"

　　　　npm config set cache "x:\nodejs\node_cache"

　　执行完成后，输入npm list -global查看本地仓库信息，会返回已安装的包信息

　　npm使用默认安装完后的配置，安装包时，速度比较慢，可通过更新镜像站的方式来提升速度，如下：

　　　　npm config set registry=http://registry.npm.taobao.org

　　配置好后，可通过命令npm config list查看更新后的结果

　　查看镜像配置结果：

　　　　npm config get registry 返回镜像站信息

　　　　npm info vue　　　　查看是否能获取vue信息

　　更新npm默认目录

　　　　npm install npm -g  安装完后，npm目录更新为 global目录下。

　　　　增加环境变量NODE_PATH，值设置为x:\nodejs\node_global\node_modules

　　　　设置完环境变量后，需重新打开cmd

2. 安装Vue、vue-cli(vue-cli与@vue/cli有所区别，后单独收集，此处安装vue-cli)

　　命令行安装：

　　　　输入npm install vue -g，开始安装vue，等待安装完成

　　　　输入npm install vue-router -g，安装vue路由，等待安装完成

　　　　输入npm install vue-cli -g，开始安装vue-cli工具，等待安装完成

　　安装后验证：

　　　　输入vue -V，可查看版本

3.创建应用测试：

　　vue-cli工具内置了webpack和webpack-simple

　　1）创建目录vue_test

　　2）输入命令cd vue_test

　　3）输入命令vue init webpack vue01，开始创建vue应用项目，开始时需配置一些参数，如下：

                 

　　4）应用创建完成后，还需安装依赖，运行依赖，有如下提示：

　　  　　

　　5）输入cd vue01，进入应用目录；

　　6）输入npm install，开始安装依赖；

　　7）输入npm run dev运行应用，应用成功启动后，有如下界面：

　　　　

　　8）在浏览器中打开地址 http://localhost:8080，有如下界面显示，则应用创建成功：

　　　　

　　9）成功创建应用后，结束运行，输入npm run build生成静态文件，生成目录dist文件夹下。