1

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

@@ -0,0 +1,143 @@
+# 快速配置组件映射
+
+## 🎯 一句话说明
+
+**在 `Vue.use()` 时传入 `componentMap` 参数，将后端权限菜单中的组件路径映射到实际组件。**
+
+## 📝 三步配置
+
+### 步骤1：查看权限菜单接口
+
+查看后端接口返回的所有 `component` 字段：
+
+```json
+{
+  "data": [
+    { "component": "ball/games.vue" },
+    { "component": "order/pay_orders.vue" },
+    { "component": "ball/wch_users.vue" }
+  ]
+}
+```
+
+### 步骤2：创建并导入组件
+
+```javascript
+// 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：配置映射
+
+```javascript
+Vue.use(AdminFramework, {
+  config,
+  ViewUI,
+  VueRouter,
+  Vuex,
+  createPersistedState,
+  componentMap: {
+    'ball/games': GamesComponent,
+    'order/pay_orders': PayOrdersComponent,
+    'ball/wch_users': WchUsersComponent
+  }
+})
+```
+
+## ✅ 完成！
+
+现在权限菜单中的所有业务页面都能正常显示了。
+
+## 📋 配置模板
+
+```javascript
+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 后缀
+
+```javascript
+// ✅ 正确
+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](./权限菜单组件配置指南.md)
+
+---
+
+**配置完成后，所有权限菜单中的页面都能正常显示！** 🎉
+