Vue3+webpack搭建的后台模板

近几年，Vue也越来越火，vue3也是发布了很久了，最近自己想慢慢的转移到Vue3来，然后自己就搭建了一下后台模板基础框架;具体可以看看下列图片

1. api: 请求封装的文件夹
2. components: 封装的全局组件
3. icons: 图表管理的文件夹
4. map: 映射文件夹
5. router: 路由封装
6. store: 全局状态封装
7. style: scss样式
8. utils：工具库
9. permission.js: 路由权限管理
10. setting.js: 系统配置

在搭建的框架中,我来说说实现的基础框架以及一些封装的组件:

路由：

在vue-router4以上版本，很显然是不支持了一次性全部注册路由了，那么有解决方法吗？
答案是有的。我们可以通过一个循环，然后一次一次注册。代码如下:
utils/register.js

import router from '@/router/index'
// 拿到views中的所有Vue文件
const files = require.context('@/views', true, /.vue$/)
console.log(files)
const modules = {}

files.keys().forEach((key) => {
  modules[key.replace(/(./|.vue)/g, '')] = files(key).default
})
console.log(modules)
/**
 * @description 在Vue-router4路由中已经没有addRoutes注册，只能一条条注册
 */
export const registerRoutes = () => {
  const routerMap = localStorage.getItem('menu') ? localStorage.getItem('menu') : []
  return new Promise((resolve, reject) => {
    // 添加404页面
    router.addRoute({
      path: '/:catchAll(.*)',
      component: modules['404']
    })
    addRoutes(JSON.parse(routerMap), 'layout')
    resolve(true)
  })
}

/**
 * @description addRoutes封装, 接受路由，和父路由名称
 */
const addRoutes = (routes, parentName) => {
  routes.forEach((item) => {
    let route = {}
    if (item.path) {
      route = {
        path: item.path,
        redirect: item.redirect,
        name: item.name,
        component: modules[item.component],
        meta: { title: item.name, icon: item.icon }
      }
      parentName ? router.addRoute(parentName, route) : router.addRoute(route)
    }
    if (item.children && item.children.length) {
      addRoutes(item.children, item.name)
    }
    console.log(route)
  })
}

这样的话其实也就解决了不能一次性的注册路由

还有一些封装好的组件，比如excel导出，form封装，表格封装，文件上传封装等

最后的最后，附上gitee地址:
gitee.com/ma_xiao_qin…