一、引言
二、技术选型
vue-bag-admin,采用Vue3、Vite5、Naive UI、JavaScript、Gulp、Pinia以及周边的优秀的插件搭建,通过npm命令安装引入主程序包开发,插件式开发,它允许开发者在不修改原有代码基础上扩展功能、增加新的处理逻辑,使得应用更加模块化和易于维护,响应式中后台管理系统,满足现有业务各种扩展...
vue-bag-admin 采用了以下技术栈和工具:
Vue3:作为前端框架,Vue3 提供了更高的性能和更好的类型支持,使得开发过程更加高效和可靠。
Vite5:作为构建工具,Vite5 提供了极快的冷启动和即时热模块更新(HMR),显著提升了开发体验。 Naive UI:作为 UI 组件库,Naive UI 提供了简洁、美观的组件,使得开发者能够快速构建现代化的用户界面。 JavaScript:作为编程语言,JavaScript 的灵活性和广泛支持使得开发过程更加顺畅。 Gulp:作为任务运行器,Gulp 提供了强大的自动化构建能力,简化了开发流程。 Pinia:作为状态管理库,Pinia 提供了简洁的 API 和良好的 TypeScript 支持,使得状态管理更加高效。
三、特点与功能
路由动画加载:通过集成动画效果,提升了用户体验。 内置富文本编辑器和 MarkDown 编辑器:支持多种文本编辑方式,满足不同的内容创作需求。 支持中英文切换:提供了国际化支持,方便全球用户的使用。 支持全屏预览:提供了全屏模式,方便用户查看和编辑内容。 5000+图标库选择:提供了丰富的图标资源,满足不同的设计需求。 模拟数据:支持模拟数据生成,方便开发者进行前端开发和调试。 网络配置和请求拦截:提供了灵活的网络配置和请求拦截功能,增强了系统的安全性和可扩展性。 失败重连:支持网络请求失败后的自动重连功能,提高了系统的稳定性。 路由按钮权限:提供了细粒度的权限控制功能,确保系统的安全性。 网页水印:支持网页水印功能,防止内容被恶意复制。 字符拼音:提供了字符转拼音的功能,方便进行中文拼音搜索和排序。 敏感词管理:支持敏感词过滤功能,确保内容的合规性。 图像裁剪:提供了图像裁剪功能,方便用户进行图片编辑。 二维码生成器:支持二维码生成功能,方便用户进行扫码操作。 瀑布流图片:提供了瀑布流布局的图片展示功能,提升了用户体验。 模板打印:支持模板打印功能,方便用户进行文档打印。 表单设计器:提供了可视化的表单设计功能,降低了表单开发的难度。 大文件上传:支持大文件上传功能,满足用户上传大文件的需求。 Pinia 状态管理:通过 Pinia 进行状态管理,提高了系统的可维护性和可扩展性。 路由配置和全局配置:提供了灵活的路由配置和全局配置功能,方便开发者进行自定义设置。 UI 风格布局切换:支持多种 UI 风格和布局切换功能,满足不同用户的审美需求。 灰色模式和色弱模式:提供了灰色模式和色弱模式,提高了系统的可访问性。 标签持久化:支持标签持久化功能,方便用户进行多标签页操作。 权限拦截:提供了权限拦截功能,确保用户只能访问其有权限的资源。 多页面模式:支持多页面模式,方便开发者进行复杂应用的开发。 动态路由注入:支持动态路由注入功能,提高了系统的灵活性和可扩展性。 支持 Strapi 框架接入:提供了 Strapi 框架的接入支持,方便开发者进行内容管理系统的集成。
四、插件式开发
安装
pnpm i vue-bag-admin --savepnpm i naive-ui pinia vue-router --save
快速开始
import {createApp} from 'vue'
import App, {install, router, axios} from "vue-bag-admin"
createApp(App).use(install).use(router).mount('#app')
https://github.com/hangjob/vue-bag-admin
https://vite.itnavs.com/doc/
https://vite.itnavs.com/admin/#/home
软件接单交流: