💥💥Vue3渐进式的顶级理解,干掉npm install?新鲜出炉的企业级Vue3完整后台管理系统!

·  阅读 720
💥💥Vue3渐进式的顶级理解,干掉npm install?新鲜出炉的企业级Vue3完整后台管理系统!

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的... —— vue官网对渐进式的介绍

刚开始你对 vue 的掌握度不高,可以只在一个项目中使用 vue 的部分特性,随着掌握程度可以渐渐使用 vue 提供的高级特性。——官网介绍人话版

以上就是正常人对渐进式的理解,但是,今天,我们隆重的介绍一位思路清奇的大佬给出的解释:BuildAdmin 一款预要干掉npm install、npm build的后台管理系统。 [Gitee仓库 | GitHub仓库]

💥 大佬的清奇思路

看了项目介绍和实际体验之后,我想大佬完整的脑路是这样的:

  1. 唉,没有找到一款完整、可以直接部署好就使用的 Vue3(setup)+Pinia+Vite+TypeScript+CRUD代码生成+带上后台+前后端分离等等的项目,自己整一个吧!
  2. 立项,项目都CRUD代码生成了,干脆一键CRUD吧,CRUD都一键了,不得一键部署?手动执行npm build普通用户完成不了啊,要不做个WEB终端,在完成CRUD之后,自动执行npm build
  3. 好,这是一款同时拥有CRUD代码生成、WEB终端、顶级技术栈、高颜值、自动注册路由(无限子级权限节点)、全局回收站、字段级数据修改保护等等的后台管理系统。
  4. 不对!同时拥有CRUD代码生成和web终端,那么是不是意味着我可以对全站前后端所有代码进行增删改查?比如有一个组件库,合规且优秀的组件都可以放里边,比如提供多种首页、会员中心样式,用户想用那个用那个,在后台下载后,自动利用WEB终端进行installbuild,直接使用!(此条尚未实现,但未来可期,大佬在WEB终端的视频介绍中讲到)

由此,我们得出Vue3渐进式的新理解:代码生成后自动build=后台加新功能 + 代码下载后自动 install和build=可能直接新后台,一个基础后台在基本不写代码的情况下,可以渐进成为一款含超多功能的后台,我想这也是为什么这个后台管理系统,叫做BuildAdmin的原因。

🌈 系统介绍

除了以上提到的setup+pinia+vite等最新技术栈外,框架后端使用了ThinkPHP6框架,所以是同时提供web和server端的,另外还使用了Element Plus组件库,vue-router-next,i18n等vue3全家桶,然后基本的页面自适应,无需授权即可免费商用

💫 安装使用

作者提供了完善的文档,对于熟悉ThinkPHPVue的用户,请使用大佬版:快速上手 ,对于新人朋友,作者为我们额外准备了各个操作系统的从零开始套餐:Windows从零到一 | Linux从零到一 | MacBook安装引导

🎉 必要了解的特性的详细介绍

这里只对笔者感觉很值得介绍的特性进行了介绍,了解更多请查看:Gitee仓库 | GitHub仓库

一、高颜值

话不多说,先上图:

index.gif

图片大小有限,如果你打开演示站,你直接就会发现,这个后台,它长得不一样!最明显的地方是:它并没有强行填满屏幕的每一个缝,所有的功能版块,都像是悬浮在屏幕上的,同时又将屏幕空间及其合理的利用了。

图片上没有体现出来的,双击表单项可以直接编辑该行,这点其他框架为什么没有想到?回车直接保存表单,这点很好使,但同类框架也只是部分有此功能,而此框架的作者,把:在多行文本输入框中,使用Ctrl+回车来保存表单,也实现了,另外笔者看到的还有加载表格表单时的loading位置大小合理,表单保存按钮、甚至表格中的开关,也都有loading态。

二、CRUD代码生成

一行命令即可生成数据表的CRUD代码(大气且实用的表格,多达22种表单组件支持,受权限控制的编辑和删除等-同时自动生成增删改查权限节点)从而节省大量时间。

笔者已体验此功能,通过框架自带的test_build表,在调试模式下,我只执行了一行命令:php think crud -t test_build,我的后台,直接多了一个知识库管理功能,框架自动为我生成了该数据表的后台菜单,点开里边就是对应数据表的表格、增加/编辑表单、删除、公共搜索等等,同时:生成的增加/编辑表单是根据字段名、字段注释等来建立表单元素和语言包的;test_build表就是设计的知识库表,只是表名为test_build而已。

三、自带终端

内置了一个WEB终端以实现一些理想中的功能,使用正确的情况下,你不再需要执行npm installnpm build等其他相关命令。

如上演示图,笔者执行了一波测试命令,这条命令首先是切换到了一个测试目录,该目录下有一个package.json文件,然后测试命令会install所有的包,用来检测命令是否可以正常运行,并反馈执行状态。

值得一提的是,这个终端,支持多种包管理器:npm、cnpm、pnpm、yarn、ni都是支持的。

四、润物无声

提供字段级数据修改记录和修改对比;删除数据则自动统一回收,随时回滚和还原,安全且无感。

老规矩,直接看图吧

image.png

image.png

image.png

你可以看到,配置好要回收那些数据之后(不是指定数据ID,而是指定控制器、数据表等规则),数据被删就自动到回收站里边去了,可以一键还原或者是查看被删数据。

而敏感字段这个在实际业务中也比较实用,管理员对一些敏感字段进行修改操作后,这里提供了一个Ctrl+Z,不得不说,这位大佬的想法,确实清奇,我就问还有那个后台提供这种细粒度的修改反悔功能。

🚀 更多该系统的资料(联系大佬,诉说你内心更疯狂想法)

📸 项目预览

login.gifimage.png
image.pngimage.png
image.pngimage.png
image.pngimage.png
image.pngimage.png
image.pngimage.png
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改