**<font size=6>Web前端开发之构建Vue-cli3.0工程</font>**
# 参考资料
Standard Tooling for Vue.js Development
https://cli.vuejs.org/guide/
Vue-cli3.0
https://github.com/vuejs/vue-cli/tree/fb97646ee51d4fb9c95a01913377cdadf819b6cf(config start)
以vue-cli为基础，结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo
https://github.com/Abiel1024/vue-project （ 内含配置环境变量和模式配置的例子）
Environment Variables and Modes
https://github.com/vuejs/vue-cli/blob/fb97646ee51d4fb9c95a01913377cdadf819b6cf/docs/guide/mode-and-env.md (重点Environment Variables and Modes)
Vue-cli configulation reference
https://github.com/vuejs/vue-cli/tree/fb97646ee51d4fb9c95a01913377cdadf819b6cf/docs/config#baseurl （vue.config.js配置明细）
Vue-cli3静态资源和项目结构
https://segmentfault.com/a/1190000014456796?utm_source=index-hottest (vue-cli3.0默认项目目录与2.0的相比)
Webpack中文文档
https://www.webpackjs.com/concepts/ (科普Webpack)
@vue/cli-plugin-eslint
https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint (@vue/cli-plugin-eslint 感觉eslint一直是个盲区)
# 架构
**基本架构**
vue-router
vuex
axios
elementUI
**开发辅助**
mock
# 工程
## 一、构建工程
### 创建工程
在您的workspace目录中，执行如下命令，则创建一个Vue-cli3.0工程:
npm create my-project
####工程目录结构
新创建的工程目录结构如下：
<Image>
### 启动工程
执行如下命令启动Web服务：
cd my-project
npm run serve
```
DONE Compiled successfully in 5167ms 09:26:17
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.43.111:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
```
## 二、配置工程
通过npm create命令创建的工程只包含了最简单的代码结构，接下来要对整个开发周期所需要的配置文件进行添加和配置。
### 1、配置环境变量
在系统根目录下增加以下配置文件：
vue.config.js
.env.development
.env.production
.env.stage
#### vue.config.js文件
说明：vue.config.js是一个可选的配置文件，您可以在这个文件里配置系统环境变量及其基本变量，如果它出现在项目根目录中，就会被@vue/cli-service自动加载。如果不用vue.config.js文件，则可以使用package.json的vue字段来配置，区别在package.json里需要使用josn格式的值。
vue.config.js的常用配置项:
baseUrl
outputDir
assetsDir
pages
devServer
#### .env 环境变量文件
.env*文件用来指定环境变量，分一般的环境变量文件和指定模式的环境变量文件;
* 一般的环境变量文件
.env文件是一般的环境变量文件，所有模式下都会被@vue/cli-service加载。
* 指定模式的环境变量文件
带有后缀的.env文件是指定模式的环境变量文件，其后缀名即模式名称，比如：
.env.production 生产模式环境变量文件
.env.development 开发模式环境变量文件
.env.stage 演示模式环境变量文件
.env 所有模式都会加载的环境变量文件
* 环境文件只包含环境变量的“键=值”对
* .env.*优先度更高，.env.*会覆盖.env中的同名变量
* @vue/cli-service会根据命令加载相应的.env文件
vue-cli-service build命令会加载.env, .env.production的环境变量；
vue-cli-service run命令会加载.env, .env.development的环境变量；
vue-cli-service build --mode stage命令会加载.env, .env.stage的环境变量。
* 被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。
### 2、在客户端代码中使用环境变量
在客户端代码中可以使用的环境变量有两种:
* 两个特殊变量：
- NODE_ENV
会是 "development"、"production" 或 "stage" 中的一个。具体的值取决于应用运行的模式。
- BASE_URL
会和 vue.config.js 中的 baseUrl 选项相符，即你的应用会部署到的基础路径。
* VUE_APP_* 变量
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端的包中。可以在应用的代码中这样访问它们:
```
console.log> > (process.env.VUE_APP_TITILE)
```
* Html文件访问环境变量
所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用;
插值访问方式:
<%= VALUE %> 用来做不转义插值;
<%- VALUE %> 用来做 HTML 转义插值；
<% expression %> 用来描述 JavaScript 流程控制。
例如：
配置环境变量VUE_APP_TITILE做为系统页面的title,index.html中可以这样访问它：
方式一：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= VUE_APP_TITILE%></title>
</head>
<body>
.......
</body>
</html>
```
方式二：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%- VUE_APP_TITILE%></title>
</head>
<body>
.......
</body>
</html>
```
### 3、处理静态资源
### 4、使用mock数据
https://www.css88.com/archives/10066
https://www.jb51.net/article/141066.htm
https://blog.csdn.net/github_39457740/article/details/81878121
https://www.jb51.net/article/151305.htm (这种方式还是不起作用)
## 三、开发测试
## 四、打包
## 五、部署
和后台分离部署
