# spry-admin-vue2

**Repository Path**: pan_pan88/spry-admin-vue2

## Basic Information

- **Project Name**: spry-admin-vue2
- **Description**: 适合企业应用的Vue2Admin
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2024-06-30
- **Last Updated**: 2025-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: ES6

## README

<p align="center">
  <!-- <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg"> -->
</p>


<p align="center">
<img src="https://img.shields.io/badge/vue-2.7.14-blue" alt="vue">
<img src="https://img.shields.io/badge/element%20ui-2.15.14-SpringGreen" alt="element">
<img src="https://img.shields.io/badge/license-MIT-Cyan" alt="license">
</p>

# spry-admin-vue2

<a href="#">
<img src="https://img.shields.io/badge/spry%20admin%20vue2-v1.0.0-BabyBlue" alt="spry-admin-vue2">
</a>

spry-admin-vue2是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。内置了 i18n 国际化，动态路由，权限验证，是一个面向企业应用程序的开箱即用解决方案。

## 功能

```
- 登录 / 注销
- 首页
- 个人中心
- 字典管理
- 岗位管理
- 角色管理
- 组织管理
- 菜单管理
- 用户管理
- 权限管理
```

## 特点

针对常用的场景，基于ElementUI二次开发了方便使用的组件（如下）。
```
- 表单：CommForm
- Dialog弹框：FormDialog
- Table：FlexTable
```
让开发以数据模型为中心，只需绑定数据即可展示页面，节省开发时间，提高开发效率。尤其友好后端开发人员。

使用例子：
```
orgAddFormLayout() {
  const formItems = [
    elg.createSelectTree(this, { bindId: 'parentId', ...
    elg.createInput(this, { bindId: 'orgId' }),
    elg.createInput(this, { bindId: 'orgName' }),
    elg.createInputNumber(this, { bindId: 'sortOrder' }),
    elg.createSelect(this, ...
    elg.createTextArea(this, { bindId: 'memo' })
  ]
  ... ...
},
```

```
<form-dialog
  v-if="formObj.addForm.showFlg.org"
  ... ...
  :form-definition="orgAddFormLayout"
  @close="formObj.addForm.showFlg.org = false"
/>
```
### 页面截图
<p align="center">
<img src="https://gitee.com/pan_pan88/spry-admin-vue2/raw/master/imgs/login.png">
<img src="https://gitee.com/pan_pan88/spry-admin-vue2/raw/master/imgs/profile.png">
<img src="https://gitee.com/pan_pan88/spry-admin-vue2/raw/master/imgs/menu.png">
<img src="https://gitee.com/pan_pan88/spry-admin-vue2/raw/master/imgs/permission.png">
<img src="https://gitee.com/pan_pan88/spry-admin-vue2/raw/master/imgs/user.png">
<img src="https://gitee.com/pan_pan88/spry-admin-vue2/raw/master/imgs/dict.png">
</p>


## 开发

```bash
# 克隆项目
git clone https://gitee.com/pan_pan88/spry-admin-vue2.git

# 进入项目目录
cd spry-admin-vue2

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev
```

## Online Demo

[在线 Demo](#) ：Opening soon ... ...

## License

[MIT]

Copyright (c) 2024-present PanFeng