# 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

**当前状态**：✅ 就绪