vue3.0结合element-plus实现后台管理系统

• 基于vue3.0+element-plus+scss+axios实现一套开箱即用的后台管理系统
• 系统实现常见的路由菜单权限，按钮权限，接口封装，全局组件封装方法以及环境配置

项目地址

https://github.com/MrZHLF/vue3.0-template-admin

全局组件使用

• 项目中经常会封装一些全局组件共页面使用，比如常见的分页组件，

// 分页组件
import Pagination from  '@/components/pagination/index.vue'

• vue3全局挂载采用

export default app => {
  // 分页组件挂载全局
  app.component('Pagination',Pagination)
}

全局方法使用

• 在页面中封装一些方法，共全局使用方式:

export function getMessage(type, desc) {
  ElMessage({
    type: type,
    message: desc,
  })
}

• vue3.0采用app.config.globalProperties方式

import { getMessage,getNotification } from '@/utils/index'
export default app => {
  // 全局实例
  app.config.globalProperties.$msg = {
    getMessage,
    getNotification
  }
}

• 在页面中使用,因为vue3没有this这一说法,通过getCurrentInstance获取实例

const { proxy } = getCurrentInstance()
proxy.$msg.getMessage('success', '删除成功')

页面路由权限

• 路由菜单权限，几乎每个后台管理系统都是有这个功能，根据当前用户登录获取对应的权限，然后进行匹备路由权限码，在页面展示对应的菜单.
• 当前项目根据用户登录获取权限码，存储到缓存中和vuex中

permissions: [
            'embroadcast:first:page',
            'embroadcast:infoinsert:page',
            'userManage:page',
            'common:page',
            'media:object:list',
            'audit:deal:list',
            'sys:employee:list',
            'sys:app:list',
            'sys:tenant:list',
            'pact:type:remove'
          ]

• 路由定义方式

export default [
  {
    path: "/common",
    component: Layout,
    redirect: "/common/dialog",
    meta: {
      title: "常用组件展示",
      icon: "personnel",
      roles: ["common:page"]
    },
    children: [
      {
        path: "/common/dialog",
        name: "dialog",
        component: () => import("@/views/common/dialog"),
        meta: {
          title: "弹框组件",
          icon: "personnel-manage",
          roles: ["common:page"]
        }
      },
      {
        path: "/common/form",
        name: "form",
        component: () => import("@/views/common/form"),
        meta: {
          title: "表单组件",
          icon: "personnel-manage",
          roles: ["common:page"]
        }
      }
    ]
  }
]

• 通过后台返回的权限码和定义好的在路由定义好的权限码进行匹备， 代码处理文件在

store/modules/permission.js

页面展示

• 页面内容不多，常见业务逻辑实现即可
  

添加作者，进入微信交流群，一起学习进步