Awesome

<div align="center"> <img src="http://qingqingxuan.gitee.io/img/logo.png" align="center" width="150" height="150"/> </div> <p align="center"> <a href="./LICENSE"> <img src="https://img.shields.io/github/license/qingqingxuan/admin-work" alt="MIT License" /> </a> <a href="https://v3.cn.vuejs.org/"> <img src="https://img.shields.io/badge/vue.js-3.0-green" alt="Vue3.0"> </a> <a href="http://p.vueadminwork.com"> <img src="https://img.shields.io/badge/🚀-open--in--browser-blueviolet" alt="Live Demo"> </a> </p> <h1 align = "center">Admin Work X</h1>

简介：

Admin Work X，是 Vue Admini Work 系列中最成熟和完善的中后台框架，全面的系统配置，优质模板，常用组件，真正一站式开箱即用采用时下最流行的 Vue3 UI 库--NaiveUI

使用了当今最流行的技术框架： Vue3 + Webpack + Typescript + Element Plus

特性：

常用模板
- 内置常用模板，无需考虑交互排版，助你高效开发
预设样式
- 样式美观大方，无缝对接 Naive Ui，随意组合页面，随心所欲
布局方案
- 丰富的布局模式，具有高可配性，满足您的各类布局需求
技术支持
- 优质的售后技术支持，完善的文档，让您事半功倍
最新技术栈
- 基于 Vue3、Vite2、TypeScript、NaiveUI、Pinia 等最新技术栈开发
轻量快速的热重载
- 无论应用程序大小如何，都始终极快的模块热重载（HMR）
丰富的示例
- 常见的 Web 端插件示例实现
组件封装
- 对日常使用频率较高的组件二次封装,满足基础工作需求
主题配置
- 丰富的主题配置及黑暗主题适配
权限管理
- 完善的前后端权限管理方案

项目地址：

Vue Admin Work 系列中其它开源项目的演示地址

现在微信技术交流群需要添加好友之后邀请，如需要入群讨论请关注微信公众号添加好友。

请关注我们的微信公众号 `知码前端` ，里面包含了各个版本的源码和进入微信福利群的方式

适合人群

正在以及想使用 vue/element-plus 开发，最好是有一定的编程知识，或者原来只从事切图写静态页的人想提高自己的前端能力。
熟悉 Vue.js 技术栈，使用它开发过几个实际项目。
对原理技术感兴趣，想进阶和提升的同学。

下载&安装

下载

git clone -b master https://github.com/qingqingxuan/vue-admin-work-x.git

进入项目目录
```
cd admin-work-x
```
安装依赖
```
npm install
```
运行
```
npm run dev
```

如何贡献

非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request。

Pull Request:

Fork 代码!
创建自己的分支: git checkout -b feat/xxxx
提交你的修改: git commit -am 'feat(function): add xxxxx'
推送您的分支: git push origin feat/xxxx
提交pull request

Git 贡献提交规范

参考 vue 规范 (Angular)
- feat 增加新功能
- fix 修复问题/BUG
- style 代码风格相关无影响运行结果的
- perf 优化/性能提升
- refactor 重构
- revert 撤销修改
- test 测试相关
- docs 文档/注释
- chore 依赖更新/脚手架配置修改等
- workflow 工作流改进
- ci 持续集成
- types 类型定义文件更改
- wip 开发中

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" /></br>IE	<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" /></br>Edge	<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /></br>Firefox	<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /></br>Chrome	<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /></br>Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

特别感谢

🚀 vue3.x
🚀 element-plus
🚀 vue-router-next
🚀 pinia
🚀 axios
🚀 mockjs
🚀 echarts

优势及注意事项

vue-admin-work 有如下优势:
1. 支持前端控制路由权限和后端控制路由模式
2. 支持 mock ，完全独立于后台
3. 提供了非常多的 mxin 代码块，方便集成各种功能
4. 内置了大量常用的组件，比如，上传，消息提示等
5. 支持多主题、多布局切换
使用注意事项:
1. 项目默认使用使用vscode工具进行开发，也是唯一推荐的开发工具
2. 项目默认eslint校验规范

效果图

<img src="http://qingqingxuan.gitee.io/img/demo-arco-1.png" style="zoom:20%;" />	<img src="http://qingqingxuan.gitee.io/img/demo-arco-2.png" style="zoom:20%;" />
<img src="http://qingqingxuan.gitee.io/img/demo-arco-3.png" style="zoom:20%;" />	<img src="http://qingqingxuan.gitee.io/img/demo-arco-4.png" style="zoom:20%;" />
<img src="http://qingqingxuan.gitee.io/img/demo-arco-5.png" style="zoom:20%;" />	<img src="http://qingqingxuan.gitee.io/img/demo-arco-6.png" style="zoom:20%;" />