综合 使用 Vue3、Shadcn UI、Vite、TypeScript 和 Monorepo 构建的现代 vue 管理面板。 等多种 UI 的中后台系统框架

2024-11-18 18:53:38 +0800 CST views 1184

强烈推荐:支持 Ant Design、Element Plus、Naive UI 等多种 UI 的中后台系统框架

Vben Admin 介绍

Vben Admin 是一个广受欢迎的中后台管理系统框架,目标是为开发中大型项目提供开箱即用的解决方案。当前在 GitHub 上已获得超过 24k 的 Star。最近它发布了全新的 v5.0.0 版本,采用了 pnpmMonorepoTurboRepo 等技术,带来了更加先进的大型项目框架管理模式。

体验 Vben Admin v5.0.0

images
我最近体验了一下 Vben Admin v5.0.0,虽然目前版本的组件数量不及 v2 版本丰富,但它已包含动态菜单、权限控制、多主题配置、国际化等基本功能。最引人注目的是,它支持多种 UI 框架,包括 Ant Design Vue、Element Plus 和 Naive UI。

在尝试项目时,我注意到启动菜单中有三个基于不同 UI 框架的项目。文档中提到,Vben Admin 不再限制特定的 UI 框架,这意味着开发者可以根据需要选择和使用不同的 UI 组件库。

项目克隆与启动

我克隆了项目后,发现需要安装所有 UI 组件库的源码,并且启动时报错,提示 pnpm 版本不一致。因此,务必重新安装项目指定版本的 pnpm

启动项目时,可以选择要使用的 UI 组件库,默认情况下是 Ant Design Vue。启动成功后,可以在浏览器中预览页面。Vben Admin 默认提供了五个选项,前三个分别是基于 Ant Design Vue、Element Plus 和 Naive UI 的项目,第四个选项是文档说明,最后一个是功能较为完整的默认演示项目。

项目结构

查看项目源码后,我发现它集成了 3 个 UI 组件库的小应用,每个应用项目都有独立的 node_modulespackage.jsonsrcindex.htmlvite.config.mts 等文件。除了对应的 UI 组件库外,大部分依赖都是共享配置。这种大型项目框架管理模式极大地方便了开发者进行项目管理。

自定义 UI 支持

Vben Admin 支持自定义 UI 框架。你可以根据文档安装其他 UI 组件库,并将其放入指定的 apps 文件夹中。同时,需要调整根目录下 package.json 文件中的 scripts 字段命令。这意味着开发者可以在一个项目中轻松切换和使用不同的 UI 框架。

核心特性

  • 支持多种 UI 框架:Ant Design Vue、Element Plus、Naive UI
  • 动态菜单和权限控制
  • 多主题配置
  • 国际化支持
  • 先进的 Monorepo 项目管理模式

项目安装

Vben Admin 项目要求 Node.js 20 及以上版本,建议使用 nvm 管理 Node.js 版本。安装依赖时,必须使用指定版本的 pnpm(当前版本为 9.9.0)。

// 克隆项目
git clone url
// 进入项目目录
cd vue-vben-admin
// 安装依赖
pnpm install
// 启动项目
pnpm dev
复制全文 生成海报 前端框架 开发工具 项目管理 开源

推荐文章

Rust async/await 异步运行时
2024-11-18 19:04:17 +0800 CST
Go 单元测试
2024-11-18 19:21:56 +0800 CST
Vue 3 路由守卫详解与实战
2024-11-17 04:39:17 +0800 CST
FcDesigner:低代码表单设计平台
2024-11-19 03:50:18 +0800 CST
Python 微软邮箱 OAuth2 认证 Demo
2024-11-20 15:42:09 +0800 CST
Go语言SQL操作实战
2024-11-18 19:30:51 +0800 CST
MySQL死锁 - 更新插入导致死锁
2024-11-19 05:53:50 +0800 CST
CSS 实现金额数字滚动效果
2024-11-19 09:17:15 +0800 CST
html文本加载动画
2024-11-19 06:24:21 +0800 CST
使用 Nginx 获取客户端真实 IP
2024-11-18 14:51:58 +0800 CST
Go 如何做好缓存
2024-11-18 13:33:37 +0800 CST
H5抖音商城小黄车购物系统
2024-11-19 08:04:29 +0800 CST
php 统一接受回调的方案
2024-11-19 03:21:07 +0800 CST
用 Rust 玩转 Google Sheets API
2024-11-19 02:36:20 +0800 CST
CSS Grid 和 Flexbox 的主要区别
2024-11-18 23:09:50 +0800 CST
PHP 压缩包脚本功能说明
2024-11-19 03:35:29 +0800 CST
Vue3中如何处理权限控制?
2024-11-18 05:36:30 +0800 CST
html5在客户端存储数据
2024-11-17 05:02:17 +0800 CST
程序员茄子在线接单