# Demo Project 安装指南

## 📦 安装步骤

### 步骤 1：复制框架文件

框架文件已经在创建 demo 时自动复制到 `src/libs/admin-framework.js`。

如果需要更新框架，执行：

```bash
# 在 admin-framework 目录重新构建
cd ../
npm run build

# 复制最新的框架文件
cp dist/admin-framework.js demo-project/src/libs/
```

### 步骤 2：安装依赖

```bash
cd demo-project
npm install
```

安装过程中会下载以下依赖：
- vue, vue-router, vuex
- view-design (UI 组件库)
- axios (HTTP 客户端)
- webpack 相关工具

### 步骤 3：启动项目

#### 开发模式

```bash
npm run dev
```

启动后自动打开浏览器访问 `http://localhost:8080`

#### 生产构建

```bash
npm run build
```

构建完成后，产物在 `dist` 目录。

## 🎯 功能演示

### 1. 登录页面

访问：`http://localhost:8080/login`

默认登录信息（示例）：
- 用户名：admin
- 密码：123456

### 2. 主页

登录后自动跳转到主页：`http://localhost:8080/home`

显示系统欢迎信息和标题。

### 3. 系统管理页面

框架内置的系统页面：
- `/system/user` - 用户管理
- `/system/role` - 角色管理
- `/system_high/menu` - 菜单管理

### 4. 业务示例页面

访问：`http://localhost:8080/business/product`

查看产品列表示例（包含增删改查操作演示）。

## 🔧 开发提示

### 修改配置

编辑 `src/config/index.js`：

```javascript
export default {
  title: '你的系统名称',           // 修改系统标题
  apiUrl: 'http://your-api.com/api/', // 修改 API 地址
  uploadUrl: 'http://your-api.com/api/upload'
}
```

### 添加新页面

1. 在 `src/views/business/` 创建新的 `.vue` 文件
2. 在 `src/main.js` 中添加路由：

```javascript
import NewPage from './views/business/new_page.vue'

const businessRoutes = [
  {
    path: '/business/newpage',
    name: 'new_page',
    component: NewPage
  }
]
```

### 调用 API

```javascript
// GET 请求
const res = await this.$http.get('user/list', { page: 1 })

// POST 请求
const res = await this.$http.post('user/add', { name: '张三' })
```

### 使用 Store

```javascript
// 获取用户信息
const userName = this.$store.getters['user/userName']

// 获取系统配置
const sysTitle = this.$store.getters['app/sysFormModel']
```

## ⚠️ 常见问题

### Q1: 启动后页面空白？

检查浏览器控制台错误，确保：
1. 框架文件已正确复制到 `src/libs/`
2. 依赖已完全安装 `npm install`

### Q2: 接口请求失败？

修改 `src/config/index.js` 中的 `apiUrl` 为正确的后端地址。

### Q3: 样式显示异常？

确保已引入 ViewUI 样式：
```javascript
import 'view-design/dist/styles/iview.css'
```

## 📚 更多帮助

- 查看完整框架文档：`../完整使用文档.md`
- 框架 API 文档：`../完整使用文档.md#api-文档`

## 🎉 开始开发

所有准备工作已完成，现在可以开始开发了！

```bash
npm run dev
```

祝开发愉快！🚀