作者:徐小夕来源:趣谈前端
我最近一直在做前端可视化和低代码相关的项目和技术分享,刚好找到几款基于vue3和vite的开箱即用的中后台管理模版,可以用到可视化项目中,所以这里特意做个总结,和大家分享一下。
我们都知道vue3已经发布一年多了,相关的生态也在慢慢建立,很多公司也在尝试用vue3来开发自己的应用系统。但是由于生态的不完善以及缺乏成熟方案的落地,vue3的应用仍然探索和小规模试验中。
好在开源界无私奉献的大佬们提前做了很多探索和尝试,比如面向vue3的UI组件库elementPlus,ant-desigin-vue等,同时基于这些UI库,又有一批大佬封装了针对企业业务场景的中后台管理模版,方便我们高效的搭建业务系统。
接下来我将一一列举一下这几个强大的管理后台模版,并聊聊他们的特点,如果你刚好有这样的需求,也不妨参考一下。
1.Vuevbenadmin
VueVbenAdmin是一个免费开源的中后台模版。使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。
特点
最新技术栈:使用Vue3/vite2等前沿技术
TypeScript:应用程序级JavaScript的语言
主题:可配置的主题
国际化:内置完善的国际化方案
Mock数据内置Mock数据方案
权限内置完善的动态路由权限生成方案
组件二次封装了多个常用的组件
界面展示
大家可以左右滑动来切换图片:)
2.ant-simple-pro
ant-simple-pro是一款支持vue3.0,react,angular,typescript等多框架支持的中台前端解决方案,ui使用antd实现的,它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,响应式设计,开箱即用,而且我们写了很多支持vue3的插件和库,它可以帮助你快速搭建企业级中后台产品原型,不管你是vue开发者,还是react或者angular,都能在这里找到你想要的版本。
前序准备
你需要在本地安装node和git,异步请求数据用axios,所有的异步接口均采用node+typescript+mysql+docker实现的,所以最好先了解如下知识:
vue
vue3.0的新语法,如setup,hooks等合成api
vue-cil,vue-router,vuex等全家桶
react
react基本语法,如hooks,class创建组件,函数式创建组件等
react全家桶要熟悉,如react-router-dom,create-react-app,react-transition-group等
react数据状态库,redux,redux-saga,reselect,react-redux等
react在typescript下的FC模式等
angular
angular的基本语法,如html模板,指令,组件等
angular的全家桶,如angular-cil,Rx等
typescript的基本语法
界面展示大家可以左右滑动来切换图片:)
3.vue3-template-admin
image.png
vue3-template-admin是一款基于vue3+vite+elementplus的后台管理模版,它集成了我们业务开发的大部分功能,比如文本编辑器,全站搜索,权限管理,可视化图表等。
使用到的插件/库eslint-plugin-vueeslint-plugin-vue
axios强大的前端请求库
fues.jsfues.js前端模糊搜索
echartechart数据可视化
antvantv蚂蚁数据可视化
xlsxxlsxSheetJS
jszipjszip优秀的前端压缩库
mockjsmockjs模拟和交互数据
wangeditorwangeditor富文本编辑器
fullcalendarfullcalendar丰富的日历插件
界面展示大家可以左右滑动来切换图片:)
4.vue-admin-box
image.png
vue-admin-box是一个免费并且开源的中后台管理系统模板。使用最新版本的vue3+vite+element-plus开发而成,目的是为了解决通用型的业务中后台系统复杂的配置。
功能特色适合中后台开发的路由配置、状态管理机制(状态默认支持本地存储)、已封装完善的axios及api管理机制
极方便扩展的主题配置功能,默认支持三种典型的中后台风格
简易配置的页面缓存功能,只需配置noCache属性,无需配置其他的任何属性,如组件名称,路由名称等等很多框架需要配置的东西
典型增删改查的三种业务表格,详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”
支持缓存页面刷新,目前了解的多数框架都不支持缓存页面的刷新方便扩展的国际化解决方案,并提供了两套非国际化的基础模板和两套国际化的基础模板(ts版本/js版本)
手写版本的各类自定义指令
已经过多个中后台业务检验过的表格公用组件及弹窗公用组件,详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”
界面展示大家可以左右滑动来切换图片:)
更多优秀项目推荐项目名描述
h5-dooringH5可视化页面编辑器
v6.dooring可视化大屏编辑器
mitu轻量级图片编辑器
dooringx-lib可视化搭建解决方案
powerNice多功能文档编辑器
luckySheet基于web的电子表格工具
好了,今天的分享就到这里了,如果大家对可视化搭建或者低代码/零代码感兴趣,我们也可以一起交流。