161 lines
4.5 KiB
Markdown
161 lines
4.5 KiB
Markdown
# 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) - 框架完整文档
|
||
|