# 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) - 框架完整文档