1

demo-project/README.md

@@ -0,0 +1,292 @@
+# 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. 开始开发你的业务页面！
+
+祝开发愉快！ 🚀
+