使用vue-element-admin的一些总结

最近开发的项目后台基于 vue-element-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 开发,在逐步完善的过程中遇到了一些问题,特此总结,希望能对你有所帮助。

先上链接,真的很好用,安利一下,链接如下:

基本上常用的不常用的功能都有,就不多说了,有兴趣链接直达,正式开始正文。

修改菜单图标为 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 协议》,转载必须注明作者和本文链接