zc/admin_core

Fork 0

Files

张成 d941bec7d8 1

2025-10-09 07:03:01 +08:00

5.3 KiB

Raw Blame History

Demo 项目 - 使用打包框架

📦 项目说明

这是一个使用 Admin Framework 打包版本的演示项目。

✅ 已完成的配置

1. 框架引用方式

文件：src/main.js

// 使用打包好的框架
import AdminFramework from './libs/admin-framework.js'

2. 文件结构

demo-project/
├── src/
│   ├── libs/
│   │   └── admin-framework.js  ← 打包好的框架（从 ../../dist/ 复制）
│   ├── main.js                 ← 引用框架
│   ├── App.vue
│   ├── config/
│   ├── views/
│   └── ...
├── public/
├── package.json
└── webpack.config.js

3. .gitignore 配置

# 框架文件（从根目录复制过来的）
src/libs/admin-framework.js

🚀 快速开始

1. 确保框架文件存在

检查 src/libs/admin-framework.js 是否存在。

如果不存在，在项目根目录（不是 demo-project）执行：

# 打包框架
npm run build

# 复制到 demo 项目
Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force

2. 安装依赖（首次运行）

cd demo-project
npm install

3. 启动开发服务器

npm run dev

4. 访问应用

打开浏览器访问：http://localhost:8080

测试账号：

用户名：admin
密码：admin123

🔄 更新框架

当框架源码（../../src/）有更新时：

快速更新（推荐）

在项目根目录执行：

# 一键打包并复制
npm run build; Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force; Write-Host "✅ 框架已更新！" -ForegroundColor Green

分步操作

# 1. 在项目根目录打包框架
npm run build

# 2. 复制到 demo 项目（PowerShell）
Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force

# 3. 重启 demo 项目（如果正在运行）
cd demo-project
npm run dev

📊 优势对比

使用打包框架（当前方式）

优点：

✅ 性能更好（打包优化）
✅ 更接近生产环境
✅ 依赖隔离
✅ 边界清晰

缺点：

❌ 修改框架后需要重新打包
❌ 调试稍微不便

使用源码引用（开发调试）

优点：

✅ 实时更新
✅ 调试方便

缺点：

❌ 性能较差
❌ 需要安装框架的所有依赖

🔧 开发建议

调试框架时

临时修改 src/main.js：

// 临时改为源码引用
import AdminFramework from '../../src/index.js'

注意：调试完成后记得改回来！

测试框架时

使用打包文件（当前配置）：

// 使用打包文件
import AdminFramework from './libs/admin-framework.js'

📝 组件映射配置

在 src/main.js 中配置业务组件映射：

Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState,
  // 业务组件映射
  componentMap: {
    'business/product_list': ProductList,
    // 添加更多业务组件...
  }
})

🔍 故障排查

问题 1：找不到 admin-framework.js

错误：

Module not found: Error: Can't resolve './libs/admin-framework.js'

解决：

# 在项目根目录
Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force

问题 2：修改框架源码后没有变化

原因：使用的是打包文件，不会自动更新

解决：

# 重新打包并复制
npm run build
Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force

问题 3：控制台报错

检查步骤：

确保框架已正确打包
确保文件已复制到正确位置
查看浏览器控制台的详细错误
检查 src/main.js 的引用路径

问题 4：端口被占用

错误：

Error: listen EADDRINUSE: address already in use :::8080

解决：

关闭占用 8080 端口的程序
或修改 webpack.config.js 中的端口

📚 相关文档

使用打包框架说明.md - 详细使用说明
框架更新完成.md - 更新记录
启动说明.md - 启动步骤
../../完整使用文档.md - 框架完整文档

🎯 项目结构

demo-project/
├── src/
│   ├── libs/
│   │   └── admin-framework.js     # 打包好的框架
│   ├── main.js                    # 入口文件
│   ├── App.vue                    # 根组件
│   ├── config/
│   │   ├── index.js               # 配置文件
│   │   └── menuConfig.js          # 菜单配置
│   ├── views/
│   │   ├── business/              # 业务页面
│   │   └── home/                  # 首页
│   └── ...
├── public/
│   └── index.html
├── package.json
├── webpack.config.js
├── babel.config.js
└── README.md

🌟 特性

✅ 基于 Vue 2.x
✅ 使用 ViewUI 组件库
✅ 动态路由和权限管理
✅ Vuex 状态管理
✅ 响应式布局
✅ 热更新开发

📞 支持

如有问题，请查看：

浏览器控制台错误信息
终端编译错误信息
相关文档

框架版本：1.0.0

Node.js 版本要求：>= 14.0.0

当前状态：✅ 就绪

5.3 KiB Raw Blame History Unescape Escape