Admin Framework

一个基于 Vue2 的通用后台管理系统框架，包含完整的系统功能、登录、路由管理、布局等核心功能。

📦 项目结构

admin-framework/
├── src/                    # 框架源码
│   ├── api/               # API 接口
│   ├── assets/            # 资源文件（样式、图片、字体）
│   ├── components/        # 全局组件
│   ├── config/            # 配置文件
│   ├── router/            # 路由配置
│   ├── store/             # Vuex 状态管理
│   ├── utils/             # 工具函数
│   ├── views/             # 页面组件
│   │   ├── home/         # 主页
│   │   ├── login/        # 登录页
│   │   ├── system/       # 系统管理页面
│   │   └── system_high/  # 高级系统页面
│   └── index.js          # 框架入口
├── dist/                  # 打包产物
│   └── admin-framework.js # 框架打包文件（1.64 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 用户：

cd demo-project
双击运行 start.bat

Linux/Mac 用户：

cd demo-project
chmod +x start.sh
./start.sh

📝 手动启动

# 1. 进入 demo 项目
cd demo-project

# 2. 安装依赖（首次必须）
npm install

# 3. 启动开发服务器
npm run dev

浏览器会自动打开 http://localhost:8080

📚 Demo 项目文档

• 快速启动.md - 快速启动指南 ⭐
• README.md - 项目说明
• CHANGELOG.md - 更新日志（重要）
• INSTALL.md - 安装指南
• PROJECT_STRUCTURE.md - 项目结构说明

⚠️ 重要提示

• Demo 项目现在直接使用框架源码（../../src/index.js）
• 首次运行必须执行 npm install 安装新依赖
• 如遇到错误，删除 node_modules 和 package-lock.json 后重新安装

方式二：构建框架

# 1. 安装依赖
npm install

# 2. 构建框架
npm run build

# 3. 产物在 dist/admin-framework.js

✨ 特性

• ✅ 主页组件 - 欢迎页面，自动显示系统标题
• ✅ 系统管理页面 - 用户、角色、菜单等管理
• ✅ 登录和错误页面 - 完整的登录流程和错误处理
• ✅ 动态路由管理 - 基于权限的路由控制
• ✅ Vuex 状态管理 - 用户、应用状态管理
• ✅ 内置样式 - base.less、animate.css、iconfont
• ✅ 工具库 - HTTP、日期、Token 等工具

📚 文档

• 完整使用文档：完整使用文档.md
• Demo 项目说明：demo-project/README.md
• 安装指南：demo-project/INSTALL.md

🎯 Demo 项目预览

Demo 项目包含：

1. 登录页面（/login）

   • 完整的登录表单
   • 自动跳转功能

2. 主页（/home）

   • 欢迎页面
   • 显示系统标题

3. 业务示例（/business/product）

   • 产品列表（Table）
   • CRUD 操作示例
   • Modal、Message 使用

4. 系统页面（框架内置）

   • 用户管理
   • 角色管理
   • 菜单管理

🔧 使用方式

1. 在新项目中使用

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. 按需使用组件

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

🛠️ 开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

📄 许可证

MIT License

👨‍💻 作者

light

---

祝开发愉快！ 🎉

如有问题，请查看完整使用文档.md或查看 Demo 项目示例。