首先展示正確的格式(以驗(yàn)證是否為空為例):

html代碼塊:

1.  
   <el-form :model="nodeName(數(shù)組名)" ref="nodeName(數(shù)組名)">
2.  
   <el-form-item prop="name(數(shù)組內(nèi)的屬性)" label="內(nèi)容:" :rules="[{ required: true, message: '不能為空'}]">
3.  
   <el-input type="name(數(shù)組內(nèi)的屬性)" v-model="nodeName.name(數(shù)組內(nèi)的屬性)"></el-input>
4.  
   </el-form-item>
5.  
   </el-form>

js代碼塊:

1.  
   data(){
2.  
   return{
3.  
   // 表單
4.  
   nodeName:{
5.  
   name:''
6.  
   }
7.  
   }
8.  
   },

前端展示(輸入內(nèi)容后顯示為空消失):

下面開(kāi)始總結(jié)常見(jiàn)的問(wèn)題以及功能失效的原因.

1. input左側(cè)出現(xiàn)星號(hào),內(nèi)容為空卻不提醒

原因:已經(jīng)寫(xiě)好了驗(yàn)證功能,但是沒(méi)有綁定到input框 .

解決方法:是<el-form-item>標(biāo)簽加入prop="數(shù)組內(nèi)要驗(yàn)證的屬性"或者<el-input>標(biāo)簽中加入type="數(shù)組內(nèi)要驗(yàn)證的屬性".

2.input框里已經(jīng)有內(nèi)容,但還是顯示不能為空

(一)原因:input有數(shù)據(jù),但是表單沒(méi)有驗(yàn)證到.

解決方法:給<el-form>綁定整個(gè)數(shù)組.v-model="newName".

(二)原因:表單驗(yàn)證綁定的不是數(shù)組,只是一個(gè)單純的ojbect或者number或者char類型

 如此種情況,無(wú)論輸入什么都會(huì)提示為空.

解決方法:將綁定驗(yàn)證內(nèi)容變成數(shù)組【也可以把表單驗(yàn)證寫(xiě)在data里面】

[表單驗(yàn)證只能綁定數(shù)組,如果單純綁定一個(gè)數(shù)值,會(huì)出現(xiàn)驗(yàn)證不到的現(xiàn)象發(fā)生]!!!!!!!!!

3.提交表單按鈕無(wú)法驗(yàn)證以及符合驗(yàn)證的表單內(nèi)容,也就是提交失敗.

此情況一般報(bào)錯(cuò)為兩個(gè):

 Element-ui官方樣式表單提交函數(shù)功能是這樣展示的:

1.  
   newNameBtn(newName) {
2.  
   this.$refs[newName].validate((valid) => {
3.  
   if (valid) {
4.  
   alert('submit!');
5.  
   } else {
6.  
   console.log('error submit!!');
7.  
   return false;
8.  
   }
9.  
   });
10.  
    },

 我們可以看到方法是this.$refs[數(shù)組名].validate(() =>{})或者this.$refs.數(shù)組名.validate(() =>{})這樣一個(gè)函數(shù).

如果你用的html5或者是其他不顯示參數(shù)的集成工具,代碼是這樣的:

 并不知道這個(gè)this.$refs有沒(méi)有真正的請(qǐng)求到,如果你用的顯示參數(shù)的集成工具(如phpstorm),如果你的代碼正確,會(huì)這樣顯示:

 我們看到會(huì)多顯示一個(gè)callback,這就說(shuō)明this.$refs生效了.

所以不管你使用說(shuō)明軟件寫(xiě)的代碼,如果出現(xiàn)表單驗(yàn)證提交錯(cuò)誤.也就是現(xiàn)實(shí)開(kāi)頭那兩個(gè)錯(cuò)誤.你就先輸入console.log(this.$ref.newName)[此處的newName是你自己綁定的數(shù)組]

看看輸出是一個(gè)對(duì)象還是undefine.顯示這個(gè)對(duì)象說(shuō)明this.$refs.newName請(qǐng)求成功.

如果顯示undefine,可以這樣改正:

(一)你的代碼格式書(shū)寫(xiě)錯(cuò)誤,請(qǐng)比照上文有紅箭頭的圖正確案例改正格式.

(二)你的<el-form>未綁定ref,請(qǐng)給<el-form>標(biāo)簽綁定ref="newName"[此處的newName是你自己綁定的數(shù)組]

