**<font size=6>Web前端開(kāi)發(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組件庫(kù)搭建一個(gè)工程化前端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? (重點(diǎn)Environment Variables and Modes)
Vue-cli configulation reference?
https://github.com/vuejs/vue-cli/tree/fb97646ee51d4fb9c95a01913377cdadf819b6cf/docs/config#baseurl? （vue.config.js配置明細(xì)）
Vue-cli3靜態(tài)資源和項(xiàng)目結(jié)構(gòu)?
https://segmentfault.com/a/1190000014456796?utm_source=index-hottest (vue-cli3.0默認(rèn)項(xiàng)目目錄與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 感覺(jué)eslint一直是個(gè)盲區(qū))
# 架構(gòu)
**基本架構(gòu)**?
vue-router?
vuex?
axios?
elementUI
**開(kāi)發(fā)輔助**?
mock?
# 工程
## 一、構(gòu)建工程?
### 創(chuàng)建工程
在您的workspace目錄中在刺，執(zhí)行如下命令贷岸，則創(chuàng)建一個(gè)Vue-cli3.0工程:?
npm create my-project?
####工程目錄結(jié)構(gòu)
新創(chuàng)建的工程目錄結(jié)構(gòu)如下：?
<Image>
### 啟動(dòng)工程
執(zhí)行如下命令啟動(dòng)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.
```
## 二、配置工程
通過(guò)npm create命令創(chuàng)建的工程只包含了最簡(jiǎn)單的代碼結(jié)構(gòu)嵌削，接下來(lái)要對(duì)整個(gè)開(kāi)發(fā)周期所需要的配置文件進(jìn)行添加和配置毛好。
### 1、配置環(huán)境變量?
在系統(tǒng)根目錄下增加以下配置文件：?
vue.config.js?
.env.development?
.env.production?
.env.stage?
#### vue.config.js文件?
說(shuō)明：vue.config.js是一個(gè)可選的配置文件苛秕，您可以在這個(gè)文件里配置系統(tǒng)環(huán)境變量及其基本變量肌访，如果它出現(xiàn)在項(xiàng)目根目錄中，就會(huì)被@vue/cli-service自動(dòng)加載想帅。如果不用vue.config.js文件场靴，則可以使用package.json的vue字段來(lái)配置，區(qū)別在package.json里需要使用josn格式的值港准。
vue.config.js的常用配置項(xiàng):?
baseUrl?
outputDir?
assetsDir?
pages?
devServer?
#### .env 環(huán)境變量文件?
.env*文件用來(lái)指定環(huán)境變量旨剥，分一般的環(huán)境變量文件和指定模式的環(huán)境變量文件;?
* 一般的環(huán)境變量文件?
.env文件是一般的環(huán)境變量文件，所有模式下都會(huì)被@vue/cli-service加載浅缸。
* 指定模式的環(huán)境變量文件?
帶有后綴的.env文件是指定模式的環(huán)境變量文件轨帜，其后綴名即模式名稱，比如：?
.env.production? 生產(chǎn)模式環(huán)境變量文件?
.env.development? 開(kāi)發(fā)模式環(huán)境變量文件?
.env.stage? 演示模式環(huán)境變量文件?
.env 所有模式都會(huì)加載的環(huán)境變量文件?
* 環(huán)境文件只包含環(huán)境變量的“鍵=值”對(duì)
* .env.*優(yōu)先度更高衩椒，.env.*會(huì)覆蓋.env中的同名變量
* @vue/cli-service會(huì)根據(jù)命令加載相應(yīng)的.env文件?
vue-cli-service build命令會(huì)加載.env, .env.production的環(huán)境變量蚌父；?
vue-cli-service run命令會(huì)加載.env, .env.development的環(huán)境變量；?
vue-cli-service build --mode stage命令會(huì)加載.env, .env.stage的環(huán)境變量毛萌。
* 被載入的變量將會(huì)對(duì) vue-cli-service 的所有命令苟弛、插件和依賴可用。
### 2阁将、在客戶端代碼中使用環(huán)境變量
在客戶端代碼中可以使用的環(huán)境變量有兩種:
* 兩個(gè)特殊變量：?
? - NODE_ENV?
會(huì)是 "development"膏秫、"production" 或 "stage" 中的一個(gè)。具體的值取決于應(yīng)用運(yùn)行的模式做盅。?
? - BASE_URL?
? ? 會(huì)和 vue.config.js 中的 baseUrl 選項(xiàng)相符缤削，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑窘哈。
* VUE_APP_* 變量?
只有以 VUE_APP_ 開(kāi)頭的變量會(huì)被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端的包中⊥じ遥可以在應(yīng)用的代碼中這樣訪問(wèn)它們:?
```
console.log> > (process.env.VUE_APP_TITILE)
```
* Html文件訪問(wèn)環(huán)境變量?
所有解析出來(lái)的環(huán)境變量都可以在 public/index.html 中以 HTML 插值中介紹的方式使用;?
插值訪問(wèn)方式:?
<%= VALUE %> 用來(lái)做不轉(zhuǎn)義插值;?
<%- VALUE %> 用來(lái)做 HTML 轉(zhuǎn)義插值滚婉；?
<% expression %> 用來(lái)描述 JavaScript 流程控制。?
例如：?
配置環(huán)境變量VUE_APP_TITILE做為系統(tǒng)頁(yè)面的title,index.html中可以這樣訪問(wèn)它：?
方式一：?
```
<!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 (這種方式還是不起作用)?
## 三、開(kāi)發(fā)測(cè)試
## 四扣溺、打包
## 五哨鸭、部署
和后臺(tái)分離部署?
