Mac 系统配置Vue开发环境
首先安装nodejs
终端输入：brew install nodejs 或者直接官网手动安装。 node -v 查看 nodejs版本
注：网上说使用终端安装会需要nodejs模块安装目录的权限，运行：sudo chmod -R 777 /usr/local/lib/node_modules/
3、安装npm （淘宝镜像）
终端输入：npm install -g cnpm --registry=
4、安装webpack
cnpm install webpack -g
5、安装vue脚手架（自动搭建vue项目框架的工具）
sudo npm install -g vue-cli。静待。
输入vue或者vue list，可vue是否安装成功。
vue2/vue3环境搭建
检查是否安装成功
Vue build == 打包方式，回车即可；
Install vue-router == 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code == 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
Set up unit tests == 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch == 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
1、build：构建脚本目录
1）build.js == 生产环境构建脚本；
2）check-versions.js == 检查npm，node.js版本；
3）utils.js == 构建相关工具方法；
4）vue-loader.conf.js == 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js == webpack基本配置；
6）webpack.dev.conf.js == webpack开发环境配置；
7）webpack.prod.conf.js == webpack生产环境配置；
2、config：项目配置
1）dev.env.js == 开发环境变量；
2）index.js == 项目配置文件；
3）prod.env.js == 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
1.解决vue不能自动打开浏览器的问题：当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。
改完之后重启一下即可。
2.为了避免端口冲突，也可以修改port，打开目录同上
更改成功：
1. 如果你已经全局安装了旧版本的 vue-cli(1 或2)，你需要先通过
npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它(卸载脚手架)
2.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli
3.全局安装了vue-cli3 但是还想用vue-cli2 ,添加一个桥接工具 命令：npm install -g @vue/cli-init
4.可以进行创建项目了
vue-cli2: 命令：vue init webpack my_project
vue-cli3 命令：vue create my-project
3.版本不同 安装方式也不同
vue-cli2: 命令 npm install -g vue-cli
vue-cli3: 命令 npm install -g @vue/cli
3.版本不同的创建项目方式不同
vue-cli2: 命令：vue init webpack my_project
vue-cli3 命令：vue create my-project
4.vue-cli2和vue-cli3 安装完后的 项目目录不一样
5.安装指定版本的vue
npm install -g @vue/ cli@3.12.1
vue-cli3.0项目目录结构
vue-cli2.0项目目录结构
vue-cli4.5.15 的vue2项目目录
VUE配置proxy代理、开发环境、测试环境、生产环境
前端开发过程中，我们经常会碰到跨域的问题，下面我们来配置下，不同的环境下，统一的跨域问题解决。
2、开发环境 .env.development
测试环境 .env.test
生产环境 .env.production
3、vue.config.js 配置
4、axios 配置baseURL
5、package.json 配置打包、启动 （json不可以再备注，我是为了方便理解）
vue cli4.0 配置环境变量
------------------正文开始------------------
开发项目时，经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢？
为了更加方便消化本文章，建议先看下官方文档：
环境变量和模式
看完官方的文档如果还没有明白，可以参考本文。
在vue-cli 构建的项目中，默认有3种模式，如下图：
我个人的理解就是：
你执行npm run serve时，对应的环境就是开发环境；
你执行npm run build时，对应的环境就是生产环境。
如果你开发的项目中，不止该3种，该咋整呢？像在我开发的项目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。
来，左边跟我一起画个龙，在你右边儿画一道彩虹 画完了，开始进入主题了
------------------进入主题------------------
如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境，所以配置了5个.env文件。如下图：
基本格式如下：
preNODE_ENV=环境名称
VUE_APP_URL=对应的环境地址/pre
如我本地环境的配置就如下图所示：
我本地是用的easy-mock模拟的数据，所以配置的地址是mock接口地址。
如官方文档所说，可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图：
请注意我配置文件中的 serve 与 build 。
文件已创建好，配置语句也已写好。怎么用它呢？
首页你需要哪个环境，就执行哪个环境的命令语句。
比如我现在需要local环境，就执行 npm run local-serve 。如下图所示：
然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。
比如我们在axios请求中，就可以把它的baseURL设置为 process.env.VUE_APP_URL ，如下图所示：
后面的"/web"是根据我自己接口来的，你别也写个"/web"。
如果你不确定你自己现在是在哪个环境变量下，可以 console.log("当前环境变量："+process.env.NODE_ENV) 和 console.log("当前环境路径："+process.env.VUE_APP_URL) 看下。
像我的项目中就是下面这2个东东：
输出的内容就是.env.local文件里面配置的环境变量。
为了更好的理解，我们再执行一条语句， npm run serve ,看看此时的环境变量是哪个？
为什么呢？
因为 npm run serve 默认指向.env.developement，我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图：
总而言之就是，你需要哪个环境变量，就 【npm run 对应的环境变量】 就完事了！