• 基于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

页面展示

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

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