1

copy-to-demo.bat

@@ -0,0 +1,51 @@
+@echo off
+chcp 65001 >nul
+
+echo ================================
+echo   复制框架到 Demo 项目
+echo ================================
+echo.
+
+REM 检查 dist 目录是否存在
+if not exist "dist\admin-framework.js" (
+    echo ❌ 错误: dist\admin-framework.js 不存在
+    echo 请先运行 build.bat 打包框架
+    pause
+    exit /b 1
+)
+
+REM 创建 demo-project/src/libs 目录
+if not exist "demo-project\src\libs" (
+    echo 📁 创建目录: demo-project\src\libs
+    mkdir "demo-project\src\libs"
+)
+
+REM 复制框架文件
+echo 📦 复制 dist\admin-framework.js 到 demo-project\src\libs\
+copy /Y "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" >nul
+
+if %errorlevel% equ 0 (
+    echo ✅ 复制成功！
+    echo.
+    
+    REM 显示文件大小
+    for %%A in (demo-project\src\libs\admin-framework.js) do (
+        set SIZE=%%~zA
+        set /a SIZE_KB=!SIZE! / 1024
+        echo 📊 文件大小: !SIZE_KB! KB
+    )
+    
+    echo.
+    echo 📚 下一步:
+    echo   1. 进入 demo-project 目录: cd demo-project
+    echo   2. 启动开发服务器: npm run dev
+    echo   3. 访问 http://localhost:8080
+    echo.
+) else (
+    echo ❌ 复制失败
+    pause
+    exit /b 1
+)
+
+pause
+

demo-project/.gitignore

@@ -7,6 +7,9 @@ yarn.lock
 dist/
 *.log
 
+# 框架文件（从根目录复制过来的）
+src/libs/admin-framework.js
+
 # 编辑器
 .vscode/
 .idea/

demo-project/README_使用打包框架.md

