# vue-gkd-admin

**Repository Path**: zjh95/vue-gkd-admin

## Basic Information

- **Project Name**: vue-gkd-admin
- **Description**: 基于 Vue + Element UI 的后台管理系统解决方案
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 2
- **Created**: 2020-06-26
- **Last Updated**: 2024-07-28

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

# vue-gkd-system

<a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
  </a>
  <a href="https://gitee.com/pigman17/vue-gkd-admin/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  </a>
  <a href="https://gitee.com/pigman17/vue-gkd-admin/releases">
    <img src="https://img.shields.io/badge/releases-v1.0.0-blue" alt="GitHub release">
  </a>

基于 Vue + Element UI 的后台管理系统解决方案。
<br>[线上地址](http://gkd.plus:8081)

> 如果说vue-element-admin太重，其他现有的框架样式又太乱，那么这就是你的选择 —— 鲁迅

[English document](https://gitee.com/pigman17/vue-gkd-admin/blob/dev/README_EN.md)

## 项目截图

### 登录

![Image text](screenshots/login.png)

### 默认布局

![Image text](screenshots/layout1.png)


## 赞赏

请作者喝杯咖啡吧！(微信号：13686524458)

![微信扫一扫](screenshots/weixin.jpg)

## 前言

该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统。
<br>在多环境的基础上继承了docker部署
<br>样式参考 [cool-admin](https://www.cool-admin.com/) 做的，因此仅供个人开发用

## 功能

-   [x] Element UI
-   [x] 登录/注销
-   [x] Dashboard
-   [x] 表格
-   [x] Tab 选项卡
-   [x] 表单
-   [x] 图表 :bar_chart:
-   [x] 富文本编辑器
-   [x] markdown 编辑器
-   [x] 图片拖拽/裁剪上传
-   [x] 支持切换主题色 :sparkles:
-   [x] 列表拖拽排序
-   [x] 权限测试
-   [x] 404 / 403
-   [x] 三级菜单
-   [x] 自定义图标
-   [x] 可拖拽弹窗
-   [x] 国际化

## 安装步骤

```
git clone https://gitee.com/pigman17/vue-gkd-admin
cd vue-gkd-admin
npm install 
// 开启服务器，浏览器访问 http://localhost:8080
npm run serve
// 执行构建命令，环境的测试环境，生成的dist文件夹放在服务器下即可访问
npm run build:dev
// 执行构建命令，生成docker镜像、上传私有库、在本地生成容器，docker相关配置位于run.sh中
npm run build:dev:docker
```

## 组件使用说明与演示

### 组件建议

```$xslt
通常，一个组件涉及到API的，只在 xxx/index.vue 下实现
其他组件，如 tree、table 等，只传递数据显示视图，不会涉及到API
同时，props暴露data，其中data要标注好属性（供外部调用和同步数据用）
命名方面
    通用组件引入时采用全大写驼峰，如 FormDialog
    业务组件，如table相关，则用小写开头，例如 userForm, userTable


```

## 其他注意事项

### 待补充

## License

[MIT](https://gitee.com/pigman17/vue-gkd-admin/blob/dev/LICENSE)