# vue2-admin

**Repository Path**: fly_do/vue2-admin

## Basic Information

- **Project Name**: vue2-admin
- **Description**: 关于权限框架前端展示，后台接口在https://gitee.com/fly_do/sb-security中
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-09
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2-admin

一个基于 Vue 2 的后台管理系统模板，提供完整的布局和常用管理页面，适用于快速搭建企业级后台应用。

## 功能特性

- **完整布局**：包含顶部导航栏、可折叠侧边栏和主内容区域
- **多级菜单**：支持多级导航菜单，适配复杂路由结构
- **路由管理**：集成 Vue Router，实现页面间平滑切换
- **页面动画**：路由切换时添加过渡动画，提升用户体验
- **常用页面**：提供用户管理、角色管理、权限管理、产品管理、订单管理等常用模块

## 目录结构

```
├── src
│   ├── layout                  # 布局组件
│   │   ├── AppMain.vue         # 主内容区域
│   │   ├── Header.vue          # 顶部导航栏
│   │   ├── Sidebar.vue         # 侧边栏菜单
│   │   └── index.vue           # 布局入口
│   ├── views                   # 页面组件
│   │   ├── Dashboard.vue       # 首页仪表板
│   │   ├── Login.vue           # 登录页面
│   │   ├── Profile.vue         # 用户中心
│   │   ├── Settings.vue        # 系统设置
│   │   ├── Users.vue           # 用户管理
│   │   ├── Roles.vue           # 角色管理
│   │   ├── Permissions.vue     # 权限管理
│   │   ├── Products.vue        # 产品管理
│   │   ├── Orders.vue          # 订单管理
│   │   └── ...                 # 其他业务页面
│   ├── router
│   │   └── index.js            # 路由配置
│   └── api                     # 接口请求文件
│       ├── product.js          # 产品相关接口
│       ├── supplier.js         # 供应商相关接口
│       ├── emp.js              # 员工相关接口
│       └── categorie.js        # 分类相关接口
```

## 安装与启动

1. 安装依赖

```bash
npm install
```

2. 启动开发服务器

```bash
npm run serve
```

3. 打开浏览器访问

```
http://localhost:8080
```

## 使用说明

- **布局组件**：所有页面使用 `layout/index.vue` 作为基础布局
- **菜单控制**：通过 `Header.vue` 中的按钮控制侧边栏的展开与收起
- **路由导航**：在 `Sidebar.vue` 中配置菜单项，自动匹配路由
- **页面切换**：`AppMain.vue` 中的 `router-view` 实现动态页面加载

## 技术栈

- Vue 2.x
- Vue Router
- Element UI
- axios
- Sass

## 许可证

MIT License，详见 [LICENSE](LICENSE) 文件。