1

快速开始.md

@@ -1,12 +1,11 @@
 # AdminFramework 快速开始
 
-## 🚀 5 分钟上手
+## 🚀 3 分钟上手
 
 ### 第一步：引入框架
 
 ```javascript
 import AdminFramework from './admin-framework.js'
-import componentMap from './router/component-map.js'
 ```
 
 ### 第二步：创建应用
@@ -15,7 +14,10 @@ import componentMap from './router/component-map.js'
 const app = AdminFramework.createApp({
   title: '我的管理系统',
   apiUrl: 'http://localhost:9098/admin_api/',
-  componentMap: componentMap
+  componentMap: {
+    'business/product': ProductComponent,
+    'business/order': OrderComponent
+  }
 })
 ```
 
@@ -27,17 +29,21 @@ app.$mount('#app')
 
 ## ✨ 就这么简单！
 
-**完整代码只需 18 行：**
+**完整代码只需 12 行：**
 
 ```javascript
 // main.js
 import AdminFramework from './admin-framework.js'
-import componentMap from './router/component-map.js'
+import ProductComponent from './views/business/product.vue'
+import OrderComponent from './views/business/order.vue'
 
 const app = AdminFramework.createApp({
   title: '我的管理系统',
   apiUrl: 'http://localhost:9098/admin_api/',
-  componentMap: componentMap
+  componentMap: {
+    'business/product': ProductComponent,
+    'business/order': OrderComponent
+  }
 })
 
 app.$mount('#app')
@@ -50,23 +56,25 @@ app.$mount('#app')
 **重要提示：** 只需传递不带 `.vue` 后缀的路径，框架会自动处理带后缀和不带后缀的两种情况！
 
 ```javascript
-// router/component-map.js
-import ProductList from '../views/business/product-list.vue'
-import OrderList from '../views/business/order-list.vue'
+// 直接在 createApp 中配置
+const app = AdminFramework.createApp({
+  title: '我的管理系统',
+  apiUrl: 'http://localhost:9098/admin_api/',
+  componentMap: {
+    // ✅ 正确：只传递不带 .vue 的路径
+    'business/product': ProductComponent,
+    'business/order': OrderComponent,
+    'system/user': UserComponent,
 
-export default {
-  // ✅ 正确：只传递不带 .vue 的路径
-  'business/product': ProductList,
-  'business/order': OrderList,
-
-  // ❌ 错误：不要同时传递带和不带 .vue 的路径（多余）
-  // 'business/product.vue': ProductList,  // 框架会自动添加
-}
+    // ❌ 错误：不要同时传递带和不带 .vue 的路径（多余）
+    // 'business/product.vue': ProductComponent,  // 框架会自动添加
+  }
+})
 ```
 
 **说明：** 框架内部会自动为每个组件创建两个映射：
-- `'business/product'` → ProductList
-- `'business/product.vue'` → ProductList（自动添加）
+- `'business/product'` → ProductComponent
+- `'business/product.vue'` → ProductComponent（自动添加）
 
 所以后台菜单配置 `business/product` 或 `business/product.vue` 都可以正常工作！