出現(xiàn)表單驗(yàn)證錯(cuò)誤先比對(duì)案例 ,然后再按照自己的具體代碼綁定自己的數(shù)據(jù).

[注:Element-ui的表單驗(yàn)證一定是綁定的數(shù)組類型]

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)(www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

一般我們可以通過(guò)下面的代碼判斷分辨率

復(fù)制代碼 代碼如下:
<script language="JavaScript">
<!-- Begin
function redirectPage() {
var wjb51=screen.width;
var hjb51=screen.height;
alert("經(jīng)系統(tǒng)檢測(cè)，你的屏幕分辨率為 " + wjb51+"*"+ hjb51 + "by 腳本之家17jquery.com");
}
// End -->
</script>

js判斷瀏覽器分辨率

復(fù)制代碼 代碼如下:
<script>
function ScreenWidth(){
if (screen.width == 1440){
alert("1440*900");
}else if (screen.width == 800){
alert("800*600");
}else if (screen.width == 1152){
alert("1152*864");
}else {
alert("do not know!");
}
}
</script>
<input type="button" name="" value="fenbianli " οnclick=" ScreenWidth()"/>
內(nèi)容來(lái)自17jquery

說(shuō)明：這段js代碼可改造一下，改為screen.width>=1024 screen.width=800兩種情況

所以我選擇使用下面的代碼：

復(fù)制代碼 代碼如下:
if(screen.width>=1440){
alert('寬屏幕可以加載廣告了');
//一些廣告代碼
}

用JS判斷不同分辨率調(diào)用不同的CSS樣式文件

最近看一個(gè)網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，今天寫(xiě)了一個(gè)例子研究一下，
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">
window.οnlοad=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //獲取屏幕的的寬度
{
sc.setAttribute("href","css/c2.css"); //設(shè)置css引入樣式表的路徑
d.innerHTML = "你的電腦屏幕寬度大于1024，我的寬度是 1200px, 背景色現(xiàn)在是紅色。";
}
else{

sc.setAttribute("href","css/c1.css"); 17jquery.com
d.innerHTML = "你的電腦屏幕寬度小于或是等于1024，我的寬度是 960px, 背景色現(xiàn)在是藍(lán)色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>

c1.css里面的內(nèi)容

復(fù)制代碼 代碼如下:
*{ margin:0; padding:0;}

div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}


c2.css里面的內(nèi)容

*{ margin:0; padding:0;}

div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)(www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

小小的細(xì)節(jié)大大的體驗(yàn)

1、已全局安裝vue-cli和nodejs（第一次需要）

2、利用Vue-cli創(chuàng)建項(xiàng)目

• 打開(kāi)項(xiàng)目所在文件夾
• vue create ‘項(xiàng)目名’
• 選擇手動(dòng)配置

babel：js編輯器
typeScript：超集js【需要指定數(shù)據(jù)類型】
PWA：離線可用
Linter/Formatter：約束代碼規(guī)范，配合eslint
unit/e2e testing：測(cè)試

3、git遠(yuǎn)程倉(cāng)庫(kù)初始化（創(chuàng)建并添加公鑰，配一次即可）

4、本地項(xiàng)目托管

• 新建倉(cāng)庫(kù)，給倉(cāng)庫(kù)命名即可，無(wú)任何勾選
• 第二次新建倉(cāng)庫(kù)，不需要再git全局設(shè)置
• 已經(jīng)創(chuàng)建了項(xiàng)目，進(jìn)入vscode終端（管理員）（or cmd進(jìn)入項(xiàng)目路徑）
• git init
• 執(zhí)行橙色代碼（第一句表示遠(yuǎn)程倉(cāng)庫(kù)地址，第二句表示首次推送主分支到云端倉(cāng)庫(kù)，origin為云倉(cāng)庫(kù)別名）

5、項(xiàng)目文件夾

node_modules:放置項(xiàng)目依賴的地方
public:一般放置一些共用的靜態(tài)資源，包括頁(yè)簽圖標(biāo)、index.html，打包上線的時(shí)候，public文件夾里面資源原封不動(dòng)打包到dist文件夾里面；<%= BASE_URL %>是public所在路徑，使用絕對(duì)路徑

腳手架目錄public和assets區(qū)別：參考鏈接

src：程序員源代碼文件夾

• assets文件夾：經(jīng)常放置一些靜態(tài)資源（圖片），assets文件夾里面資源webpack會(huì)進(jìn)行打包為一個(gè)模塊（js文件夾里面）
• components文件夾:一般放置非路由組件（或者項(xiàng)目共用的組件）
• App.vue 唯一的根組件
• main.js 入口文件【程序最先執(zhí)行的文件】
• babel.config.js:babel配置文件【翻譯官：如ES6翻譯成ES5，兼容好】
• package.json：應(yīng)用包配置文件；看到項(xiàng)目描述、項(xiàng)目依賴、項(xiàng)目運(yùn)行指令【項(xiàng)目信息記錄：‘項(xiàng)目身份證’】
• package-lock.json: 包版本控制文件
• .gitignore: git版本管制忽略的配置
• README.md:項(xiàng)目說(shuō)明文件

補(bǔ)充：通過(guò) vue.config.js 可以修改 webpack 的默認(rèn)配置

6、初始配置

a. 瀏覽器自動(dòng)打開(kāi)html，vue-cli-service serve --open

在package.json文件中
        "scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

• 1
• 2
• 3
• 4
• 5
• 6

b.關(guān)閉eslint校驗(yàn)工具

創(chuàng)建vue.config.js文件：需要對(duì)外暴露
module.exports = {
   lintOnSave:false,
}

• 1
• 2
• 3
• 4

c. src文件夾的別名的設(shè)置 【@表示src文件夾，@在"node_modules","dist"不能用】

創(chuàng)建jsconfig.json文件
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

7、后臺(tái)項(xiàng)目的環(huán)境安裝配置；參考黑馬項(xiàng)目

• MySQL數(shù)據(jù)庫(kù)；
• Node.js環(huán)境【因?yàn)楹笈_(tái)接口依賴Node.js】 Nodejs安裝及環(huán)境配置鏈接
• 安裝API依賴包；
• postman測(cè)試后臺(tái)項(xiàng)目接口：【安裝與使用見(jiàn)連接】
  https://blog.csdn.net/m0_61843874/article/details/123324727
  https://www.bilibili.com/video/BV1hP4y177gS/?spm_id_from=333.337.search-card.all.click&vd_source=c4d71976fd97f04545873bc4552dfb71
  選擇好請(qǐng)求方式；輸入U(xiǎn)RL；body——x-www-form-urlencoded（普通形式輸入請(qǐng)求參數(shù)）

