1

2025-10-08 18:53:38 +08:00
parent 43eb9715fa
commit 845658f193
39 changed files with 4820 additions and 93 deletions
--- a/demo-project/PROJECT_STRUCTURE.md
+++ b/demo-project/PROJECT_STRUCTURE.md
@@ -0,0 +1,160 @@
+# Demo Project 项目结构说明
+
+## 📁 完整目录树
+
+```
+demo-project/
+│
+├── 📄 package.json              # 项目依赖配置
+├── 📄 webpack.config.js         # Webpack 构建配置
+├── 📄 babel.config.js           # Babel 编译配置
+├── 📄 .gitignore                # Git 忽略文件
+│
+├── 📄 README.md                 # 项目说明文档
+├── 📄 INSTALL.md                # 安装指南
+├── 📄 PROJECT_STRUCTURE.md      # 本文件 - 项目结构说明
+│
+├── 🚀 start.bat                 # Windows 快速启动脚本
+├── 🚀 start.sh                  # Linux/Mac 快速启动脚本
+│
+├── 📂 public/                   # 静态资源
+│   └── index.html              # HTML 模板
+│
+└── 📂 src/                      # 源代码目录
+    │
+    ├── 📄 main.js               # 入口文件 ⭐
+    ├── 📄 App.vue               # 根组件
+    │
+    ├── 📂 config/               # 配置文件
+    │   └── index.js            # 项目配置（API 地址、系统标题等）
+    │
+    ├── 📂 libs/                 # 第三方库
+    │   └── admin-framework.js  # Admin Framework 框架文件
+    │
+    └── 📂 views/                # 页面组件
+        └── business/            # 业务页面
+            └── product_list.vue # 产品列表示例页面
+```
+
+## 📝 核心文件说明
+
+### 1. 入口文件 `src/main.js`
+```javascript
+// 项目启动入口
+// 1. 引入框架
+// 2. 配置 Vue 实例
+// 3. 挂载应用
+```
+
+**主要功能**：
+- ✅ 引入并初始化 AdminFramework
+- ✅ 配置 Router 和 Store
+- ✅ 添加自定义业务路由
+- ✅ 设置响应式适配
+
+### 2. 配置文件 `src/config/index.js`
+```javascript
+export default {
+  title: 'Demo 管理系统',
+  apiUrl: 'http://localhost:3000/api/',
+  uploadUrl: 'http://localhost:3000/api/upload',
+  tokenKey: 'demo_token'
+}
+```
+
+**说明**：
+- 系统标题、API 地址等配置
+- 可根据环境切换配置
+
+### 3. 框架文件 `src/libs/admin-framework.js`
+- 从 `admin-framework/dist/` 复制的打包文件
+- 包含所有框架功能（页面、组件、工具等）
+- 大小：约 1.64 MB
+
+### 4. 业务页面 `src/views/business/product_list.vue`
+- 完整的 CRUD 示例
+- 展示如何使用框架的组件和工具
+- 包含 Table、Modal、Message 等组件使用
+
+## 🔧 配置文件说明
+
+### webpack.config.js
+- 入口：`src/main.js`
+- 输出：`dist/bundle.[hash].js`
+- 开发服务器：`localhost:8080`
+- 支持 Vue、Less、图片等文件处理
+
+### package.json
+**主要依赖**：
+- `vue` - Vue 框架
+- `vue-router` - 路由管理
+- `vuex` - 状态管理
+- `view-design` - UI 组件库
+- `axios` - HTTP 客户端
+
+**开发依赖**：
+- `webpack` - 打包工具
+- `babel` - JS 编译
+- `vue-loader` - Vue 文件加载器
+
+## 📂 扩展目录说明
+
+随着项目发展，可以添加以下目录：
+
+```
+src/
+├── api/                    # API 接口封装
+│   └── business/
+│       └── product.js
+│
+├── assets/                 # 业务资源文件
+│   ├── images/            # 图片
+│   └── styles/            # 样式
+│
+├── components/             # 业务组件
+│   └── CustomTable.vue
+│
+├── router/                 # 路由配置
+│   └── index.js
+│
+└── store/                  # 业务状态管理
+    └── modules/
+        └── product.js
+```
+
+## 🚀 启动流程
+
+1. **执行** `start.bat` 或 `npm run dev`
+2. **Webpack** 读取 `webpack.config.js`
+3. **入口** 加载 `src/main.js`
+4. **初始化** AdminFramework
+5. **创建** Vue 实例
+6. **挂载** 到 `#app`
+7. **启动** 开发服务器
+8. **打开** 浏览器 `http://localhost:8080`
+
+## 📊 文件大小参考
+
+| 文件 | 大小 | 说明 |
+|------|------|------|
+| admin-framework.js | ~1.64 MB | 框架打包文件 |
+| main.js | ~2 KB | 入口文件 |
+| App.vue | ~0.5 KB | 根组件 |
+| product_list.vue | ~4 KB | 业务示例 |
+| bundle.js（开发） | ~3 MB | 包含所有依赖 |
+| bundle.js（生产） | ~500 KB | 压缩后 |
+
+## 🎯 下一步
+
+1. **修改配置**：编辑 `src/config/index.js`
+2. **添加页面**：在 `src/views/business/` 创建新页面
+3. **注册路由**：在 `src/main.js` 添加路由配置
+4. **开始开发**：基于框架快速开发业务功能
+
+---
+
+**查看更多**：
+- [README.md](./README.md) - 项目概述
+- [INSTALL.md](./INSTALL.md) - 安装指南
+- [../完整使用文档.md](../完整使用文档.md) - 框架完整文档
+