1
This commit is contained in:
张成
51
copy-to-demo.bat
Normal file
51
copy-to-demo.bat
Normal file
@@ -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
|
||||
|
||||
3
demo-project/.gitignore
vendored
3
demo-project/.gitignore
vendored
@@ -7,6 +7,9 @@ yarn.lock
|
||||
dist/
|
||||
*.log
|
||||
|
||||
# 框架文件（从根目录复制过来的）
|
||||
src/libs/admin-framework.js
|
||||
|
||||
# 编辑器
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
270
demo-project/README_使用打包框架.md
Normal file
270
demo-project/README_使用打包框架.md
Normal file
@@ -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
|
||||
|
||||
**当前状态**：✅ 就绪
|
||||
|
||||
@@ -5,8 +5,8 @@ import ViewUI from 'view-design'
|
||||
import createPersistedState from 'vuex-persistedstate'
|
||||
import 'view-design/dist/styles/iview.css'
|
||||
|
||||
// 引入框架（直接使用源码，方便调试）
|
||||
import AdminFramework from '../../src/index.js'
|
||||
// 引入框架（使用打包好的框架 JS）
|
||||
import AdminFramework from './libs/admin-framework.js'
|
||||
|
||||
// 引入配置
|
||||
import config from './config'
|
||||
|
||||
206
demo-project/使用打包框架说明.md
Normal file
206
demo-project/使用打包框架说明.md
Normal file
@@ -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`
|
||||
|
||||
119
demo-project/启动说明.md
Normal file
119
demo-project/启动说明.md
Normal file
@@ -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`
|
||||
|
||||
157
demo-project/框架更新完成.md
Normal file
157
demo-project/框架更新完成.md
Normal file
@@ -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
|
||||
|
||||
**状态**：✅ 就绪
|
||||
|
||||
Reference in New Issue
Block a user