165 lines
3.0 KiB
Markdown
165 lines
3.0 KiB
Markdown
# 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
|
||
```
|
||
|
||
祝开发愉快！🚀
|
||
|