admin_core/demo-project/PROJECT_STRUCTURE.md

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

// 项目启动入口
// 1. 引入框架
// 2. 配置 Vue 实例
// 3. 挂载应用

主要功能：

• ✅ 引入并初始化 AdminFramework
• ✅ 配置 Router 和 Store
• ✅ 添加自定义业务路由
• ✅ 设置响应式适配

2. 配置文件 src/config/index.js

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 - 项目概述
• INSTALL.md - 安装指南
• ../完整使用文档.md - 框架完整文档