安装vue-cli3.0版本指南
安装vue-cli3.0版本操作指南
日常使用vue-cli3.0以下版本，随着前端不断更新vue-cli3.0以上版本，那么安装新版本会遇到很多问题，并不是所有人都会一番风顺，应粉丝要求，出3.0以上版本操作指南
请先看下鄙人的vue-cli3.0以下版本操作详情，百试不错的详情操作，实践中尝试了很多次错误，才总结出来的真经方法：
安装vue错误详情解决办法:https://blog.csdn.net/Josiah_Yuan/article/details/103605963
那么vue-cli3.0以上版本如下安装：
最常规的方法：
- 卸载3.0以下的版本，安装3.0以上版本
- 卸载：$ npm uninstall vue-cli -g / $ yarn global remove vue-cli
- 安装：$ npm install @vue/cli -g / $ yarn global add @vue/cli
结束后进行测试：$ vue --version / $ vue -V / $ vue -v
如果出现版本号，预示成功了，祝贺你！！！
但是：
很多人因为电脑设置不一样，或者版本冲突等问题，会出现一系列卸载不了，无法安装的苦恼。。。头痛呀！！
那么，接下来，我总结这个解决的方式:
往往使用了无数遍npm uninsall vue-cli -g都无法卸载vue 2.x
其实主要是环境变量的问题
- 在默认情况下，node和vue并没有配置环境变量，所以默认npm安装路径在：C:\Users\Myn\AppData\Roaming\npm\node_modules文件夹下，而node.js我们一般安装在D盘，这样就会有路径冲突
- 需要通过修改环境变量的方式来实现路径的一致。
1.添加node.js的安装路径
dos下查询node的安装路径：
将node的安装路径添加到path环境变量
添加新的系统变量NODE_PATH,此处value为：node文件夹下的node_modules文件夹路径
2.重新设置npm默认安装路径：
命令：
npm config set prefix "D:\nodejs"//这里的路径必须是上面path对应！
npm config set cache "D:\nodejs\node_cache"//—这里是我自定义的缓存路径，无关紧要
3.重新卸载vue-cli2
- 卸载：
$ npm uninstall vue-cli -g / $ yarn global remove vue-cli
4.重新安装vue-cli3
- 安装：
$ npm install @vue/cli -g / $ yarn global add @vue/cli
测试是否安装成功:Dos下输入命令：vue -V,就可以看到当前版本号
这就成功了。。。但是why @vue/cli 4.5.7
我们再看一下不同版本vue-cli区别：
目录
- vue-cli 命令
- 项目结构
- 设置环境变量
目录
vue-cli 命令
项目结构
设置环境变量
（一）vue-cli 命令
- vue-cli下载安装：
- vue-cli2:
npm install vue-cli -g
- vue-cli3/cli4:
npm install -g vue@cli
2. 创建新项目
- vue-cli2:
vue init webpack 2.0project
- vue-cli3/cli4:
vue create 3.0project
或通过视图创建项目：vue ui
3. 启动项目
- vue-cli2:
npm run dev
- vue-cli3/cli4:
npm run serve
（二）项目结构
vue-cli3/cli4中移除了配置文件目录：config 和 build 文件夹。
同时移除了static 静态文件夹，新增了public文件夹，将 index.html移动到 public 中。
- 1.vue-cli2
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息,包依赖信息等
- 2.vue cli3/cli4
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- public // 静态文件，比如一些图片，json数据等
| |-- favicon.ico // 图标文件
| |-- index.html // 入口页面
|-- vue.config.js // 是一个可选的配置文件，包含了大部分的vue项目配置
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- package.json // 项目基本信息,包依赖信息等
（三）设置环境变量
项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。
不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。
- 1.vue-cli2:
vue-cli如何添加多种环境变量 - 2.vue-cli3：
vue-cli3构建的项目中默认只有development模式和production模式，默认的NODE_ENV分别是development和production，很多配置也只依据NODE_ENV区分这2种模式。
补充：
在 .env.[mode] 模式文件中，三个环境变量及其含义：
NODE_ENV（对应当前模式的名称）
VUE_APP_RUNTIME_ENV（对应当前环境的名称）
VUE_APP_BASE_URL（当前环境向后台发请求的baseurl）
使用环境变量：
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
在js文件或者在vue文件中process.env.{环境变量名}，比如上文定义的VUE_APP_BASE_URL，使用process.env.VUE_APP_BASE_URL即可获取环境变量的值。
在html文件中使用环境变量，采用模板引用指令<%= process.env.process.env.{环境变量名} %>，比如
<script src="xxx.com" app_id="<%= process.env.process.env.MY_APP_ID %>"/>
- 3.vue-cli4
vue-cli4 和 vue-cli3在环境变量设置和使用上差别不大。