# 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 用户**：
```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
```

## ✨ 特性

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

## 📚 文档

- **完整使用文档**：[完整使用文档.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 项目示例。