<div align="center"><img src="http://qingqingxuan.gitee.io/img/logo.png" /></div>

<h1 align = "center">vue-admin-work</h1>

## 项目演示地址：

- [🚀🚀🚀🚀 官网&文档地址 🚀🚀🚀🚀](http://qingqingxuan.gitee.io/work-p-site)

- [🎉Vue Admin Work 演示地址（Vue2.x + Javascript + Element UI + Webpack）](http://qingqingxuan.gitee.io/vue-admin-work)

- [🎉Admin Work 演示地址（Vue3.x + Tavascript + Naive UI + Vite2](http://qingqingxuan.gitee.io/admin-work)

* [🚀 Admin Work 源码地址 🚀](http://github.com/qingqingxuan/admin-work)

- [🎉Vue Admin Work X 演示地址（Vue3.x + Tavascript + Element Plus + Webpack）](http://qingqingxuan.gitee.io/vue-admin-work-x)

* [🚀 Vue Admin Work X 源码地址 🚀](http://github.com/qingqingxuan/vue-admin-work-x)

- [🎉Vue Admin Work P 演示地址（Vue3.x + Tavascript + Naive UI + Vite2](http://qingqingxuan.gitee.io/vue-admin-work-p)

* [🚀 Vue Admin Work P 源码地址 🚀](http://qingqingxuan.gitee.io/work-p-site)

## vue-admin-work 前端讨论群及 QQ 客服

| <img src="http://qingqingxuan.gitee.io/img/qq-custom.png" style="zoom:20%;" /> | <img src="http://qingqingxuan.gitee.io/img/qq-vip-group.png" style="zoom:20%;" /> |
| :----------------------------------------------------------------------------: | :-------------------------------------------------------------------------------: |


## 关注微信公众号 `知码前端` 方便以后更新、升级

<div align="center"><img src="http://qingqingxuan.gitee.io/img/wx-service.jpg"/></div>

## 适合人群

- 正在以及想使用 vue/element-ui 开发，最好是有一定的编程知识，或者原来只从事切图写静态页的人想提高自己的前端能力。
- 熟悉 Vue.js 技术栈，使用它开发过几个实际项目。
- 对原理技术感兴趣，想进阶和提升的同学。

## 下载&安装

```shell
# 克隆项目
git clone -b master https://github.com/qingqingxuan/vue-admin-work.git
# 进入项目目录
cd vue-admin-work
# 安装依赖
npm i
# 本地开发 启动项目
npm run serve
```

## 特别感谢

| **🚀 [vue2.x](https://cn.vuejs.org/)**                     |
| ---------------------------------------------------------- |
| **[🚀 element-ui](https://element.eleme.cn/)**             |
| **[🚀 vue-router](https://router.vuejs.org/)**             |
| **[🚀 vuex](https://vuex.vuejs.org/)**                     |
| **[🚀 axios](http://www.axios-js.com/)**                   |
| **[🚀 mockjs](http://mockjs.com/)**                        |
| **[🚀 echarts](https://echarts.apache.org/zh/index.html)** |

## 优势及注意事项

```tex
vue-admin-work 有如下优势:
1. 支持前端控制路由权限和后端控制路由模式
2. 支持 mock ，完全独立于后台
3. 提供了非常多的 mxin 代码块，方便集成各种功能
4. 内置了大量常用的组件，比如，上传，消息提示等
5. 支持多主题、多布局切换
使用注意事项:
1. 项目默认使用使用vscode工具进行开发，也是唯一推荐的开发工具
2. 项目默认eslint校验规范
3. 项目仅供个人或者团队学习商用。
```

## 效果图

| <img src="http://qingqingxuan.gitee.io/img/project-image-1.png" style="zoom:20%;" /> | <img src="http://qingqingxuan.gitee.io/img/project-image-2.jpg" style="zoom:20%;" /> |
| :----------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------ |
| <img src="http://qingqingxuan.gitee.io/img/project-image-3.png" style="zoom:20%;" /> | <img src="http://qingqingxuan.gitee.io/img/project-image-4.png" style="zoom:20%;" /> |
| <img src="http://qingqingxuan.gitee.io/img/project-image-5.png" style="zoom:20%;" /> | <img src="http://qingqingxuan.gitee.io/img/project-image-6.png" style="zoom:20%;" /> |
| <img src="http://qingqingxuan.gitee.io/img/project-image-7.png" style="zoom:20%;" /> | <img src="http://qingqingxuan.gitee.io/img/project-image-8.png" style="zoom:20%;" /> |

本项目是开源项目，开源不易，还请各们小主赏杯咖啡，以更好的维护此项目。您的支持是我们前进的最大动力。

| <img src="http://qingqingxuan.gitee.io/img/wx-donation.jpg" style="zoom:20%;" /> | <img src="http://qingqingxuan.gitee.io/img/ali-donation.jpg" style="zoom:20%;" /> |
| :------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------: |

