6.5 KiB
6.5 KiB
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
首先需要构建框架（在项目根目录执行）：
# 回到项目根目录
cd ..
# 生产构建
npm run build
# 或开发构建（有 sourcemap）
npm run build:dev
2. 安装 Demo 依赖
# 进入 demo 目录
cd demo
# 安装依赖
npm install
3. 启动开发服务器
# 启动基础示例
npm run dev
# 浏览器会自动打开 http://localhost:8080
4. 构建生产版本
# 构建
npm run build
# 生成的文件在 demo/dist 目录
切换示例
基础示例（默认）
使用 src/main.js 作为入口，展示基本功能。
高级示例
要切换到高级示例，修改 webpack.config.js：
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 创建新组件：
<!-- src/components/MyPage.vue -->
<template>
<div>
<h1>我的页面</h1>
</div>
</template>
<script>
export default {
name: 'MyPage'
}
</script>
2. 注册到路由
在 src/main.js 或 src/main-advanced.js 中：
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 模块
const myModule = {
namespaced: true,
state: { data: null },
mutations: {
SET_DATA(state, data) {
state.data = data
}
},
actions: {
fetchData({ commit }) {
// 获取数据逻辑
}
}
}
AdminFramework.store.registerModule('myModule', myModule)
4. 使用框架提供的组件
<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 中的配置：
const config = {
title: '系统标题',
apiUrl: 'http://your-api.com/api/',
uploadUrl: 'http://your-api.com/api/upload'
}
HTTP 请求示例
在组件中使用
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('请求失败')
}
}
}
}
工具函数使用
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 工具使用
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：
cd .. && npm run build && cd demo
2. 端口被占用
修改 webpack.config.js 中的端口：
devServer: {
port: 8081, // 改为其他端口
// ...
}
3. 热更新不生效
检查 devServer.hot 配置是否为 true。
4. 样式不生效
确保在入口文件中引入了 iView 样式：
import 'view-design/dist/styles/iview.css'
生产部署
1. 构建
npm run build
2. 部署
将 demo/dist 目录下的文件部署到服务器。
3. 注意事项
- 确保后端 API 配置正确
- 配置 Nginx 或其他服务器的路由重写规则（支持 Vue Router 的 history 模式）
更多示例
- 基础示例: 运行
npm run dev（默认） - 高级示例: 修改 webpack.config.js 的 entry 为
./src/main-advanced.js