Vue3 插件化架构深度话题

// src/plugins/dengbao/index.js —— 等保插件入口
export default {
  name: 'dengbao',         // 插件唯一标识

  // 插件提供的路由(每个插件有自己的 routes)
  routes: [
    {
      path: '/dengbao',
      component: () => import('./layouts/DengbaoLayout.vue'),
      children: [
        { path: 'task', component: () => import('./views/TaskList.vue') },
        { path: 'report', component: () => import('./views/Report.vue') },
      ]
    }
  ],

  // 菜单
  menus: [
    { title: '等保测评', icon: 'shield', path: '/dengbao/task' }
  ],

  // 权限点
  permissions: ['dengbao:view', 'dengbao:edit'],

  // install:Vue 插件标准钩子
  install(app, options) {
    // 可以注册全局组件、指令、provide 等
    app.component('DengbaoCard', DengbaoCard)
    app.provide('dengbaoConfig', options)
  }
}

// src/plugins/index.js —— 主框架聚合所有插件
import { createApp } from 'vue'
import dengbao from './dengbao'
import mipin from './mipin'
import fengping from './fengping'
import dataSecurity from './data-security'

// 插件清单(要启用哪些,在这里配置)
const plugins = [dengbao, mipin, fengping, dataSecurity]

// 聚合所有插件的路由
export function collectPluginRoutes() {
  const routes = []
  plugins.forEach(p => {
    if (p.routes) routes.push(...p.routes)
  })
  return routes
}

// 聚合菜单
export function collectPluginMenus() {
  return plugins.flatMap(p => p.menus || [])
}

// 安装所有插件
const app = createApp(App)
plugins.forEach(p => app.use(p))

// 菜单 store:聚合插件菜单 + 按权限过滤
export const useMenuStore = defineStore('menu', () => {
  const menus = ref([])

  async function generateMenus(userPermissions) {
    const allMenus = collectPluginMenus()

    // 按用户权限过滤:菜单没权限点 = 公共可见;有权限点 = 用户得有这个权限
    menus.value = allMenus.filter(m => {
      if (!m.permission) return true
      return userPermissions.includes(m.permission)
    })
  }

  return { menus, generateMenus }
})

src/
├── core/              # 第1层:核心框架(壳、登录、布局、API封装)
│   ├── layouts/
│   ├── api/           # axios 封装、请求拦截
│   └── utils/
├── shared/            # 第2层:跨插件共享(报告生成、指标、文档比对)
│   ├── components/    # 业务公共组件
│   ├── composables/   # 公共逻辑
│   └── api/
└── plugins/           # 第3层:业务插件(互相独立)
    ├── dengbao/       # 等保:只依赖 core + shared
    ├── mipin/         # 密评:只依赖 core + shared
    ├── fengping/      # 风评
    └── data-security/ # 数据安全

# 规则:plugins 之间禁止互相 import,只能用 core 和 shared
# 用 ESLint 规则强制(no-restricted-imports)

src/plugins/dengbao/
├── index.js          # 插件入口(导出 install/routes/menus)
├── api/              # 本插件的后端接口
├── views/            # 页面
├── components/       # 本插件私有组件
├── composables/      # 本插件私有逻辑
├── store/            # 本插件私有状态
└── routes.js         # 本插件路由配置

# 命名约定:文件名 kebab-case,组件名 PascalCase
# API 文件按模块拆:user.js / task.js / report.js