293 lines
6.0 KiB
Markdown
293 lines
6.0 KiB
Markdown
# Demo Project - Admin Framework 使用示例
|
||
|
||
这是一个使用 **Admin Framework** 框架的完整示例项目。
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
demo-project/
|
||
├── public/
|
||
│ └── index.html # HTML 模板
|
||
├── src/
|
||
│ ├── config/
|
||
│ │ └── index.js # 配置文件
|
||
│ ├── libs/
|
||
│ │ └── admin-framework.js # 框架文件（从 dist 复制）
|
||
│ ├── views/
|
||
│ │ └── business/
|
||
│ │ └── product_list.vue # 示例业务页面
|
||
│ ├── App.vue # 根组件
|
||
│ └── main.js # 入口文件
|
||
├── babel.config.js
|
||
├── package.json
|
||
├── webpack.config.js
|
||
└── README.md
|
||
```
|
||
|
||
## ⚠️ 重要说明
|
||
|
||
**本项目已更新为直接使用框架源码**（不再使用打包文件），更方便调试！
|
||
|
||
**✅ 已启用完整的 Source Map 支持**，可以在浏览器中直接调试源码！
|
||
|
||
**首次运行或更新后，请先安装依赖**：
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
如果遇到问题，删除 `node_modules` 和 `package-lock.json` 后重新安装。
|
||
|
||
---
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 方式一：一键启动（推荐）
|
||
|
||
#### Windows 用户
|
||
双击运行 `start.bat`，会自动：
|
||
1. 检查并安装依赖
|
||
2. 启动开发服务器
|
||
3. 自动打开浏览器
|
||
|
||
#### Linux/Mac 用户
|
||
```bash
|
||
chmod +x start.sh
|
||
./start.sh
|
||
```
|
||
|
||
### 方式二：手动启动
|
||
|
||
```bash
|
||
# 1. 安装依赖（首次运行必须）
|
||
npm install
|
||
|
||
# 2. 启动开发服务器
|
||
npm run dev
|
||
```
|
||
|
||
### ~~ 方式三：复制框架文件（已废弃）~~
|
||
|
||
### 1. 使用源码（当前方式）
|
||
|
||
将框架打包文件复制到项目中：
|
||
|
||
```bash
|
||
# 在 admin-framework 目录执行构建
|
||
cd admin-framework
|
||
npm run build
|
||
|
||
# 创建 libs 目录
|
||
mkdir demo-project/src/libs
|
||
|
||
# 复制打包文件
|
||
cp dist/admin-framework.js demo-project/src/libs/
|
||
```
|
||
|
||
### 2. 安装依赖
|
||
|
||
```bash
|
||
cd demo-project
|
||
npm install
|
||
```
|
||
|
||
### 3. 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
浏览器会自动打开 `http://localhost:8080`
|
||
|
||
### 4. 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
生成的文件在 `dist` 目录中。
|
||
|
||
## 📝 核心文件说明
|
||
|
||
### main.js - 入口文件
|
||
|
||
```javascript
|
||
import AdminFramework from './libs/admin-framework.js'
|
||
import config from './config'
|
||
|
||
// 使用框架
|
||
Vue.use(AdminFramework, {
|
||
config,
|
||
ViewUI,
|
||
VueRouter,
|
||
Vuex,
|
||
createPersistedState
|
||
})
|
||
|
||
// 创建 Vue 实例
|
||
new Vue({
|
||
router: AdminFramework.router,
|
||
store: AdminFramework.store,
|
||
render: h => h(App)
|
||
}).$mount('#app')
|
||
```
|
||
|
||
### config/index.js - 配置文件
|
||
|
||
```javascript
|
||
export default {
|
||
title: 'Demo 管理系统',
|
||
apiUrl: 'http://localhost:3000/api/',
|
||
uploadUrl: 'http://localhost:3000/api/upload',
|
||
tokenKey: 'demo_token'
|
||
}
|
||
```
|
||
|
||
### 业务页面示例
|
||
|
||
`src/views/business/product_list.vue` 展示了如何：
|
||
- 使用 ViewUI 组件（Table、Button、Modal 等）
|
||
- 调用 API 接口（this.$http）
|
||
- 使用框架提供的工具方法
|
||
|
||
## 🎯 框架提供的功能
|
||
|
||
### 1. 内置页面
|
||
|
||
- ✅ **主页**（HomePage）- 欢迎页面
|
||
- ✅ **系统页面**（SysUser、SysRole、SysMenu 等）
|
||
- ✅ **登录页面**（LoginPage）
|
||
- ✅ **错误页面**（401、404、500）
|
||
|
||
### 2. 布局组件
|
||
|
||
- ✅ **Main** - 主布局
|
||
- ✅ **ParentView** - 父级视图
|
||
|
||
### 3. 工具方法
|
||
|
||
```javascript
|
||
// HTTP 请求
|
||
this.$http.get(url, params)
|
||
this.$http.post(url, data)
|
||
|
||
// 工具函数
|
||
this.$tools.formatDate(date, format)
|
||
this.$tools.setToken(token)
|
||
this.$tools.getToken()
|
||
|
||
// UI 工具
|
||
this.$uiTool.delConfirm(callback)
|
||
this.$uiTool.setRem()
|
||
```
|
||
|
||
### 4. Store 状态管理
|
||
|
||
```javascript
|
||
// 用户模块
|
||
this.$store.dispatch('user/handleLogin', data)
|
||
this.$store.dispatch('user/handleLogOut')
|
||
this.$store.getters['user/userName']
|
||
|
||
// 应用模块
|
||
this.$store.dispatch('app/getSysTitle', { defaultTitle: '系统' })
|
||
this.$store.getters['app/sysFormModel']
|
||
```
|
||
|
||
## 🐛 调试功能
|
||
|
||
### Source Map 已启用
|
||
|
||
项目已配置完整的 Source Map 支持：
|
||
|
||
✅ **开发模式**：使用 `eval-source-map`
|
||
- 高质量的源码映射
|
||
- 可以在浏览器中看到原始源代码
|
||
- 支持断点调试
|
||
- 包含行和列信息
|
||
|
||
✅ **生产模式**：使用 `source-map`
|
||
- 生成独立的 .map 文件
|
||
- 完整的源码信息
|
||
|
||
### 如何调试
|
||
|
||
1. **启动开发服务器**：
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
2. **打开浏览器开发者工具**（F12）
|
||
|
||
3. **在 Sources 标签页查看源码**：
|
||
```
|
||
webpack://
|
||
├── demo-project/src/ ← Demo 项目源码
|
||
└── src/ ← 框架源码（可直接调试）
|
||
```
|
||
|
||
4. **设置断点调试**：
|
||
- 点击行号设置断点
|
||
- 或在代码中添加 `debugger` 语句
|
||
|
||
### 详细调试指南
|
||
|
||
查看完整调试教程：**[调试指南.md](./调试指南.md)** 📚
|
||
|
||
包含：
|
||
- Source Map 配置说明
|
||
- 浏览器调试技巧
|
||
- 框架源码调试方法
|
||
- Vue DevTools 使用
|
||
- Console 调试技巧
|
||
|
||
## 🔧 自定义开发
|
||
|
||
### 添加业务路由
|
||
|
||
在 `main.js` 中添加自定义路由：
|
||
|
||
```javascript
|
||
const businessRoutes = [
|
||
{
|
||
path: '/business/product',
|
||
name: 'product_list',
|
||
component: ProductList
|
||
}
|
||
]
|
||
|
||
// 添加到主路由
|
||
const mainRoute = AdminFramework.router.options.routes.find(r => r.path === '/')
|
||
mainRoute.children.push(...businessRoutes)
|
||
```
|
||
|
||
### 使用系统页面
|
||
|
||
```javascript
|
||
import { SysUser, SysRole } from './libs/admin-framework.js'
|
||
|
||
// 或者直接使用
|
||
const SysUser = AdminFramework.SysUser
|
||
```
|
||
|
||
## 📚 更多文档
|
||
|
||
查看完整文档：`admin-framework/完整使用文档.md`
|
||
|
||
## 💡 提示
|
||
|
||
1. **框架文件**：确保将最新的 `admin-framework.js` 复制到 `src/libs/` 目录
|
||
2. **ViewUI 样式**：已在 main.js 中引入 `view-design/dist/styles/iview.css`
|
||
3. **API 配置**：修改 `config/index.js` 中的 `apiUrl` 为你的后端地址
|
||
4. **登录功能**：访问 `/login` 可以看到登录页面
|
||
|
||
## 🎉 开始开发
|
||
|
||
现在你可以：
|
||
1. 访问 `http://localhost:8080/login` 查看登录页面
|
||
2. 访问 `http://localhost:8080/home` 查看主页
|
||
3. 访问 `http://localhost:8080/business/product` 查看业务页面示例
|
||
4. 开始开发你的业务页面！
|
||
|
||
祝开发愉快！ 🚀
|
||
|