Projects using vue-element-admin

[PanJiaChen]

有不少项目基于 vue-element-admin 或者 vue-admin-template 进行了二次分装。
如果自己觉得不错的，可以在这里贴出来，方便其他人借鉴。

[enilu]

用群主的框架，撸了个前后台分离的后台管理系统，后台用SpringBoot。有兴趣的同学可以看看
https://github.com/enilu/web-flash

[wmhello]

群主这个系统太好了，
2年前我就结合群主的框架，开发了一个前后台分离的后台管理系统并开源了出来，后端用PHP（laravel ）。有需要的朋友可以看看。
开源项目：https://github.com/wmhello/laravel_template_with_vue
在线Demo：https://element.wmhello.cn （账号/密码：admin/123456）

系统特色：
1.使用workerman框架中的GatewayWorker来实现了websocket通讯，实现了聊天室、客服和单点登录功能。
2.基础的用户管理、角色管理和权限管理，实现了RBAC。
3.能分析数据表及其相关配置，实现快速且自动生成代码。
4.有小程序端和微信公众号端的相关目录，已经对接好各种接口。

本人全栈 需要前后端分离开发项目辅导的 也可以私下联系我 微信号是xpyzwm

构建该系统相关的技术视频:
利用vue.js和vue-element-admin开发管理系统
学习视频： https://v.qq.com/x/page/i3059zqgj4y.html

利用Laravel开发RESTful API
学习视频: https://v.qq.com/x/page/t3059mfpgkg.html

利用PHP开发微信公众号
学习视频: https://url.cn/5d4wWGl?sf=uri

[PasserbyFluid]

结合本项目开发的一个电商用户订单管理系统 包括electron版本
https://github.com/PasserbyFluid/vue-admin

[lmxdawn]

借鉴本项目实现的前后端分离的后台管理系统，内附后端 java 版本 和 PHP 版本

https://github.com/lmxdawn/vue-admin-html

[tuandm]

Thanks @PanJiaChen.

Laravel version for vue-element-admin which uses Laravel itself as API server, Laravel's users for authentication, and more useful features.

https://github.com/tuandm/laravue

[PanJiaChen]

Frontend-Backend template: vue-element-frontend-backend by @laoseng005

[PanJiaChen]

基于vue-element-admin实现的前后台分离项目，后台接口（springboot）
vue-link-admin

[bihell]

弄了一个分离的个人内容管理系统：目前实现了「博客」、「代码段」、「媒体库」等功能

管理页面使用的是vue-element-admin , 项目地址 Dice

管理页面截图：

[solopromiguel]

some project angular2-element-vue ?

[enilu]

