Summary of using Vue element admin

Time:2021-1-17

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:

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:

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

Before the collection, you may as well order a like to try!!!

Recommended Today

Practice of query operation of database table (Experiment 3)

Following the previous two experiments, this experiment is to master the use of select statements for various query operations: single table query, multi table connection and query, nested query, set query, to consolidate the database query operation.Now follow Xiaobian to practice together!Based on the data table (student, course, SC, teacher, TC) created and inserted in […]