达永编程网

Vue-Bag-Admin 是一个基于 Vue3 的开源中后台管理系统，提供了一个全面、灵活且易于扩展的平台，框架使用插件式开发，它允许开发者在不改变原有代码的基础上扩展功能，框架和应用分开，减少耦合，提升开发效率，减少代码冗余，可快速构建出功能丰富、用户体验良好的中后台系统。

技术栈：Vue3 + Vite5 + Naive UI + TypeScript + Tailwindcss + Pinia + Alova + Strapi。

系统架构：

部分页面组件预览：

插件开发：

export default class ExamplePlugin {
    constructor() {
        this.name = 'ExamplePlugin'
        this._enable = false
    }
    // 安装插件
    install({ctx}, options) {
        // ctx当前插件的上下文，包含vue全局对象app
        this._enable = true;
    }
    // 禁用插件
    disable() {
        this._enable = false;
    }
    // 启用插件
    enable() {
        this._enable = true;
    }
    // 销毁插件
    destroy() {
    }
    // 查看插件是否启用
    inEnabled() {
        return this._enable
    }
}
// 导出插件
export const useExamplePlugin = new ExamplePlugin()

安装使用：

pnpm i vue-bag-admin  -S
import install from "vue-bag-admin"
const {app} = install()
app.mount('#app')

功能和特性：

响应式设计：利用 Tailwind CSS 进行样式开发，实现 PC 和移动端的自动适配，增强网站的响应性，提供多种预设皮肤，提升页面美观度，同时降低开发和维护成本。

技术生态强大：基于 Vue3、Vite5、Naive UI、Pinia 等主流技术构建，完全免费且适用于商业用途，强大的社区支持确保无框架限制。

功能丰富：提供权限管理、多语言支持、页面缓存、主题切换、路由动画、布局风格定制、动态路由、状态管理、微前端架构等特性，以及多个页面模板，旨在减少中后台系统开发的工作量。

插件式开发：支持插件式开发，允许开发者在不改动原有代码的基础上增加新功能和逻辑，提高应用的模块化和可维护性，适合需要高度定制化和可扩展性的项目。

API 服务：采用 Node.js 和 Strapi 框架提供 API 服务，支持自定义 API 和 GraphQL 查询语言，具备精细的权限管理和认证功能。

《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/hangjob/vue-bag-admin

官方文档：https://vite.itnavs.com/doc/