vue-element-admin關(guān)閉eslint校驗(yàn)

坑人方法

1、在vue.config.js文件中吧lintOnSave改成false；

2、在package.json文件中把husky和lint-staged配置刪除；

**最終方法：**在根目錄找到.eslintignore文件

把內(nèi)容改成’*’，這樣一來就能自動(dòng)忽略對(duì)所有文件的校驗(yàn)了?。?！

vue-element-admin梳理

一、Layout組件分析

 Layout文件下的index.vue是vue-element-admin架構(gòu)的主要界面，界面的左側(cè)是菜單欄（sidebar）；界面的右側(cè)欄頂部是Navbar，下面就是主要展示內(nèi)容由<app-main/>包裹的<router-view/>

二、sidebar組件分析

 sidebar文件下的index.vue就是側(cè)邊欄的架構(gòu)，主要是有<el-menu><el-menu/>組成；el-menu里面是通過SidebarItem來完成路由菜單。

三、Sidebar-item的組成

在Sidebar有4項(xiàng)比較重要的組成部分分別以下：

1.

v-if="hasOneShowingChild(item.children,item)&& (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"

來判斷是該路由是否是只有一層級(jí)菜單

2. 如果該路由是復(fù)合菜單，則執(zhí)行<el-submenu><el-submenu/>，在el-submenu里面將會(huì)再次執(zhí)行sidebar-item組件，遍歷直到路由只有一層菜單

3.app-link

<app-lin><app-link/>是通過動(dòng)態(tài)組件component  :is=‘type’ 來動(dòng)態(tài)顯示相應(yīng)內(nèi)容

其中isExternal 來判讀type類型，決定是顯示 a 鏈接 或是 router-link

4. SidebarItem 中 <Item/>組件 是用來顯示對(duì)應(yīng)的Icon圖標(biāo)和Title，

通過 ：Icon = item.meta.icon ;  ：title = item.meta.title;

在Item組件中可以看到 icon圖標(biāo)和Title 都是接受props傳來的變量，展示對(duì)應(yīng)的模塊

并且 這里使用到了render（）函數(shù)，創(chuàng)建 i 標(biāo)簽和 svg標(biāo)簽。所以在側(cè)邊欄中，是可以使用Icon圖標(biāo)和svg圖標(biāo)，然后就是創(chuàng)建了span標(biāo)簽展示對(duì)應(yīng)的title

四、Sidebar-item 細(xì)節(jié)分析

上圖可以看出，當(dāng)前路由Item的hidden屬性為true時(shí)，整個(gè)菜單欄是隱藏不展示的，當(dāng)

hasOneShowingChild( )返回true時(shí)執(zhí)行el-menu-item，返回為false時(shí)則執(zhí)行el-submenu

然后再判斷hasOneShowingChild( )的返回值，一直遍歷下去。

接下來具體來分析 hasOneShowingChild（）這個(gè)函數(shù)

1.先定義數(shù)組 showingChildren 通過遍歷item.children滿足每一項(xiàng)hidden屬性為true的項(xiàng) 不加入showingChildren中。

2. 完成遍歷后判斷showingChildren數(shù)組的長(zhǎng)度，若長(zhǎng)度為1則 hasOneShowingChild（）函數(shù)返回true, 執(zhí)行el-menu-item; 若長(zhǎng)度為0則返回true并且this.onlyOneChild 就等于父親parent（當(dāng)前的Item）就展示父親菜單項(xiàng); 當(dāng)長(zhǎng)度為其他時(shí)，都返回false，將執(zhí)行el-submenu 一直遍歷下去，直到當(dāng)前項(xiàng)只有一個(gè)或沒有children。

3. this.onlyOneChild = item 只有hasOneShowingChild()函數(shù)成立，等式才有意義。

4.在<app-lin><app-link/>組件中isExternal（）是校驗(yàn)函數(shù)，當(dāng)校驗(yàn)地址path為‘http//...’返回true，則動(dòng)態(tài)切換組件為a鏈接；否則返回的是<router-link>，并執(zhí)行 :to傳過來的path；

5. 下面來講講<item></item>標(biāo)簽中圖標(biāo)的展示

這里前面提到過，可以給item標(biāo)簽內(nèi)傳遞：icon屬性，這樣可以修改icon圖標(biāo)了，并且item標(biāo)簽中不僅可以接受icon圖標(biāo)也接收svg圖標(biāo)。當(dāng)我們傳遞圖標(biāo)如需要使圖標(biāo)顏色隨點(diǎn)擊激活文字顏色一致，我們可以使用currentColor這個(gè)屬性。

如圖sub-el-icon { color : currentColor } 表示圖標(biāo)色顏色是繼承父級(jí)或相關(guān)聯(lián)顏色，這個(gè)屬性極其好用。但是原框架的中svg圖標(biāo)好像沒有對(duì)應(yīng)的css代碼，我們可以在svg的fill 添加currentColor屬性。一般在UI給我們切圖的時(shí)候，可以跟UI說svg的fill屬性值設(shè)為currentColor，這樣和icon圖標(biāo)的sub-el-icon是同樣的效果。

五、sidebar文件下的index.vue

這里使用activeMenu變量設(shè)置默認(rèn)激活地址，通過this.$route獲取當(dāng)前地址。判斷meta中是否有activeMenu屬性，有則將meta.activeMenu設(shè)為默認(rèn)激活地址，否則直接將獲取的path設(shè)為默認(rèn)地址，這樣刷新頁面時(shí)可緩存當(dāng)前頁面不會(huì)變更。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論