admin_core/demo-project

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 支持，可以在浏览器中直接调试源码！

首次运行或更新后，请先安装依赖：

npm install

如果遇到问题，删除 node_modules 和 package-lock.json 后重新安装。

---

🚀 快速开始

方式一：一键启动（推荐）

Windows 用户

双击运行 start.bat，会自动：

1. 检查并安装依赖
2. 启动开发服务器
3. 自动打开浏览器

Linux/Mac 用户

chmod +x start.sh
./start.sh

方式二：手动启动

# 1. 安装依赖（首次运行必须）
npm install

# 2. 启动开发服务器
npm run dev

~~ 方式三：复制框架文件（已废弃）~~

1. 使用源码（当前方式）

将框架打包文件复制到项目中：

# 在 admin-framework 目录执行构建
cd admin-framework
npm run build

# 创建 libs 目录
mkdir demo-project/src/libs

# 复制打包文件
cp dist/admin-framework.js demo-project/src/libs/

2. 安装依赖

cd demo-project
npm install

3. 启动开发服务器

npm run dev

浏览器会自动打开 http://localhost:8080

4. 构建生产版本

npm run build

生成的文件在 dist 目录中。

📝 核心文件说明

main.js - 入口文件

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 - 配置文件

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. 工具方法

// 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 状态管理

// 用户模块
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. 启动开发服务器：

   npm run dev
   

2. 打开浏览器开发者工具（F12）

3. 在 Sources 标签页查看源码：

   webpack://
   ├── demo-project/src/     ← Demo 项目源码
   └── src/                  ← 框架源码（可直接调试）
   

4. 设置断点调试：

   • 点击行号设置断点
   • 或在代码中添加 debugger 语句

详细调试指南

查看完整调试教程：调试指南.md 📚

包含：

• Source Map 配置说明
• 浏览器调试技巧
• 框架源码调试方法
• Vue DevTools 使用
• Console 调试技巧

🔧 自定义开发

添加业务路由

在 main.js 中添加自定义路由：

const businessRoutes = [
  {
    path: '/business/product',
    name: 'product_list',
    component: ProductList
  }
]

// 添加到主路由
const mainRoute = AdminFramework.router.options.routes.find(r => r.path === '/')
mainRoute.children.push(...businessRoutes)

使用系统页面

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. 开始开发你的业务页面！

祝开发愉快！ 🚀