Summary of using Vue element admin

Recently developed project background based on Vue element admin development, in the process of gradual improvement encountered some problems, hereby summarize, hope to help you.

First link, really easy to use, Amway, link as follows:

• A magical vue admin

Basically, there are commonly used and not commonly used functions, so I won’t say more. If you are interested in direct links, you can officially start the text.

Change the menu icon to element UI icon

The number of official SVG icons is really small, and I also find it cumbersome to add them. In addition, since elementui is integrated, it’s better to use elementui icon directly.

Change:

Modify the menu icon to elementui Icon:
//File address: Src / layout / components / sidebar\ Item.vue
// if (icon) {
//   vnodes.push(<svg-icon icon-class={icon}/>)
// }

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

Close eslint

The answer is available on the official website

// vue.config.js
lintOnSave: false

However, if you are using git management code, you will find that commit will still trigger eslint.

// package.json 
"lint-staged": {
    "src/**/*.{js,vue}": [
      "Eslint -- fix" // delete this line
      "git add"
    ]
  },

Add local environment variable

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

Copy env.production For env.local , after customizing the configuration, run:

yarn run local

Cache page

Page to cache:

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

Join cachedviews

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

Recently developed project background based on Vue element admin development, in the process of gradual improvement encountered some problems, hereby summarize, hope to help you.

First link, really easy to use, Amway, link as follows:

• A magical vue admin

Basically, there are commonly used and not commonly used functions, so I won’t say more. If you are interested in direct links, you can officially start the text.

Change the menu icon to element UI icon

The number of official SVG icons is really small, and I also find it cumbersome to add them. In addition, since elementui is integrated, it’s better to use elementui icon directly.

Change:

Modify the menu icon to elementui Icon:
//File address: Src / layout / components / sidebar\ Item.vue
// if (icon) {
//   vnodes.push(<svg-icon icon-class={icon}/>)
// }

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

Close eslint

The answer is available on the official website

// vue.config.js
lintOnSave: false

However, if you are using git management code, you will find that commit will still trigger eslint.

// package.json 
"lint-staged": {
    "src/**/*.{js,vue}": [
      "Eslint -- fix" // delete this line
      "git add"
    ]
  },

Add local environment variable

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

Copy env.production For env.local , after customizing the configuration, run:

yarn run local

Cache page

Page to cache:

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

Join cachedviews

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

This work adoptsCC agreementReprint must indicate the author and the link of this article