Vue-Bag-Admin 采用漂亮的 Naive UI 构建的开源中后台系统，基于 Vue3 / Vite / TypeScript 等最新的前端技术栈

正在检查是否收录...

Vue-Bag-Admin 采用漂亮的 Naive UI 构建的开源中后台系统，基于 Vue3 / Vite / TypeScript 等最新的前端技术栈

这是一款完成度很高、实用性很强的 admin 前端框架，颜值不错，推荐给大家。

Vue-Bag-Admin 介绍

Vue-Bag-Admin

在官网上也直接称为 Bag-Admin，这是一款专门为企业项目搭建中后台管理平台的前端框架，基于目前最新的前端技术栈 Vue3、Vite、TypeScript 和 Naive UI 构建的中后台解决方案。Vue-Bag-Admin 提供了一套完整的功能，旨在帮助开发者以最小的成本快速搭建中后台系统。

截止写文章的今天，Vue-Bag-Admin 在 Github 上已经

收获 900 stars 和 144 forks

，相当受欢迎。

技术特性

支持响应式

通过 CSS3 媒体查询实现了

响应式设计

，在手机、平板和PC上的自动适配，大大增强了网站的可用性，无需多端搭建，可以降低了开发和维护成本。

简便易用

项目基于 npm 命令运行，可以轻松安装和开发。值得一提的是，整个框架和应用的分离设计减少了项目间的耦合，提升了项目的扩展性。

Naive UI

Naive UI 这款 Vue3 基础组件库实在太漂亮了，同时也是一个

完全免费且可商用

的 UI 库，Vue-Bag-Admin 的基础组件就是基于 Naive UI，提炼了典型的业务模型，为中后台系统提供了美观且实用的界面组件。

功能齐全

Vue-Bag-Admin

提供了包括权限管理、多语言支持、主题切换、路由动画、布局风格自定义、动态路由、状态管理以及请求封装等在内的一系列功能，简化了很多中后台系统搭建工作，开箱即用。

开发上手使用

安装

除了从 Github 上下载源码，Vue-Bag-Admin 也可以通过 npm 快速安装：

npm i vue-bag-admin pinia vue-router --save

Naive UI

也要安装：

npm i naive-ui --save-prod npm i unplugin-vue-components --save-dev

安装成功后，整个项目的目录是这样的：

├─ config 配置 ├─ mock 模拟数据 ├─ public html ├─ src 源码 │ ├─ app 应用目录(或者子目录) │ │ ├─ admin 管理应用 │ │ │ ├─ App.vue │ │ │ ├─ index.html │ │ │ ├─ main.ts 入口 │ │ │ ├─ ... │ │ ├─ web 管理应用 │ │ │ ├─ ... │ │ ├─ App.vue │ │ ├─ index.html │ │ ├─ main.ts 入口 │ ├─ packages 基础框架 │ │ ├─ api 请求api映射 │ │ ├─ aseets 资源文件 │ │ ├─ components 全局组件 │ │ ├─ config 基础配置 │ │ ├─ global 全局函数或属性 │ │ ├─ http 请求封装 │ │ ├─ layout 布局 │ │ ├─ pinia 状态管理 │ │ ├─ router 路由 │ │ ├─ style 样式 │ │ ├─ type 在ts模式下 │ │ ├─ utils 工具库 │ │ ├─ view 路由页面 │ ├─ install.vue 库模式入口 ├─ .editorconfig 编辑器统一风格配置 ├─ .eslintrc.cjs eslint配置 ├─ .gitattributes git配置 ├─ .gitignore git过滤 ├─ .npmignore npm过滤 ├─ .package.json 依赖 ├─ tsconfig.json ts配置 ├─ vite.config.ts ├─ README.md

配置

在安装完成后，根据官网文档和项目需求，配置数据库连接、路由设置、权限控制等。比如：

import {createApp} from "vue" import "./style.css" import App, {install, router} from "vue-bag-admin" createApp(App).use(install, { getViews: () => import.meta.glob("@/view/*/.vue", {eager: true}) }).use(router).mount("#app")

还支持把内置的接口替换为我们自己开发的接口，这个非常实用：

createApp(App).use(install, { apis:{ "/userInfo ":"/custom/userInfo", // userInfo 是系统内置的 /custom/userInfo 换成我们自己的 "/menus":"...." } }).use(router).mount("#app")