用群主的框架，撸了个商城系统(后台管理的界面使用群主的框架，包括H5,小程序，app），后台用SpringBoot,。有兴趣的同学可以看看
gitee: https://gitee.com/microapp/linjiashop
github: https://github.com/microapp-store/linjiashop

[szhjia]

用群主的ad框架做了2个大型国企的多个定制开发项目，后台用flask，感谢。

[cat998]

实现了一个electron版本，但是还有些问题，希望有大佬能帮忙解决一下

[tang-yue]

前端简单干净模版框架。https://github.com/tang-yue/vue-element-admin-template。

[iiicon]

前端简单干净模版框架。https://github.com/tang-yue/vue-element-admin-template。

句号真秀

[NLRX-WJC]

大佬，仿照你的项目做了个react+antd版的，向大佬致敬
项目地址：https://github.com/NLRX-WJC/react-antd-admin-template
在线预览：https://nlrx-wjc.github.io/react-antd-admin-template/
向大佬致敬！

[Sawyerlsy]

我们团队根据这个做了个Java企业级开发框架，是基于微服务的敏捷开发平台，前后端分离，前端支持主题切换、顶部菜单等，后台除了常用的数据权限外，还支持代码自动生成、工作流、报表生成、数据范围限制等功能#Vue+SpringCloud
前端：https://www.jeegenius.com/demo1
后台：

[hooray]

虽然不是二次开发，但前期给了我很多开发上的灵感
欢迎大家来体验 Fantastic-admin
https://hooray.gitee.io/fantastic-admin/

[cdfan]

各位大佬，项目求star，博客求一键三连~
下面我弄的一个开源项目，可直接作为一个系统的基础平台

演示地址：http://101.34.139.112/ （账号/密码：admin/123456）

项目地址：
github：https://github.com/cdfan/my-admin
gitee：https://gitee.com/cdfan/my-admin

博客：https://blog.csdn.net/f4112cd

提示：该项目虽然支持移动端不过为了有更好的体验还是建议在PC端访问哈，还有弄个域名还要备案有点麻烦所以先将就着用ip访问吧

[pleaseyang]

用群主的框架，写了个基础后台，后台用Laravel。欢迎fork&start, 不合理的地方也欢迎批评指正

DEMO

http://pleaseyang.gitee.io/ity-show

账号 look 密码 123456

PHP

https://gitee.com/pleaseyang/Ity

https://github.com/pleaseyang/Ity

VUE

https://gitee.com/pleaseyang/ItyWeb

https://github.com/pleaseyang/ItyWeb

[doterlin]

没有node做后端的版本，蓝受

[jager9418]

后端用Django，前端用Vue，用户管理部分借鉴vue-element-admin，我是不是大材小用了

[mxin-d]

首先感谢作者，

本地 electron 客户端开发，集成了 vue-element-admin
项目地址：https://github.com/mxin-d/electron-admin

截图：

[RainManGO]

感谢花裤衩和Armour大神
vue3出来了，个人比较喜欢Composition API,用Vue3+TS+element-plus写了一个版本来踩下坑。

项目地址：https://github.com/rcyj-FED/vue3-composition-admin

刚开始写完，喜欢的可以一起优化完善。

[Smecta]

有没有基于SSO单点登录的简洁模版？

[hackycy]

基于NestJs + TypeScript + TypeORM + Redis + MySql + Vue + Element-UI编写的一款简单高效的前后端分离的权限管理系统

后台项目地址：https://github.com/hackycy/sf-nest-admin
前端项目地址：https://github.com/hackycy/sf-vue-admin
预览地址：http://opensource.admin.si-yee.com

账号：openadmin
密码：123456

有兴趣的小伙伴可以来看看丫

[furqon]

i just create your template with postgraphile as backend, a simple one on user/jwt/login part
https://github.com/furqon/graphile-element

your admin template are the best by far, thank you

[pdsuwwz]

感谢作者开源 ~

借鉴本项目开发了一个炒鸡简洁的基础模板：

项目地址： https://github.com/pdsuwwz/vue-element-admin
演示地址： https://pdsuwwz.github.io/vue-element-admin

有需要的小伙伴可以看下 😋

[mouday]

感谢@PanJiaChen 提供的项目模板，基于vue-admin-template，我做了一些开发中用到功能的扩展，算是一个简单的Demo,持续完善中

代码地址：https://github.com/mouday/vue-element-admin-demo

预览地址：https://mouday.github.io/vue-element-admin-demo

[giserman001]

我们团队根据这个做了个Java企业级开发框架，是基于微服务的敏捷开发平台，前后端分离，前端支持主题切换、顶部菜单等，后台除了常用的数据权限外，还支持代码自动生成、工作流、报表生成、数据范围限制等功能#Vue+SpringCloud
前端：https://www.jeegenius.com/demo1
后台：

你的demo打不开了 可否开源一下

[giserman001]

各位大佬，谁有头部菜单和左边菜单共存的后台管理系统demo

[webszy]

移除了vue-admin-template中sass代码，感觉后台管理系统用sass没什么必要，反而每次安装node-sass都很麻烦。https://github.com/webszy/vue-admin-template-removeSass

[nanedo]

移除了vue-admin-template中sass代码，感觉后台管理系统用sass没什么必要，反而每次安装node-sass都很麻烦。https://github.com/webszy/vue-admin-template-removeSass

用sass替代node-sass即可，JavaScript实现的。

npm install -g sass

[phoenixor]

感谢花裤衩和Armour大神 vue3出来了，个人比较喜欢Composition API,用Vue3+TS+element-plus写了一个版本来踩下坑。

项目地址：https://github.com/rcyj-FED/vue3-composition-admin

刚开始写完，喜欢的可以一起优化完善。

正在找vue3+elementPlus的替代品，打开就爱上UI了，谢谢你的分享

[mvpyb]

感谢花裤衩，我用vue3.X， 和 React 全家桶系列，分别搞了 VUE3 版本 和 React 17.x 版本的后台，欢迎star支持
react ： https://github.com/mvpyb/react-ant-admin
vue 3 ： https://github.com/mvpyb/vite-element-plus-admin

[it234]

golang+vue-element-admin: https://github.com/it234/goapp

[mi-saka10032]

脚手架从vue-cli切换成了vite，算是提高一点开发速度吧，适合技术栈沿用vue2的小伙伴使用。
element-admin项目中的一些bug，比如tui-editor安装失败的问题也替换成了相似的editor，tinymce的汉化js和样式文件因为url请求很卡所以也放到了public，除此之外还有一些只支持cjs不支持esm的包，相应做了一些本地化处理
vite-element-template：https://github.com/mi-saka10032/vite-element-template
vite-element-admin：https://github.com/mi-saka10032/vite-element-admin

[Raznak]

Hello,
I use your template for the Open Source Project: LightOwl

Thank you !

[mvpyb]

基于大佬模板得思路，搞了一个 vue3(vite + vue3 + element plus + pinia ) 和一个 react （react + antd + redux toolkit）版本，

简介

Vite Element Admin 是一个免费开源的中后台模版。使用了最新的vue3,vite2,pinia等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。

特性

• 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发
• Mock 数据 内置 Mock 数据方案
• 权限 内置完善的动态路由权限生成方案
• 组件 二次封装了多个常用的组件
• vuex版本 可以下载2.x版本

预览

• 没有梯子的可移步码云 - 完整版预览 （ gitee ）
• vite-element-admin - 完整版预览 ( github )
• github - 完整版github站点
• 码云 - 完整版码云站点

测试账号: 随便填
测试密码: 随便填

效果预览

准备

• Vite - vite 特性
• Vue3 - Vue3 基础语法
• Vue-Router-Next - vue-router 4.x 文档
• Element-Plus-Vue - Element UI组件
• Mock.js - mockjs 基本语法

目录结构

    ├── mock                       // Mock相关  
    ├── config                     // 基础配置信息  
    ├── src                        // 源代码
    │   ├── api                    // 请求相关文件
    │   ├── assets                 // 静态资源
    │   ├── components             // 全局公用组件
    │   ├── config                 // 全局常量等
    │   ├── directive              // 全局指令
    │   ├── icons                  // svg资源
    │   ├── layout                 // layout
    │   ├── locale                 // 国际化
    │   ├── plugins                // plugins
    │   ├── router                 // 路由
    │   ├── store                  // 全局 store 管理
    │   ├── styles                 // 全局样式
    │   ├── utils                  // 工具函数
    │   ├── vendor                 // 公用vendor
    │   ├── views                  // 页面集合
    │   │      ├── login           // 登录
    │   ├── App.vue                // 入口页面
    │   ├── main.js                // 入口 加载组件 初始化等
    │   └── permission.js          // 权限管理
    ├── .gitignore                 // git 忽略项
    ├── favicon.ico                // favicon图标
    ├── index.html                 // html模板
    └── package.json               // package.json

开发

# 克隆项目
git clone https://github.com/mvpyb/vite-element-admin.git

# 进入项目目录
cd vite-element-plus-admin

# 安装依赖
npm install

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

# 启动服务
npm run dev

发布

# 构建生产环境
npm run build:pro

[mvpyb]

react 版本

简介

React Antd Admin 是一个免费开源的中后台模版。使用了最新的react 17.x,react-router 6.x,@reduxjs/toolkit,antd4.x等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
模板集成了基础权限、国际化以及各种常用组件。

特性

• 最新技术栈：使用 React Hooks/Redux/toolkit 等前端前沿技术开发
• Mock 数据 内置 Mock 数据方案
• 权限 内置完善的动态路由权限生成方案
• 组件 二次封装了多个常用的组件

预览

• github - 完整版github站点
• 预览- 完整版预览 ( github )
• 预览- 完整版预览 ( 码云 )

Vite Element Admin - （vite + Element Plus 开箱即用的中后台模板）

• 没有梯子的可移步码云 - 完整版预览 （ gitee ）
• vite-element-admin - 完整版预览 ( github )
• github - 完整版github站点
• 码云 - 完整版码云站点

Vite Vant Template - （vite + vant H5 开箱即用的简易模板）

• 没有梯子的可移步码云 - 完整版预览 （ gitee ）
• vite-element-admin - 完整版预览 ( github )
• github - 完整版github站点
• 码云 - 完整版码云站点

测试账号: 随便填
测试密码: 随便填

效果预览

准备

• React - React 最新特性
• Redux-toolkit - redux-toolkit基础
• React-Router-Next - react-router 6x 文档
• Ant Design - Ant Design 4x文档
• Mock.js - mockjs 基本语法

目录结构

├─ public                     # 静态资源
│   ├─ favicon.ico            # favicon图标
│   └─ index.html             # html模板
├─ src                        # 项目源代码
│   ├─ api                    # 所有请求
│   ├─ assets                 # 静态资源
│   ├─ components             # 全局公用组件
│   ├─ config                 # 全局配置
│   │   ├─ constant.js        # 基础常量
│   ├─ icons                  # svg资源
│   ├─ layouts                # layout
│   ├─ vendor                 # 第三方库按需加载
│   ├─ mock                   # mock数据
│   ├─ router                 # 路由
│   ├─ store                  # 全局store管理
│   ├─ styles                 # 全局样式
│   ├─ utils                  # 工具函数类
│   ├─ views                  # 页面集合
│   ├─ App.js                 # 入口页面
│   ├─ defaultSettings.js     # 全局默认配置
│   └─index.js                # 入口文件
├── .env.development          # 开发环境变量配置
├── .env.production           # 生产环境变量配置
├── config-overrides.js       # 对cra的webpack自定义配置
├── package.json              # package.json
└── .eslintrc.js              # eslint配置

开发

# 克隆项目
git clone https://github.com/mvpyb/react-ant-admin.git

# 进入项目目录
cd vite-element-plus-admin

# 安装依赖
npm install

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

# 启动服务
npm run dev

发布

# 构建生产环境
npm run build:pro

npm-check-updates

# 检查 package.json 的最新依赖项
ncu
# 查看单个包的最新版本
ncu react
# 更新 package.json 的最新依赖项
ncu -u
# 更新单个依赖
ncu -u react
# 查看全局的安装包最新版本
ncu -g
# 检查某一个包
ncu react
ncu -f react
ncu --filter react
# 检查某一类的包
ncu 'react*'
ncu "/^react*$/"
# 检查除某个包以外的所有包
ncu \!react
ncu -x react
ncu --reject react
# 检查特定的几个包
ncu react redux
ncu react,redux
ncu -f "react redux"
# 更新的话只要在上面的每个语句后面加上 -u

[wzc520pyfm]

感谢大神! 借鉴灵感, 使用vue3+element-plus搭建了一个后台管理模板, 欢迎大家访问
https://github.com/wzc520pyfm/clover-admin-vue

[nealwang123]

虽然不是二次开发，但前期给了我很多开发上的灵感 欢迎大家来体验 Fantastic-admin https://hooray.gitee.io/fantastic-admin/

这个不开源

[bao-io]

感谢大神! 借鉴灵感, 使用vue3 + element-plus + typescript + vite构建后台应用，95%还原花裤衩的后台模版, 欢迎大家学习访问https://laibaoyuan.github.io/vue3-typescript-admin-template

[zhihuifanqiechaodan]

vue3高级指南-基于vue3-admin-template开发vue3管理后台

介绍文章：https://juejin.cn/post/7158671341086834724
项目地址：https://github.com/zhihuifanqiechaodan/vue3-admin-template