158 lines
3.5 KiB
Markdown
158 lines
3.5 KiB
Markdown
# 框架更新完成 ✅
|
||
|
||
## 📝 更新内容
|
||
|
||
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
|
||
|
||
**状态**：✅ 就绪
|
||
|