@@ -0,0 +1,270 @@
+# Demo 项目 - 使用打包框架
+
+## 📦 项目说明
+
+这是一个使用 Admin Framework 打包版本的演示项目。
+
+## ✅ 已完成的配置
+
+### 1. 框架引用方式
+
+**文件**：`src/main.js`
+
+```javascript
+// 使用打包好的框架
+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）执行：
+
+```powershell
+# 打包框架
+npm run build
+
+# 复制到 demo 项目
+Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+```
+
+### 2. 安装依赖（首次运行）
+
+```bash
+cd demo-project
+npm install
+```
+
+### 3. 启动开发服务器
+
+```bash
+npm run dev
+```
+
+### 4. 访问应用
+
+打开浏览器访问：http://localhost:8080
+
+**测试账号**：
+- 用户名：admin
+- 密码：admin123
+
+## 🔄 更新框架
+
+当框架源码（`../../src/`）有更新时：
+
+### 快速更新（推荐）
+
+在**项目根目录**执行：
+
+```powershell
+# 一键打包并复制
+npm run build; Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force; Write-Host "✅ 框架已更新！" -ForegroundColor Green
+```
+
+### 分步操作
+
+```bash
+# 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`：
+
+```javascript
+// 临时改为源码引用
+import AdminFramework from '../../src/index.js'
+```
+
+**注意**：调试完成后记得改回来！
+
+### 测试框架时
+
+使用打包文件（当前配置）：
+
+```javascript
+// 使用打包文件
+import AdminFramework from './libs/admin-framework.js'
+```
+
+## 📝 组件映射配置
+
+在 `src/main.js` 中配置业务组件映射：
+
+```javascript
+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'
+```
+
+**解决**：
+```powershell
+# 在项目根目录
+Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+```
+
+### 问题 2：修改框架源码后没有变化
+
+**原因**：使用的是打包文件，不会自动更新
+
+**解决**：
+```powershell
+# 重新打包并复制
+npm run build
+Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+```
+
+### 问题 3：控制台报错
+
+**检查步骤**：
+1. 确保框架已正确打包
+2. 确保文件已复制到正确位置
+3. 查看浏览器控制台的详细错误
+4. 检查 `src/main.js` 的引用路径
+
+### 问题 4：端口被占用
+
+**错误**：
+```
+Error: listen EADDRINUSE: address already in use :::8080
+```
+
+**解决**：
+1. 关闭占用 8080 端口的程序
+2. 或修改 `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. 浏览器控制台错误信息
+2. 终端编译错误信息
+3. 相关文档
+
+---
+
+**框架版本**：1.0.0
+
+**Node.js 版本要求**：>= 14.0.0
+
+**当前状态**：✅ 就绪
+

demo-project/src/main.js

@@ -5,8 +5,8 @@ import ViewUI from 'view-design'
 import createPersistedState from 'vuex-persistedstate'
 import 'view-design/dist/styles/iview.css'
 
-// 引入框架（直接使用源码，方便调试）
+// 引入框架（使用打包好的框架 JS）
-import AdminFramework from '../../src/index.js'
+import AdminFramework from './libs/admin-framework.js'
 
 // 引入配置
 import config from './config'

demo-project/使用打包框架说明.md

@@ -0,0 +1,206 @@
+# 使用打包框架说明
+
+## ✅ 已完成的修改
+
+Demo 项目现在使用打包好的框架 JS 文件，而不是直接引用源码。
+
+### 修改内容
+
+**文件**: `demo-project/src/main.js`
+
+```javascript
+// 修改前（直接使用源码）
+import AdminFramework from '../../src/index.js'
+
+// 修改后（使用打包好的框架）
+import AdminFramework from './libs/admin-framework.js'
+```
+
+### 文件结构
+
+```
+demo-project/
+├── src/
+│   ├── libs/
+│   │   └── admin-framework.js  ← 打包好的框架文件
+│   ├── main.js                 ← 引用框架的入口文件
+│   └── ...
+└── ...
+```
+
+## 🔄 更新框架的步骤
+
+当框架源码（`src/` 目录）有更新时，需要重新打包并复制到 demo 项目：
+
+### 方法一：使用 PowerShell 命令（推荐）
+
+```powershell
+# 1. 在项目根目录打包框架
+npm run build
+
+# 2. 复制到 demo 项目
+if (-not (Test-Path "demo-project\src\libs")) { 
+    New-Item -ItemType Directory -Path "demo-project\src\libs" -Force | Out-Null 
+}
+Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+Write-Host "✅ 复制成功！" -ForegroundColor Green
+```
+
+### 方法二：手动操作
+
+1. **打包框架**
+   ```bash
+   # 在项目根目录
+   npm run build
+   ```
+
+2. **复制文件**
+   - 将 `dist/admin-framework.js` 复制到 `demo-project/src/libs/admin-framework.js`
+
+3. **重启开发服务器**
+   ```bash
+   cd demo-project
+   npm run dev
+   ```
+
+## 📊 优势
+
+### 使用打包框架的优势
+
+1. **✅ 性能更好**
+   - 打包后的文件经过优化和压缩
+   - 减少了模块解析时间
+
+2. **✅ 更接近生产环境**
+   - Demo 项目的使用方式和实际项目一致
+   - 更容易发现潜在问题
+
+3. **✅ 依赖隔离**
+   - Demo 项目不需要安装框架的所有依赖
+   - 减少了依赖冲突的可能性
+
+4. **✅ 更清晰的边界**
+   - 框架和业务代码分离更明确
+   - 便于理解框架的使用方式
+
+### 使用源码的优势（调试时）
+
+1. **✅ 实时更新**
+   - 修改源码后立即生效
+   - 不需要重新打包
+
+2. **✅ 调试方便**
+   - 可以直接在源码中打断点
+   - 错误堆栈更清晰
+
+## 🔧 开发建议
+
+### 开发框架时
+
+**使用源码引用**（临时修改）：
+```javascript
+// demo-project/src/main.js
+import AdminFramework from '../../src/index.js'
+```
+
+**优点**：
+- 修改框架源码后立即生效
+- 方便调试和测试
+
+### 测试框架时
+
+**使用打包文件**（当前配置）：
+```javascript
+// demo-project/src/main.js
+import AdminFramework from './libs/admin-framework.js'
+```
+
+**优点**：
+- 测试打包后的实际效果
+- 发现打包可能引入的问题
+
+## 📝 注意事项
+
+1. **打包后需要复制**
+   - 每次修改框架源码并打包后，需要重新复制到 demo 项目
+   - 否则 demo 项目使用的还是旧版本
+
+2. **Source Map**
+   - 打包时会生成 source map 文件
+   - 方便在浏览器中调试打包后的代码
+
+3. **版本管理**
+   - `demo-project/src/libs/admin-framework.js` 不应该提交到 Git
+   - 应该在 `.gitignore` 中忽略这个文件
+
+4. **依赖更新**
+   - 如果框架的依赖有更新，需要重新打包
+   - Demo 项目不需要安装框架的依赖
+
+## 🎯 快速命令
+
+### 一键更新框架到 Demo 项目
+
+```powershell
+# 打包并复制
+npm run build; if (-not (Test-Path "demo-project\src\libs")) { New-Item -ItemType Directory -Path "demo-project\src\libs" -Force | Out-Null }; Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force; Write-Host "✅ 框架已更新到 Demo 项目！" -ForegroundColor Green
+```
+
+### 启动 Demo 项目
+
+```bash
+cd demo-project
+npm run dev
+```
+
+## 📚 相关文件
+
+- `build.bat` / `build.sh` - 框架打包脚本
+- `webpack.config.js` - Webpack 配置文件
+- `dist/admin-framework.js` - 打包后的框架文件
+- `demo-project/src/libs/admin-framework.js` - Demo 项目使用的框架文件
+- `demo-project/src/main.js` - Demo 项目入口文件
+
+## 🔍 故障排查
+
+### 问题：修改框架源码后，Demo 项目没有变化
+
+**原因**：Demo 项目使用的是打包后的文件，不会自动更新
+
+**解决方案**：
+1. 重新打包框架：`npm run build`
+2. 复制到 Demo 项目（使用上面的 PowerShell 命令）
+3. 重启 Demo 项目的开发服务器
+
+### 问题：找不到 admin-framework.js 文件
+
+**原因**：还没有复制打包文件到 Demo 项目
+
+**解决方案**：
+```powershell
+# 确保先打包
+npm run build
+
+# 然后复制
+if (-not (Test-Path "demo-project\src\libs")) { 
+    New-Item -ItemType Directory -Path "demo-project\src\libs" -Force | Out-Null 
+}
+Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+```
+
+### 问题：控制台报错找不到模块
+
+**原因**：可能是打包配置有问题，或者依赖没有正确打包
+
+**解决方案**：
+1. 检查 `webpack.config.js` 配置
+2. 确保所有依赖都已安装
+3. 重新打包：`npm run build`
+4. 查看打包日志是否有错误
+
+---
+
+**当前状态**：✅ Demo 项目已配置为使用打包后的框架文件
+
+**下一步**：启动 Demo 项目测试：`cd demo-project && npm run dev`
+

demo-project/启动说明.md

@@ -0,0 +1,119 @@
+# Demo 项目启动说明
+
+## ✅ 配置完成
+
+Demo 项目已配置为使用打包好的框架 JS 文件。
+
+## 🚀 启动步骤
+
+### 1. 确保框架文件已复制
+
+检查文件是否存在：
+```
+demo-project/src/libs/admin-framework.js
+```
+
+如果不存在，在项目根目录执行：
+```powershell
+Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+```
+
+### 2. 启动开发服务器
+
+**方法一：使用命令行**
+```bash
+cd demo-project
+npm run dev
+```
+
+**方法二：使用 start.bat（Windows）**
+```bash
+cd demo-project
+start.bat
+```
+
+**方法三：使用 start.sh（Linux/Mac）**
+```bash
+cd demo-project
+./start.sh
+```
+
+### 3. 访问应用
+
+打开浏览器访问：
+- **开发环境**：http://localhost:8080
+- **测试账号**：admin / admin123
+
+## 📝 注意事项
+
+1. **端口占用**
+   - 如果 8080 端口被占用，webpack 会自动使用其他端口
+   - 查看终端输出的实际端口号
+
+2. **首次启动**
+   - 首次启动可能需要较长时间编译
+   - 等待 "Compiled successfully" 消息
+
+3. **热更新**
+   - 修改代码后会自动刷新浏览器
+   - 如果没有自动刷新，手动刷新页面
+
+## 🔍 故障排查
+
+### 问题：找不到 admin-framework.js
+
+**错误信息**：
+```
+Module not found: Error: Can't resolve './libs/admin-framework.js'
+```
+
+**解决方案**：
+```powershell
+# 在项目根目录执行
+Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+```
+
+### 问题：端口被占用
+
+**错误信息**：
+```
+Error: listen EADDRINUSE: address already in use :::8080
+```
+
+**解决方案**：
+1. 关闭占用 8080 端口的程序
+2. 或修改 `webpack.config.js` 中的端口配置
+
+### 问题：编译错误
+
+**解决方案**：
+1. 检查 `src/main.js` 的引用路径是否正确
+2. 确保 `admin-framework.js` 文件完整
+3. 删除 `node_modules` 重新安装：
+   ```bash
+   rm -rf node_modules
+   npm install
+   ```
+
+## 📚 相关文档
+
+- `使用打包框架说明.md` - 详细使用说明
+- `框架更新完成.md` - 更新记录
+- `README.md` - 项目说明
+
+## 🎯 下一步
+
+启动成功后：
+1. 使用测试账号登录
+2. 测试菜单导航功能
+3. 测试系统管理功能
+4. 查看浏览器控制台，确保没有错误
+
+---
+
+**当前状态**：✅ 就绪
+
+**框架版本**：1.0.0
+
+**启动命令**：`npm run dev`
+

demo-project/框架更新完成.md

@@ -0,0 +1,157 @@
+# 框架更新完成 ✅
+
+## 📝 更新内容
+
+Demo 项目已成功切换为使用打包好的框架 JS 文件。
+
+### 修改的文件
+
+1. **`demo-project/src/main.js`**
+   ```javascript
+   // 修改前
+   import AdminFramework from '../../src/index.js'
+   
+   // 修改后
+   import AdminFramework from './libs/admin-framework.js'
+   ```
+
+2. **`demo-project/.gitignore`**
+   ```
+   # 新增
+   src/libs/admin-framework.js
+   ```
+
+3. **新增文件**
+   - `demo-project/src/libs/admin-framework.js` - 打包好的框架文件
+   - `demo-project/使用打包框架说明.md` - 使用说明文档
+
+## 🎯 当前状态
+
+- ✅ 框架已打包：`dist/admin-framework.js`
+- ✅ 已复制到 Demo 项目：`demo-project/src/libs/admin-framework.js`
+- ✅ Demo 项目已配置为使用打包文件
+- ✅ `.gitignore` 已更新，忽略框架文件
+
+## 🚀 启动 Demo 项目
+
+```bash
+cd demo-project
+npm run dev
+```
+
+访问：http://localhost:8080
+
+## 🔄 更新框架的步骤
+
+当框架源码有更新时：
+
+### 快速更新（一键命令）
+
+```powershell
+# 在项目根目录执行
+npm run build; Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force; Write-Host "✅ 框架已更新！" -ForegroundColor Green
+```
+
+### 分步操作
+
+```bash
+# 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
+```
+
+## 📊 优势
+
+### 使用打包框架的好处
+
+1. **性能更好** - 打包后的文件经过优化
+2. **更接近生产环境** - 和实际使用方式一致
+3. **依赖隔离** - Demo 项目不需要框架的所有依赖
+4. **边界清晰** - 框架和业务代码分离明确
+
+### 开发时的建议
+
+**调试框架时**：临时改回源码引用
+```javascript
+// demo-project/src/main.js
+import AdminFramework from '../../src/index.js'
+```
+
+**测试框架时**：使用打包文件（当前配置）
+```javascript
+// demo-project/src/main.js
+import AdminFramework from './libs/admin-framework.js'
+```
+
+## 📚 相关文档
+
+- `demo-project/使用打包框架说明.md` - 详细使用说明
+- `完整使用文档.md` - 框架完整文档
+- `README.md` - 项目说明
+
+## 🔍 故障排查
+
+### 问题：修改框架源码后，Demo 项目没有变化
+
+**解决**：
+```powershell
+# 重新打包并复制
+npm run build
+Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+```
+
+### 问题：找不到 admin-framework.js
+
+**解决**：
+```powershell
+# 确保文件已复制
+if (-not (Test-Path "demo-project\src\libs\admin-framework.js")) {
+    Write-Host "❌ 文件不存在，正在复制..." -ForegroundColor Yellow
+    Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
+    Write-Host "✅ 复制完成！" -ForegroundColor Green
+}
+```
+
+### 问题：控制台报错
+
+**检查**：
+1. 确保框架已正确打包：`npm run build`
+2. 确保文件已复制到正确位置
+3. 查看浏览器控制台的详细错误信息
+4. 检查 `demo-project/src/main.js` 的引用路径
+
+## 🎉 下一步
+
+1. **启动 Demo 项目**
+   ```bash
+   cd demo-project
+   npm run dev
+   ```
+
+2. **访问应用**
+   - 打开浏览器访问：http://localhost:8080
+   - 使用测试账号登录
+
+3. **测试功能**
+   - 登录功能
+   - 菜单导航
+   - 系统管理功能
+
+4. **查看控制台**
+   - 确保没有错误
+   - 查看框架版本信息
+
+---
+
+**更新完成时间**：2025-10-08
+
+**框架版本**：1.0.0
+
+**状态**：✅ 就绪
+