# 快速配置组件映射

## 🎯 一句话说明

**在 `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)

---

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