1
This commit is contained in:
张成
264
README.md
264
README.md
@@ -1,264 +0,0 @@
|
||||
# Admin Framework
|
||||
|
||||
一个基于 Vue2 的通用后台管理系统框架，包含完整的系统功能、登录、路由管理、布局等核心功能。
|
||||
|
||||
## ✨ 新版本亮点
|
||||
|
||||
**使用超级简单！只需 20 行代码即可启动完整的后台管理系统！**
|
||||
|
||||
```javascript
|
||||
// 引入框架（内置所有依赖）
|
||||
import AdminFramework from './admin-framework.js'
|
||||
import componentMap from './router/component-map.js'
|
||||
|
||||
// 一行搞定！
|
||||
const app = AdminFramework.createApp({
|
||||
title: '我的管理系统',
|
||||
apiUrl: 'http://localhost:9098/admin_api/', // uploadUrl 会自动设置
|
||||
componentMap: componentMap
|
||||
})
|
||||
|
||||
app.$mount('#app')
|
||||
```
|
||||
|
||||
**对比旧版本：**
|
||||
- 代码量减少 **75%+**（从 80+ 行到 20 行）
|
||||
- **无需手动引入** Vue、VueRouter、Vuex、ViewUI
|
||||
- **无需手动配置** 路由、状态管理
|
||||
- **自动处理** 菜单恢复、标题设置
|
||||
|
||||
👉 查看详细说明：[简化使用说明.md](./简化使用说明.md)
|
||||
|
||||
## 📦 项目结构
|
||||
|
||||
```
|
||||
admin-framework/
|
||||
├── src/ # 框架源码
|
||||
│ ├── api/ # API 接口
|
||||
│ ├── assets/ # 资源文件（样式、图片、字体）
|
||||
│ ├── components/ # 全局组件
|
||||
│ ├── config/ # 配置文件
|
||||
│ ├── router/ # 路由配置
|
||||
│ ├── store/ # Vuex 状态管理
|
||||
│ ├── utils/ # 工具函数
|
||||
│ ├── views/ # 页面组件
|
||||
│ │ ├── home/ # 主页
|
||||
│ │ ├── login/ # 登录页
|
||||
│ │ ├── system/ # 系统管理页面
|
||||
│ │ └── system/ # 高级系统页面
|
||||
│ └── index.js # 框架入口
|
||||
├── dist/ # 打包产物
|
||||
│ └── admin-framework.js # 框架打包文件（3.6 MB，内置所有依赖）
|
||||
├── demo-project/ # 完整示例项目 ⭐
|
||||
│ ├── src/
|
||||
│ │ ├── config/ # 配置
|
||||
│ │ ├── libs/ # 框架文件
|
||||
│ │ ├── views/ # 业务页面
|
||||
│ │ ├── App.vue
|
||||
│ │ └── main.js
|
||||
│ ├── README.md # Demo 使用说明
|
||||
│ └── INSTALL.md # 安装指南
|
||||
├── webpack.config.js # 构建配置
|
||||
├── package.json
|
||||
└── 完整使用文档.md # 详细文档
|
||||
|
||||
```
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 方式一：运行 Demo 项目（推荐）⭐
|
||||
|
||||
**Demo 项目现已更新为使用框架源码**，更方便调试和开发！
|
||||
|
||||
#### 🎯 一键启动
|
||||
|
||||
**Windows 用户**：
|
||||
```bash
|
||||
cd demo-project
|
||||
双击运行 start.bat
|
||||
```
|
||||
|
||||
**Linux/Mac 用户**：
|
||||
```bash
|
||||
cd demo-project
|
||||
chmod +x start.sh
|
||||
./start.sh
|
||||
```
|
||||
|
||||
#### 📝 手动启动
|
||||
|
||||
```bash
|
||||
# 1. 进入 demo 项目
|
||||
cd demo-project
|
||||
|
||||
# 2. 安装依赖（首次必须）
|
||||
npm install
|
||||
|
||||
# 3. 启动开发服务器
|
||||
npm run dev
|
||||
```
|
||||
|
||||
浏览器会自动打开 `http://localhost:8080`
|
||||
|
||||
#### 📚 Demo 项目文档
|
||||
|
||||
- [快速启动.md](./demo-project/快速启动.md) - 快速启动指南 ⭐
|
||||
- [README.md](./demo-project/README.md) - 项目说明
|
||||
- [CHANGELOG.md](./demo-project/CHANGELOG.md) - 更新日志（重要）
|
||||
- [INSTALL.md](./demo-project/INSTALL.md) - 安装指南
|
||||
- [PROJECT_STRUCTURE.md](./demo-project/PROJECT_STRUCTURE.md) - 项目结构说明
|
||||
|
||||
#### ⚠️ 重要提示
|
||||
|
||||
- Demo 项目现在**直接使用框架源码**（`../../src/index.js`）
|
||||
- **首次运行必须执行** `npm install` 安装新依赖
|
||||
- 如遇到错误，删除 `node_modules` 和 `package-lock.json` 后重新安装
|
||||
|
||||
### 方式二：构建框架
|
||||
|
||||
```bash
|
||||
# 1. 安装依赖
|
||||
npm install
|
||||
|
||||
# 2. 构建框架
|
||||
npm run build
|
||||
|
||||
# 3. 产物在 dist/admin-framework.js
|
||||
```
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
### 核心功能
|
||||
- ✅ **极简使用** - 只需 20 行代码启动完整系统
|
||||
- ✅ **内置依赖** - Vue、VueRouter、Vuex、ViewUI 全部内置
|
||||
- ✅ **自动配置** - 自动初始化路由、状态管理、菜单恢复
|
||||
- ✅ **主页组件** - 欢迎页面，自动显示系统标题
|
||||
- ✅ **系统管理页面** - 用户、角色、菜单等管理
|
||||
- ✅ **登录和错误页面** - 完整的登录流程和错误处理
|
||||
- ✅ **动态路由管理** - 基于权限的路由控制
|
||||
- ✅ **Vuex 状态管理** - 用户、应用状态管理
|
||||
- ✅ **内置样式** - base.less、animate.css、iconfont
|
||||
- ✅ **工具库** - HTTP、日期、Token 等工具
|
||||
|
||||
## 📚 文档
|
||||
|
||||
- **⚡ 快速开始**：[快速开始.md](./快速开始.md) - **5 分钟上手指南**
|
||||
- **🔥 简化使用说明**：[简化使用说明.md](./简化使用说明.md) - **详细对比和说明**
|
||||
- **完整使用文档**：[完整使用文档.md](./完整使用文档.md)
|
||||
- **Demo 项目说明**：[demo-project/README.md](./demo-project/README.md)
|
||||
- **安装指南**：[demo-project/INSTALL.md](./demo-project/INSTALL.md)
|
||||
|
||||
## 🎯 Demo 项目预览
|
||||
|
||||
Demo 项目包含：
|
||||
|
||||
1. **登录页面**（`/login`）
|
||||
- 完整的登录表单
|
||||
- 自动跳转功能
|
||||
|
||||
2. **主页**（`/home`）
|
||||
- 欢迎页面
|
||||
- 显示系统标题
|
||||
|
||||
3. **业务示例**（`/business/product`）
|
||||
- 产品列表（Table）
|
||||
- CRUD 操作示例
|
||||
- Modal、Message 使用
|
||||
|
||||
4. **系统页面**（框架内置）
|
||||
- 用户管理
|
||||
- 角色管理
|
||||
- 菜单管理
|
||||
|
||||
## 🔧 使用方式
|
||||
|
||||
### 1. 在新项目中使用
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Vuex from 'vuex'
|
||||
import ViewUI from 'view-design'
|
||||
import createPersistedState from 'vuex-persistedstate'
|
||||
import AdminFramework from './libs/admin-framework.js'
|
||||
import config from './config'
|
||||
|
||||
// 使用框架 - 自动完成所有初始化
|
||||
Vue.use(AdminFramework, {
|
||||
config,
|
||||
ViewUI,
|
||||
VueRouter,
|
||||
Vuex,
|
||||
createPersistedState
|
||||
})
|
||||
|
||||
// 创建 Vue 实例
|
||||
new Vue({
|
||||
router: AdminFramework.router,
|
||||
store: AdminFramework.store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
```
|
||||
|
||||
### 2. 按需使用组件
|
||||
|
||||
```javascript
|
||||
import { HomePage, SysUser, SysRole } from './libs/admin-framework.js'
|
||||
|
||||
// 在路由中使用
|
||||
const routes = [
|
||||
{ path: '/home', component: HomePage },
|
||||
{ path: '/system/user', component: SysUser }
|
||||
]
|
||||
```
|
||||
|
||||
## 📝 版本信息
|
||||
|
||||
**当前版本**: 1.0.0
|
||||
|
||||
**更新日志**:
|
||||
- v1.0.0 - 初始版本
|
||||
- ✅ 完整的系统管理功能
|
||||
- ✅ 主页组件
|
||||
- ✅ 登录和权限管理
|
||||
- ✅ 动态路由
|
||||
- ✅ 内置样式
|
||||
- ✅ Demo 示例项目
|
||||
|
||||
## 💻 技术栈
|
||||
|
||||
- Vue 2.6+
|
||||
- Vue Router 3.x
|
||||
- Vuex 3.x
|
||||
- View Design (iView) 4.x
|
||||
- Axios
|
||||
- Less
|
||||
- Webpack 5
|
||||
|
||||
## 🛠️ 开发
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 开发模式
|
||||
npm run dev
|
||||
|
||||
# 构建生产版本
|
||||
npm run build
|
||||
```
|
||||
|
||||
## 📄 许可证
|
||||
|
||||
MIT License
|
||||
|
||||
## 👨💻 作者
|
||||
|
||||
light
|
||||
|
||||
---
|
||||
|
||||
**祝开发愉快！** 🎉
|
||||
|
||||
如有问题，请查看[完整使用文档.md](./完整使用文档.md)或查看 Demo 项目示例。
|
||||
|
||||
|
||||
@@ -24,8 +24,15 @@ import Page500 from './error-page/500.vue'
|
||||
|
||||
// 设置组件映射的方法
|
||||
export function setupComponentMap(customMap = {}, uiTool) {
|
||||
|
||||
if (!customMap["home/index"]) {
|
||||
customMap["home/index"] = HomePage
|
||||
}
|
||||
else {
|
||||
HomePage = customMap["home/index"]
|
||||
}
|
||||
|
||||
const componentMap = {
|
||||
'home/index': HomePage,
|
||||
'system/sys_log': SysLog,
|
||||
'system/sys_param_setup': SysParamSetup,
|
||||
'system/sys_role': SysRole,
|
||||
|
||||
Reference in New Issue
Block a user