8、清除初始靜態(tài)樣式，梳理app.vue根組件

9、清除初始路由配置；清除初始的路由組件和非路由組件

新建routes.js放路由規(guī)則

10、生成項(xiàng)目報(bào)告

npm run build  -- --report

• 1

11、項(xiàng)目?jī)?yōu)化

1. Vue項(xiàng)目在執(zhí)行build命令期間中移除所有console.log 鏈接
2. 通過(guò) vue.config.js 可以修改 webpack 的默認(rèn)配置
   
3. 為開(kāi)發(fā)模式與發(fā)布模式指定不同的打包入口
   
   3.1 打包入口的修改，可以通過(guò) configureWebpack和 chainWebpack節(jié)點(diǎn)來(lái)實(shí)現(xiàn)：
   
   3.2 通過(guò) chainWebpack 自定義打包入口
   新建./src/main-prod.js和./src/main-dev.js文件；在vue.config.js進(jìn)行如下配置

chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

4. 通過(guò)externals 加載外部 CDN 資源，對(duì)于externals中的第三方依賴包，在用到依賴包的時(shí)候，會(huì)找window全局對(duì)象上查找并直接使用現(xiàn)成的對(duì)象，能夠讓打包的項(xiàng)目體積更小；只有production模式才有必要配置externals節(jié)點(diǎn)

第一步：vue.config.js——>配置externals節(jié)點(diǎn)

//配置后的vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  // 通過(guò) chainWebpack 為開(kāi)發(fā)模式與發(fā)布模式指定不同的打包入口
  chainWebpack: config => {
    // 發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

   <span class="token comment">// 通過(guò)externals 加載外部 CDN 資源</span>
  config<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'externals'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">vpe</span> <span class="token operator">:</span> <span class="token string">' Vue '</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-router'</span><span class="token operator">:</span> <span class="token string">'VueRouter'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token string">'axios'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lodash</span><span class="token operator">:</span> <span class="token string">'_'</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">echarts</span><span class="token operator">:</span> <span class="token string">'echarts'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">nprogress</span><span class="token operator">:</span><span class="token string">'NProgress'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-quill-editor'</span><span class="token operator">:</span> <span class="token string">'VueQuillEditor'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span><span class="token parameter">config</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'./src/main-dev.js'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

}
})


• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

第二步：導(dǎo)入的樣式表也會(huì)被導(dǎo)入到輸出文件中，導(dǎo)致體積大；臨時(shí)注釋掉main.prod.js中的import的VueQuillEditor樣式表；進(jìn)行如下配置；【注意版本號(hào)】

進(jìn)一步添加js文件的CDN引用：

<!-- 富文本編輯器樣式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css"/>

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue/2.6.14/vue.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/axios/1.3.4/axios.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/quill/1.3.7/quill.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

5. .通過(guò) CDN 優(yōu)化 ElementUl 的打包

第一步：

<!-- element-ui的樣表文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css" />
    <!-- element-ui的 js 又件-->
    <script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>

• 1
• 2
• 3
• 4

第二步：臨時(shí)注釋掉
// 引入自定義插件 （封裝element按需引入模塊）
// import element from ‘./plugins/element’

6. 首頁(yè)內(nèi)容定制（根據(jù)production模式和development模式定制）
   不同的打包環(huán)境下，首頁(yè)內(nèi)容可能會(huì)有所不同，我們可以通過(guò)插件的方式進(jìn)行定制；
   isProd的值為T(mén)rue表示production模式，為FALSE表示development模式；

第一步：對(duì)vue.config.js中chainWebpack的屬性進(jìn)行調(diào)整：

// 通過(guò) chainWebpack 為開(kāi)發(fā)模式與發(fā)布模式指定不同的打包入口
  chainWebpack: config => {
    // 1、發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

   <span class="token comment">// 通過(guò)externals 加載外部 CDN 資源</span>
  config<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'externals'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">vue</span> <span class="token operator">:</span> <span class="token string">' Vue '</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-router'</span><span class="token operator">:</span> <span class="token string">'VueRouter'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token string">'axios'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lodash</span><span class="token operator">:</span> <span class="token string">'_'</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">echarts</span><span class="token operator">:</span> <span class="token string">'echarts'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-quill-editor'</span><span class="token operator">:</span> <span class="token string">'VueQuillEditor'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token comment">// 不同的打包環(huán)境下，首頁(yè)內(nèi)容可能會(huì)有所不同</span>
  <span class="token comment">// 我們可以通過(guò)插件的方式進(jìn)行定制，根據(jù)isProd的值，來(lái)決定如何染頁(yè)面結(jié)構(gòu)，發(fā)布模式插件配置如下:</span>
  config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">true</span>
    <span class="token keyword">return</span> args
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 2、開(kāi)發(fā)模式</span>
config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span><span class="token parameter">config</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'./src/main-dev.js'</span><span class="token punctuation">)</span>

  <span class="token comment">// 不同的打包環(huán)境下，首頁(yè)內(nèi)容可能會(huì)有所不同</span>
  <span class="token comment">// 我們可以通過(guò)插件的方式進(jìn)行定制，根據(jù)isProd的值，來(lái)決定如何染頁(yè)面結(jié)構(gòu)，開(kāi)發(fā)模式插件配置如下:</span>
  config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token keyword">return</span> args
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

}


• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

第二步：在public/index.html首頁(yè)中，可以根據(jù)isProd的值，來(lái)決定如何染頁(yè)面結(jié)構(gòu)

<title><%=htmlWebpackPlugin.options.isProd?'':'dev-' %>電商后臺(tái)管理系統(tǒng)</title>

<!-- 在production模式下isProd = true，會(huì)獲取CDN里的依賴資源，development模式下isProd = false，用本地下載的依賴 -->
<% if(htmlWebpackPlugin.options.isProd){ %>
前面CDN引入的依賴資源（富文本編輯器+elemen-ui）
<% } %>

前面CDN引入的依賴資源（富文本編輯器+elemen-ui），代碼如下：
<!-- 富文本編輯器樣式表文件 -->
<link rel="stylesheet" href="/>
<link rel="stylesheet" href=" />
<link rel="stylesheet" href="/>

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue/2.6.14/vue.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/axios/1.3.4/axios.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/quill/1.3.7/quill.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> 

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> element<span class="token operator">-</span>ui的樣表文件<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> element<span class="token operator">-</span>ui的 js 又件<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/element-ui/2.15.13/index.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)(www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)