vue-cli 3.x版本安装构建项目 和 全局环境变量使用

1.命令行安装

npm install -g @vue/cli

2.查看安装是否成功 , 显示版本3.x以上就是安装成功了

vue -V

3.命令行创建项目,demo为项目名自己写

vue create demo

前面三个先无视,是我自己创建的搭建项目模板
如果首次安装完成应该是只有default 和 Manually select features
default 为默认模板,只有babel和eslint
Manually select features 为自定义模板，可以添加 vue-router , vuex , ts , css处理器等

Manually select features

用git base的话我不知道如何上下选择,使用cmd命令行的话就可以上下选择,按空格变绿确认
···
一般选择babel , router , vuex , css处理器就可以了, 如果使用ts开发可以选择ts
pwa为app开发，可以在离线状态下看网站具体百度pwa吧。
···
最后选择完后会有一个问你是否保存构建项目模板,如果需要就选他然后给他命名，下次开发选择模板就可以了。

---

vue-cli 3.x版本的目录结构跟 2.x的差不多

目录结构

webpack.config.js没有了，如果需要自己创建一个vue.config.js

---

全局环境变量的使用：

在项目根路径下创建 .env 文件
VUE_APP为固定写法,URL可以自己命名

//.env
VUE_APP_URL = "自定义路径"

使用全局环境变量

//demo.vue

开发环境下的全局环境变量,创建 .env.development 文件
如果内容跟 .env 一样的话
开发环境下就会走这个文件的环境变量
当打包之后就会走 .env的环境变量

还可以创建一个 .env.production 文件..
如果有 .env.production 文件 内容和 .env 文件一样
那么打包走的环境变量是 .envproduction 文件的环境变量