352 lines
6.5 KiB
Markdown
352 lines
6.5 KiB
Markdown
# Admin Framework Demo - 本地版本
|
||
|
||
本地开发版本，不依赖 CDN，所有依赖都从 node_modules 加载。
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
demo/
|
||
├── public/ # 静态资源
|
||
│ └── index.html # HTML 模板
|
||
├── src/ # 源代码
|
||
│ ├── components/ # 自定义组件
|
||
│ │ └── CustomPage.vue
|
||
│ ├── main.js # 基础示例入口
|
||
│ └── main-advanced.js # 高级示例入口
|
||
├── package.json # 依赖配置
|
||
├── webpack.config.js # Webpack 配置
|
||
└── .babelrc # Babel 配置
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 1. 构建 Admin Framework
|
||
|
||
首先需要构建框架（在项目根目录执行）：
|
||
|
||
```bash
|
||
# 回到项目根目录
|
||
cd ..
|
||
|
||
# 生产构建
|
||
npm run build
|
||
|
||
# 或开发构建（有 sourcemap）
|
||
npm run build:dev
|
||
```
|
||
|
||
### 2. 安装 Demo 依赖
|
||
|
||
```bash
|
||
# 进入 demo 目录
|
||
cd demo
|
||
|
||
# 安装依赖
|
||
npm install
|
||
```
|
||
|
||
### 3. 启动开发服务器
|
||
|
||
```bash
|
||
# 启动基础示例
|
||
npm run dev
|
||
|
||
# 浏览器会自动打开 http://localhost:8080
|
||
```
|
||
|
||
### 4. 构建生产版本
|
||
|
||
```bash
|
||
# 构建
|
||
npm run build
|
||
|
||
# 生成的文件在 demo/dist 目录
|
||
```
|
||
|
||
## 切换示例
|
||
|
||
### 基础示例（默认）
|
||
使用 `src/main.js` 作为入口，展示基本功能。
|
||
|
||
### 高级示例
|
||
要切换到高级示例，修改 `webpack.config.js`：
|
||
|
||
```javascript
|
||
module.exports = {
|
||
entry: './src/main-advanced.js', // 改为 main-advanced.js
|
||
// ... 其他配置
|
||
}
|
||
```
|
||
|
||
然后重新运行 `npm run dev`。
|
||
|
||
## 依赖说明
|
||
|
||
### 生产依赖
|
||
- **vue**: ^2.6.14 - Vue 核心库
|
||
- **vue-router**: ^3.5.3 - 路由管理
|
||
- **vuex**: ^3.6.2 - 状态管理
|
||
- **view-design**: ^4.7.0 - UI 组件库
|
||
- **axios**: ^0.27.2 - HTTP 客户端
|
||
|
||
### 开发依赖
|
||
- **webpack**: ^5.0.0 - 模块打包工具
|
||
- **webpack-dev-server**: ^4.0.0 - 开发服务器
|
||
- **babel-loader**: ^8.2.0 - ES6+ 转译
|
||
- **vue-loader**: ^15.9.0 - Vue 单文件组件加载器
|
||
- **html-webpack-plugin**: ^5.5.0 - HTML 生成插件
|
||
|
||
## 开发指南
|
||
|
||
### 1. 添加自定义页面
|
||
|
||
在 `src/components` 创建新组件：
|
||
|
||
```vue
|
||
<!-- src/components/MyPage.vue -->
|
||
<template>
|
||
<div>
|
||
<h1>我的页面</h1>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'MyPage'
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 2. 注册到路由
|
||
|
||
在 `src/main.js` 或 `src/main-advanced.js` 中：
|
||
|
||
```javascript
|
||
import MyPage from './components/MyPage.vue'
|
||
|
||
const customRoutes = [
|
||
{
|
||
path: '/my',
|
||
component: AdminFramework.Main,
|
||
children: [
|
||
{
|
||
path: 'page',
|
||
component: MyPage,
|
||
meta: { title: '我的页面' }
|
||
}
|
||
]
|
||
}
|
||
]
|
||
|
||
customRoutes.forEach(route => {
|
||
AdminFramework.router.addRoute(route)
|
||
})
|
||
```
|
||
|
||
### 3. 添加 Vuex 模块
|
||
|
||
```javascript
|
||
const myModule = {
|
||
namespaced: true,
|
||
state: { data: null },
|
||
mutations: {
|
||
SET_DATA(state, data) {
|
||
state.data = data
|
||
}
|
||
},
|
||
actions: {
|
||
fetchData({ commit }) {
|
||
// 获取数据逻辑
|
||
}
|
||
}
|
||
}
|
||
|
||
AdminFramework.store.registerModule('myModule', myModule)
|
||
```
|
||
|
||
### 4. 使用框架提供的组件
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<!-- 表格组件 -->
|
||
<Tables
|
||
:columns="columns"
|
||
:data="tableData"
|
||
/>
|
||
|
||
<!-- 上传组件 -->
|
||
<UploadSingle
|
||
v-model="fileUrl"
|
||
:action="uploadUrl"
|
||
/>
|
||
|
||
<!-- 富文本编辑器 -->
|
||
<Editor v-model="content" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
columns: [],
|
||
tableData: [],
|
||
fileUrl: '',
|
||
content: '',
|
||
uploadUrl: this.$config.uploadUrl
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## API 配置
|
||
|
||
修改 `src/main.js` 中的配置：
|
||
|
||
```javascript
|
||
const config = {
|
||
title: '系统标题',
|
||
apiUrl: 'http://your-api.com/api/',
|
||
uploadUrl: 'http://your-api.com/api/upload'
|
||
}
|
||
```
|
||
|
||
## HTTP 请求示例
|
||
|
||
### 在组件中使用
|
||
|
||
```javascript
|
||
export default {
|
||
methods: {
|
||
async fetchData() {
|
||
try {
|
||
// GET 请求
|
||
const res = await this.$http.get('/api/users')
|
||
console.log(res.data)
|
||
|
||
// POST 请求
|
||
const res2 = await this.$http.post('/api/users', {
|
||
name: '张三',
|
||
age: 25
|
||
})
|
||
console.log(res2.data)
|
||
} catch (error) {
|
||
this.$Message.error('请求失败')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 工具函数使用
|
||
|
||
```javascript
|
||
export default {
|
||
methods: {
|
||
example() {
|
||
// 日期格式化
|
||
const formatted = this.$tools.formatDate(new Date(), 'yyyy-MM-dd')
|
||
|
||
// 深拷贝
|
||
const copy = this.$tools.deepClone(obj)
|
||
|
||
// 防抖
|
||
const debounced = this.$tools.debounce(() => {
|
||
console.log('执行')
|
||
}, 500)
|
||
|
||
// 节流
|
||
const throttled = this.$tools.throttle(() => {
|
||
console.log('执行')
|
||
}, 1000)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## UI 工具使用
|
||
|
||
```javascript
|
||
export default {
|
||
methods: {
|
||
example() {
|
||
// 成功提示
|
||
this.$ window.framework.uiTool.success('操作成功')
|
||
|
||
// 错误提示
|
||
this.$ window.framework.uiTool.error('操作失败')
|
||
|
||
// 警告提示
|
||
this.$ window.framework.uiTool.warning('警告信息')
|
||
|
||
// 确认对话框
|
||
this.$ window.framework.uiTool.confirm('确定删除吗？').then(() => {
|
||
// 确认后的操作
|
||
}).catch(() => {
|
||
// 取消后的操作
|
||
})
|
||
|
||
// Loading
|
||
const loading = this.$ window.framework.uiTool.loading('加载中...')
|
||
setTimeout(() => loading.close(), 2000)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 常见问题
|
||
|
||
### 1. 模块找不到
|
||
确保先构建了 admin-framework：
|
||
```bash
|
||
cd .. && npm run build && cd demo
|
||
```
|
||
|
||
### 2. 端口被占用
|
||
修改 `webpack.config.js` 中的端口：
|
||
```javascript
|
||
devServer: {
|
||
port: 8081, // 改为其他端口
|
||
// ...
|
||
}
|
||
```
|
||
|
||
### 3. 热更新不生效
|
||
检查 `devServer.hot` 配置是否为 `true`。
|
||
|
||
### 4. 样式不生效
|
||
确保在入口文件中引入了 iView 样式：
|
||
```javascript
|
||
import 'view-design/dist/styles/iview.css'
|
||
```
|
||
|
||
## 生产部署
|
||
|
||
### 1. 构建
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 2. 部署
|
||
将 `demo/dist` 目录下的文件部署到服务器。
|
||
|
||
### 3. 注意事项
|
||
- 确保后端 API 配置正确
|
||
- 配置 Nginx 或其他服务器的路由重写规则（支持 Vue Router 的 history 模式）
|
||
|
||
## 更多示例
|
||
|
||
- 基础示例: 运行 `npm run dev`（默认）
|
||
- 高级示例: 修改 webpack.config.js 的 entry 为 `./src/main-advanced.js`
|
||
|
||
## 相关链接
|
||
|
||
- [Admin Framework 完整文档](../_doc/完整使用文档.md)
|
||
- [Vue 官方文档](https://cn.vuejs.org/)
|
||
- [Vue Router 文档](https://router.vuejs.org/zh/)
|
||
- [Vuex 文档](https://vuex.vuejs.org/zh/)
|
||
- [iView 文档](https://www.iviewui.com/)
|
||
|