**<font size=6>Web前端開發(fā)之構(gòu)建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為基礎(chǔ)，結(jié)合vue-router、vuex、axios、iview組件庫搭建一個工程化前端demo?
https://github.com/Abiel1024/vue-project? （ 內(nèi)含配置環(huán)境變量和模式配置的例子）?
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靜態(tài)資源和項目結(jié)構(gòu)?
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一直是個盲區(qū))
# 架構(gòu)
**基本架構(gòu)**?
vue-router?
vuex?
axios?
elementUI
**開發(fā)輔助**?
mock?
# 工程
## 一、構(gòu)建工程?
### 創(chuàng)建工程
在您的workspace目錄中，執(zhí)行如下命令，則創(chuàng)建一個Vue-cli3.0工程:?
npm create my-project?
####工程目錄結(jié)構(gòu)
新創(chuàng)建的工程目錄結(jié)構(gòu)如下：?
<Image>
### 啟動工程
執(zhí)行如下命令啟動Web服務(wù)：?
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命令創(chuàng)建的工程只包含了最簡單的代碼結(jié)構(gòu)，接下來要對整個開發(fā)周期所需要的配置文件進行添加和配置。
### 1、配置環(huán)境變量?
在系統(tǒng)根目錄下增加以下配置文件：?
vue.config.js?
.env.development?
.env.production?
.env.stage?
#### vue.config.js文件?
說明：vue.config.js是一個可選的配置文件，您可以在這個文件里配置系統(tǒng)環(huán)境變量及其基本變量，如果它出現(xiàn)在項目根目錄中，就會被@vue/cli-service自動加載。如果不用vue.config.js文件，則可以使用package.json的vue字段來配置，區(qū)別在package.json里需要使用josn格式的值。
vue.config.js的常用配置項:?
baseUrl?
outputDir?
assetsDir?
pages?
devServer?
#### .env 環(huán)境變量文件?
.env*文件用來指定環(huán)境變量，分一般的環(huán)境變量文件和指定模式的環(huán)境變量文件;?
* 一般的環(huán)境變量文件?
.env文件是一般的環(huán)境變量文件，所有模式下都會被@vue/cli-service加載。
* 指定模式的環(huán)境變量文件?
帶有后綴的.env文件是指定模式的環(huán)境變量文件，其后綴名即模式名稱，比如：?
.env.production? 生產(chǎn)模式環(huán)境變量文件?
.env.development? 開發(fā)模式環(huán)境變量文件?
.env.stage? 演示模式環(huán)境變量文件?
.env 所有模式都會加載的環(huán)境變量文件?
* 環(huán)境文件只包含環(huán)境變量的“鍵=值”對
* .env.*優(yōu)先度更高，.env.*會覆蓋.env中的同名變量
* @vue/cli-service會根據(jù)命令加載相應(yīng)的.env文件?
vue-cli-service build命令會加載.env, .env.production的環(huán)境變量；?
vue-cli-service run命令會加載.env, .env.development的環(huán)境變量；?
vue-cli-service build --mode stage命令會加載.env, .env.stage的環(huán)境變量。
* 被載入的變量將會對 vue-cli-service 的所有命令、插件和依賴可用。
### 2、在客戶端代碼中使用環(huán)境變量
在客戶端代碼中可以使用的環(huán)境變量有兩種:
* 兩個特殊變量：?
? - NODE_ENV?
會是 "development"、"production" 或 "stage" 中的一個。具體的值取決于應(yīng)用運行的模式。?
? - BASE_URL?
? ? 會和 vue.config.js 中的 baseUrl 選項相符，即你的應(yīng)用會部署到的基礎(chǔ)路徑。
* VUE_APP_* 變量?
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端的包中?？梢栽趹?yīng)用的代碼中這樣訪問它們:?
```
console.log> > (process.env.VUE_APP_TITILE)
```
* Html文件訪問環(huán)境變量?
所有解析出來的環(huán)境變量都可以在 public/index.html 中以 HTML 插值中介紹的方式使用;?
插值訪問方式:?
<%= VALUE %> 用來做不轉(zhuǎn)義插值;?
<%- VALUE %> 用來做 HTML 轉(zhuǎn)義插值；?
<% expression %> 用來描述 JavaScript 流程控制。?
例如：?
配置環(huán)境變量VUE_APP_TITILE做為系統(tǒng)頁面的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、處理靜態(tài)資源?
### 4、使用mock數(shù)據(jù)?
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 (這種方式還是不起作用)?
## 三、開發(fā)測試
## 四、打包
## 五、部署
和后臺分離部署?
