admin_core/demo-project/_doc/快速配置组件映射.md

快速配置组件映射

🎯 一句话说明

在 Vue.use() 时传入 componentMap 参数，将后端权限菜单中的组件路径映射到实际组件。

📝 三步配置

步骤1：查看权限菜单接口

查看后端接口返回的所有 component 字段：

{
  "data": [
    { "component": "ball/games.vue" },
    { "component": "order/pay_orders.vue" },
    { "component": "ball/wch_users.vue" }
  ]
}

步骤2：创建并导入组件

// src/main.js
import GamesComponent from './views/ball/games.vue'
import PayOrdersComponent from './views/order/pay_orders.vue'
import WchUsersComponent from './views/ball/wch_users.vue'

步骤3：配置映射

Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  componentMap: {
    'ball/games': GamesComponent,
    'order/pay_orders': PayOrdersComponent,
    'ball/wch_users': WchUsersComponent
  }
})

✅ 完成！

现在权限菜单中的所有业务页面都能正常显示了。

📋 配置模板

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ViewUI from 'view-design'
import createPersistedState from 'vuex-persistedstate'
import 'view-design/dist/styles/iview.css'

import AdminFramework from '../../src/index.js'
import config from './config'
import App from './App.vue'

// ==================== 导入业务组件 ====================
// TODO: 根据权限菜单接口，导入所有业务组件
// import XXXComponent from './views/xxx/xxx.vue'

Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  componentMap: {
    // TODO: 配置组件映射
    // 'xxx/xxx': XXXComponent
  }
})

new Vue({
  el: '#app',
  router: AdminFramework.router,
  store: AdminFramework.store,
  render: h => h(App),
  mounted() {
    AdminFramework.uiTool.setRem()
    this.$store.dispatch('user/setAuthorityMenus', {
      Main: AdminFramework.Main,
      ParentView: AdminFramework.ParentView,
      Page404: AdminFramework.Page404
    })
  }
})

💡 关键要点

1. 路径不需要 .vue 后缀

// ✅ 正确
componentMap: {
  'ball/games': GamesComponent
}

// ❌ 错误（虽然也能用，但不推荐）
componentMap: {
  'ball/games.vue': GamesComponent
}

2. 系统组件无需配置

这些已自动映射，不需要在 componentMap 中配置：

• home/index.vue
• system/sys_user.vue
• system/sys_role.vue
• system/sys_log.vue
• system/sys_param_setup.vue
• system_high/sys_menu.vue
• system_high/sys_control.vue
• system_high/sys_title.vue

3. 未映射的组件会显示提示

如果组件没有配置映射，页面会显示：

⚠️ 警告
页面组件未加载: ball/games.vue
请在项目中创建此组件或在组件映射表中注册

📚 完整文档

查看详细说明：权限菜单组件配置指南.md

---

配置完成后，所有权限菜单中的页面都能正常显示！ 🎉