Projects using vue-element-admin
PanJiaChen opened this issue · 43 comments
有不少项目基于 vue-element-admin 或者 vue-admin-template 进行了二次分装。
如果自己觉得不错的，可以在这里贴出来，方便其他人借鉴。
用群主的框架，撸了个前后台分离的后台管理系统，后台用SpringBoot。有兴趣的同学可以看看
https://github.com/enilu/web-flash
群主这个系统太好了，
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
结合本项目开发的一个电商用户订单管理系统 包括electron版本
https://github.com/PasserbyFluid/vue-admin
借鉴本项目实现的前后端分离的后台管理系统，内附后端 java 版本 和 PHP 版本
Thanks @PanJiaChen.
Laravel version for vue-element-admin which uses Laravel itself as API server, Laravel's users for authentication, and more useful features.
Frontend-Backend template: vue-element-frontend-backend by @laoseng005
基于vue-element-admin实现的前后台分离项目，后台接口（springboot）
vue-link-admin
some project angular2-element-vue ?
用群主的框架，撸了个商城系统(后台管理的界面使用群主的框架，包括H5,小程序，app），后台用SpringBoot,。有兴趣的同学可以看看
gitee: https://gitee.com/microapp/linjiashop
github: https://github.com/microapp-store/linjiashop
用群主的ad框架做了2个大型国企的多个定制开发项目，后台用flask，感谢。
前端简单干净模版框架。https://github.com/tang-yue/vue-element-admin-template。
句号真秀
大佬，仿照你的项目做了个react+antd版的，向大佬致敬
项目地址：https://github.com/NLRX-WJC/react-antd-admin-template
在线预览：https://nlrx-wjc.github.io/react-antd-admin-template/
向大佬致敬！
我们团队根据这个做了个Java企业级开发框架，是基于微服务的敏捷开发平台，前后端分离，前端支持主题切换、顶部菜单等，后台除了常用的数据权限外，还支持代码自动生成、工作流、报表生成、数据范围限制等功能#Vue+SpringCloud
前端：https://www.jeegenius.com/demo1
后台：
虽然不是二次开发，但前期给了我很多开发上的灵感
欢迎大家来体验 Fantastic-admin
https://hooray.gitee.io/fantastic-admin/
各位大佬，项目求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访问吧
用群主的框架，写了个基础后台，后台用Laravel。欢迎fork&start, 不合理的地方也欢迎批评指正
DEMO
http://pleaseyang.gitee.io/ity-show
账号 look 密码 123456
PHP
https://gitee.com/pleaseyang/Ity
https://github.com/pleaseyang/Ity
VUE
没有node做后端的版本，蓝受
后端用Django，前端用Vue，用户管理部分借鉴vue-element-admin，我是不是大材小用了
感谢花裤衩和Armour大神
vue3出来了，个人比较喜欢Composition API,用Vue3+TS+element-plus写了一个版本来踩下坑。
项目地址：https://github.com/rcyj-FED/vue3-composition-admin
刚开始写完，喜欢的可以一起优化完善。
有没有基于SSO单点登录的简洁模版？
基于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
有兴趣的小伙伴可以来看看丫
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
感谢作者开源 ~
借鉴本项目开发了一个炒鸡简洁的基础模板：
项目地址： https://github.com/pdsuwwz/vue-element-admin
演示地址： https://pdsuwwz.github.io/vue-element-admin
有需要的小伙伴可以看下 😋
感谢@PanJiaChen 提供的项目模板，基于vue-admin-template，我做了一些开发中用到功能的扩展，算是一个简单的Demo,持续完善中
我们团队根据这个做了个Java企业级开发框架，是基于微服务的敏捷开发平台，前后端分离，前端支持主题切换、顶部菜单等，后台除了常用的数据权限外，还支持代码自动生成、工作流、报表生成、数据范围限制等功能#Vue+SpringCloud
前端：https://www.jeegenius.com/demo1
后台：
你的demo打不开了 可否开源一下
各位大佬，谁有头部菜单和左边菜单共存的后台管理系统demo
移除了vue-admin-template中sass代码，感觉后台管理系统用sass没什么必要，反而每次安装node-sass都很麻烦。https://github.com/webszy/vue-admin-template-removeSass
移除了vue-admin-template中sass代码，感觉后台管理系统用sass没什么必要，反而每次安装node-sass都很麻烦。https://github.com/webszy/vue-admin-template-removeSass
用sass替代node-sass即可，JavaScript实现的。
npm install -g sass
感谢花裤衩和Armour大神 vue3出来了，个人比较喜欢Composition API,用Vue3+TS+element-plus写了一个版本来踩下坑。
项目地址：https://github.com/rcyj-FED/vue3-composition-admin
刚开始写完，喜欢的可以一起优化完善。
正在找vue3+elementPlus的替代品，打开就爱上UI了，谢谢你的分享
感谢花裤衩，我用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
golang+vue-element-admin: https://github.com/it234/goapp
脚手架从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
基于大佬模板得思路，搞了一个 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:proreact 版本
简介
React Antd Admin 是一个免费开源的中后台模版。使用了最新的react 17.x,react-router 6.x,@reduxjs/toolkit,antd4.x等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
模板集成了基础权限、国际化以及各种常用组件。
特性
- 最新技术栈：使用 React Hooks/Redux/toolkit 等前端前沿技术开发
- Mock 数据 内置 Mock 数据方案
- 权限 内置完善的动态路由权限生成方案
- 组件 二次封装了多个常用的组件
预览
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:pronpm-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
感谢大神! 借鉴灵感, 使用vue3+element-plus搭建了一个后台管理模板, 欢迎大家访问
https://github.com/wzc520pyfm/clover-admin-vue
虽然不是二次开发，但前期给了我很多开发上的灵感 欢迎大家来体验 Fantastic-admin https://hooray.gitee.io/fantastic-admin/
这个不开源
感谢大神! 借鉴灵感, 使用vue3 + element-plus + typescript + vite构建后台应用，95%还原花裤衩的后台模版, 欢迎大家学习访问https://laibaoyuan.github.io/vue3-typescript-admin-template
vue3高级指南-基于vue3-admin-template开发vue3管理后台
介绍文章：https://juejin.cn/post/7158671341086834724
项目地址：https://github.com/zhihuifanqiechaodan/vue3-admin-template