1

demo-project/INSTALL.md

@@ -0,0 +1,164 @@
+# 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
+```
+
+祝开发愉快！🚀
+