使用vue-element-admin的一些總結

最近開發的專案後臺基於vue-element-admin開發，在逐步完善的過程中遇到了一些問題，特此總結，希望能對你有所幫助。

先上鍊接，真的很好用，安利一下，連結如下：

• A magical vue admin

基本上常用的不常用的功能都有，就不多說了，有興趣連結直達，正式開始正文。

修改選單圖示為elementUI圖示

官方的svg圖示確實比較少，新增我也覺得繁瑣，另外，既然整合了elementUI，直接用elementUI圖示就好了。

改：

修改選單icon為elementUI圖示：
// 檔案地址：src\layout\components\Sidebar\Item.vue
// if (icon) {
//   vnodes.push(<svg-icon icon-class={icon}/>)
// }

if (icon) {
  vnodes.push(<i class={icon}></i>)
}

關閉eslint

官網已有答案

// vue.config.js
lintOnSave: false

but，如果你使用的是git管理程式碼，會發現commit的時候依舊會觸發eslint。

// package.json 
"lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix", // 刪除這一行
      "git add"
    ]
  },

增加本地環境變數

// package.json 
"scripts": {
    "local": "vue-cli-service serve --mode local",
    ...
  },

複製.env.production為.env.local，自定義配置後，執行：

yarn run local

快取頁面

想快取的頁面：

<script>
export default {
  name: "cacheIndex",

加入cachedViews

// src\store\modules\tagsView.js
const state = {
  visitedViews: [],
  cachedViews: [
    'cacheIndex'
  ]
}

最近開發的專案後臺基於vue-element-admin開發，在逐步完善的過程中遇到了一些問題，特此總結，希望能對你有所幫助。

先上鍊接，真的很好用，安利一下，連結如下：

• A magical vue admin

基本上常用的不常用的功能都有，就不多說了，有興趣連結直達，正式開始正文。

修改選單圖示為elementUI圖示

官方的svg圖示確實比較少，新增我也覺得繁瑣，另外，既然整合了elementUI，直接用elementUI圖示就好了。

改：

修改選單icon為elementUI圖示：
// 檔案地址：src\layout\components\Sidebar\Item.vue
// if (icon) {
//   vnodes.push(<svg-icon icon-class={icon}/>)
// }

if (icon) {
  vnodes.push(<i class={icon}></i>)
}

關閉eslint

官網已有答案

// vue.config.js
lintOnSave: false

but，如果你使用的是git管理程式碼，會發現commit的時候依舊會觸發eslint。

// package.json 
"lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix", // 刪除這一行
      "git add"
    ]
  },

增加本地環境變數

// package.json 
"scripts": {
    "local": "vue-cli-service serve --mode local",
    ...
  },

複製.env.production為.env.local，自定義配置後，執行：

yarn run local

快取頁面

想快取的頁面：

<script>
export default {
  name: "cacheIndex",

加入cachedViews

// src\store\modules\tagsView.js
const state = {
  visitedViews: [],
  cachedViews: [
    'cacheIndex'
  ]
}

本作品採用《CC 協議》，轉載必須註明作者和本文連結