# vue3.0-template-admin

**Repository Path**: anydev/vue3.0-template-admin

## Basic Information

- **Project Name**: vue3.0-template-admin
- **Description**: 本项目基于vue3+ElementPlus+Typescript+Vite搭建一套通用的后台管理模板；并基于常见业务场景，抽象出常见功能组件；包括动态菜单，菜单权限、登录、主题切换、国际化、个人中心、表单页、列表页、复制文本、二维码分享等等
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: add-license-1
- **Homepage**: https://geekqiaqia.github.io/vue3.0-template-admin/#/login?redirect=/home
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-13
- **Last Updated**: 2024-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3.0-template-admin

<p align="center">
Vue3.0:
<a href="https://www.npmjs.com/package/vue/v/next">
    <img src="https://img.shields.io/npm/v/vue/next.svg" alt="vue">
  </a>
  </br>
  Vite ⚡:
    <a href="https://npmjs.com/package/vite"><img src="https://img.shields.io/npm/v/vite.svg" alt="npm package"></a>
  </br>
Element-plus:
<a href="https://www.npmjs.org/package/element-plus">
<img src="https://img.shields.io/npm/v/element-plus.svg">
</a>

</p>

- 💪 Vue 3.0 Composition API
- 🔥 Written in TypeScript
- 🏠 预览 [vue3.0-template-admin](https://geekqiaqia.github.io/vue3.0-template-admin/#/login?redirect=/home)

## ⭐️ Show your support

Give a ⭐️ if this project helped you!

## 已完成功能 | The functionality is complete

- [x] Element Plus
- [x] N+1 多级菜单
- [x] Dashboard
- [x] 表格
- [x] router Tab 选项卡
- [x] 表单
- [x] 图表 :antv echart
- [x] 二维码生成
- [x] 拖拽组件
- [x] 富文本编辑器
- [x] markdown 编辑器
- [x] 个人页
- [x] 登录页
- [x] 404 / 403
- [x] 菜单管理
- [x] 角色管理
- [x] 自定义图标
- [x] 图片拖拽/裁剪

## 正在完成功能 | The functionality is being completed

- [x] 支持切换主题色:一键换肤
- [x] 权限：v-permisson
- [x] 可拖拽弹窗
- [x] 国际化

## 使用到的插件/库 | Plugin or lib

- **eslint-plugin-vue** [eslint-plugin-vue](https://eslint.vuejs.org/user-guide/#faq)
- **axios** 强大的前端请求库
- **fues.js** [fues.js Fuzzy Search 前端模糊搜索](https://github.com/krisk/Fuse)
- **echart** [echart 数据可视化](http://echarts.apache.org/zh/index.html)
- **antv** [antv 蚂蚁数据可视化](https://antv.vision/zh)
- **xlsx** [xlsx SheetJS ](https://www.npmjs.com/package/xlsx)
- **mockjs** [mockjs 模拟和交互数据](http://mockjs.com/)
- **wangeditor** [wangeditor 富文本编辑器](https://www.wangeditor.com/doc/)

## 合作优质项目 | Partner project

- [h5-Dooring - H5-Dooring 是一款功能强大，专业可靠的 H5 可视化页面配置解决方案](https://github.com/MrXujiang/h5-Dooring)
- [Blink - 一款自定义的生成故障艺术动画的组件库](https://github.com/MrXujiang/blink)
- [frontend-developer-roadmap | 一个能提高开发者工作效率的前端 js 库汇总](https://github.com/MrXujiang/frontend-developer-roadmap)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!.

## 快速启动 | Quick Start

```
# 克隆项目
git clone https://github.com/GeekQiaQia/vue3.0-template-admin.git

# 进入项目目录
cd vue3.0-template-admin

# 安装依赖
npm install

# 启动服务
npm run dev

```

## git 提交 | git commit

     git add *  // add everything

     git status  // check status

     git cz  // commit change

     git push // push stage commit

## 持续升级 | Continuous upgrades

敬请期待...

## 快照 | screen shots

### 全屏功能

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17ee79df049c4536a73177e4ae086650~tplv-k3u1fbpfcp-watermark.image)

### tab 标签页

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35d69fce489445f58cfa1a4f1962553b~tplv-k3u1fbpfcp-watermark.image)

### 首页

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e7a8852ae924151acc5e416fb91bf6a~tplv-k3u1fbpfcp-watermark.image)

### Dashboard

#### 工作台

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6586b8a2a6d42e9844519217f277b74~tplv-k3u1fbpfcp-watermark.image)

#### 分析页

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5ff3edaf9f644e6b148acabbada9241~tplv-k3u1fbpfcp-watermark.image)

### 复制文本

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7272b219e496438898a3fb7d81859087~tplv-k3u1fbpfcp-watermark.image)

### 列表页

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bacbafba94094ea8a0e8659b0bec382c~tplv-k3u1fbpfcp-watermark.image)

### 表单页

#### 基础表单

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6db9c82b879d4b10bda9507a334698fd~tplv-k3u1fbpfcp-watermark.image)

#### 分步表单

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42ae54a0b94044f8aa9c844d201da213~tplv-k3u1fbpfcp-watermark.image)

#### 高级表单

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b255c09f13e4b2cbab2b8d6696d0cb2~tplv-k3u1fbpfcp-watermark.image)

### 二维码

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b06fc12a50b047699c6fb3c556af05a3~tplv-k3u1fbpfcp-watermark.image)

### 个人中心

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4c53c2dc9dc4ceb8a7606dbd60f2a6e~tplv-k3u1fbpfcp-watermark.image)

### 个人设置

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c361ca504b1a4396929bd33730bdb350~tplv-k3u1fbpfcp-watermark.image)

<!-- ### 主题设置

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc192a56d9104cd3b8404b37c024ac76~tplv-k3u1fbpfcp-watermark.image) -->

### 拖拽组件

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fa6e9b7f60a440196b6b7b8586dc64f~tplv-k3u1fbpfcp-watermark.image)

### 菜单管理

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8dcdc968093348c8a2cfe2f6d17c2c59~tplv-k3u1fbpfcp-watermark.image)

### 角色管理

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d3e75f06808445ba3aab88186633d4e~tplv-k3u1fbpfcp-watermark.image)