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

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

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

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

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 快速安装:

Naive UI 也要安装:

安装成功后,整个项目的目录是这样的:

配置

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

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

运行

配置完成后,就可以启动开发服务器,然后开始开发业务代码吧。

总的来说,Vue-Bag-Admin 是一款相当完善的 admin 框架,拥有很多常见的业务组件和页面,拿来就可以用,甚至是后端开发者也可以直接用,毕竟按现在的搬砖趋势,前端开发者也要写后端,后端也要写前端。

对了,这个项目需要熟悉 Vue3 和 TypeScript,特别是 TypeScript,否则在开发中会遇到很多棘手的问题。

Vue-Bag-Admin 是一款免费开源的 admin 中后台管理系统,无论是 Github 主页底部,还是官网上,都有明确的开源可免费用于商业用途的说明,项目遵循 MIT 开源协议,我们可以自由地下载源码来使用,无需支付任何费用,也无需授权,可以应用到我们的产品中。

原文链接:https://www.thosefree.com/vue-bag-admin

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/884521.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

程序设计题(65—72)

第六十五题 题目 请编写函数fun&#xff0c;它的功能是&#xff1a;计算下列级数和&#xff0c;和值由函数值返回。 例如&#xff0c;当n10&#xff0c;x0.3时&#xff0c;函数值为1.349859。 #include <conio.h> #include <stdio.h> #include <math.h> #…

5.使用 VSCode 过程中的英语积累 - Go 菜单(每一次重点积累 5 个单词)

前言 学习可以不局限于传统的书籍和课堂&#xff0c;各种生活的元素也都可以做为我们的学习对象&#xff0c;本文将利用 VSCode 页面上的各种英文元素来做英语的积累&#xff0c;如此做有 3 大利 这些软件在我们工作中是时时刻刻接触的&#xff0c;借此做英语积累再合适不过&a…

react:React Hook函数

使用规则 只能在组件中或者其他自定义的Hook函数中调用 只能在组件的顶层调用&#xff0c;不能嵌套在if、for、 其他函数中 基础Hook 函数 useState useState是一个hook函数&#xff0c;它允许我们向组件中添加一个状态变量&#xff0c;从而控制影响组件的渲染结果 示例1…

人生苦短,我用Python✌

面向代码的解释型语言 数据开发和AI 编程语言:让计算机了解我们干什么&#xff0c;翻译官 1.下载软件 解释器安装 点击第二个 改路径 D:\python 安装 测试 winr打开 输入代码 输出 退出环境 exit&#xff08;&#xff09; 新建文本文档后缀改成py 编写 运行 安装编写代码…

开放词汇全景分割

开放词汇全景分割是一种先进的计算机视觉任务&#xff0c;它旨在将图像中的每个像素分割并分类到预先定义或未定义的类别中。这与传统的图像分割不同&#xff0c;后者通常仅限于识别有限的、预先定义的对象类别。开放词汇全景分割的目标是识别和处理图像中的任何可能的对象&…

Fastadmin 前台任意文件读取漏洞

漏洞描述 FastAdmin是一个基于ThinkPHP5和Bootstrap的后台开发框架&#xff0c;支持权限管理、响应式开发、多语言、模块化开发、CRUD和自由可扩展等功能。 漏洞复现 FOFA body"fastadmin.net" || body"<h1>fastadmin</h1>" && tit…

SpringMVC源码-SpringMVC框架中Spring父容器和SpringMVC子容器加载的流程以及SpringMVC九大内置组件的初始

一、Spring父容器启动 SpringMVC 的项目结构如下: applicationContext.xml spring的配置文件 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.o…

微调大模型(Finetuning Large Language Models)—Evaluation(六)

1. 微调后对模型进行评估 模型的评估目前没有统一的标准&#xff0c;有从正向角度&#xff0c;核对是否命中&#xff0c;当然也有从反向角度&#xff0c;考虑未命中的错误分析。 常见的评估方式如图所示&#xff1a; 本节学习资料地址&#xff1a;传送门 2. 代码测试 2.1 …

【Python】多个dataframe存入excel的不同的sheet表里,而不会被覆盖的方法

我发现&#xff0c;我原来用的多个工作簿存入的方法&#xff0c;发现不太可行&#xff0c;如果我用原来的方法&#xff0c;然后for循环&#xff0c;新的dataframe会把原来的覆盖掉&#xff0c;然后只剩下一个工作薄。原先的代码&#xff1a; with pd.ExcelWriter(file_name ) …

XSS闯关小游戏(前13关)

挖掘思路 1.存在可控参数 2.页面存在回显 3.使用带有特殊字符的语句去测试&#xff0c;网站是否进行了实例化 ( 例如 ">123 ) 4.构造闭合&#xff0c;实现payload的逃逸 1 name处参数可控&#xff0c;直接打即可 2 这里知道<>被实体编码了 再测试">1…

想做个WPS的自动化代码,参考如下:

&#x1f3c6;本文收录于《全栈Bug调优(实战版)》专栏&#xff0c;主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&am…

大碗娱乐发布业务调整说明 取消艺人经纪业务

大碗娱乐今日发布业务调整说明&#xff1a;不再负责艺人业务&#xff0c;而贾玲导演将专注内容创作。据悉&#xff0c;其公司旗下艺人张小斐、许君聪、卜钰、何欢、张泰维、朱天福、曹贺军、刘宏禄的经纪合约均已到期&#xff0c;双方不再续约&#xff0c;但未来会共同寻求以其…

【HTML5】html5开篇基础(3)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

[大语言模型-论文精读] Diffusion Model技术-通过时间和空间组合扩散模型生成复杂的3D人物动作

​​​​​​Generation of Complex 3D Human Motion by Temporal and Spatial Composition of Diffusion Models L Mandelli, S Berretti - arXiv preprint arXiv:2409.11920, 2024 通过时间和空间组合扩散模型生成复杂的3D人物动作 摘要 本文提出了一种新的方法&#xff0…

Vue 学习

vue 核心语法 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Vue 核心语法测试</title> </head><body&…

Vue项目之Element-UI(Breadcrumb)动态面包屑效果 el-breadcrumb

效果预览 需要导航的页面Vue.js 最笨的方法就是在每个需要面包屑的页面中固定写好 <template><div class="example-container"><el-breadcrumb separator="/"

利用多模态输入的自我中心运动跟踪与理解框架:EgoLM

随着增强现实(AR)和虚拟现实(VR)技术的发展,对自我中心(第一人称视角)运动的精确跟踪和理解变得越来越重要。传统的单一模态方法在处理复杂场景时存在诸多局限性。为了解决这些问题,研究者们提出了一种基于多模态输入的自我中心运动跟踪与理解框架——EgoLM。本文将详细…

物流货运托运发货单二联三联打印软件定制 佳易王物流单管理系统操作教程

一、前言 物流货运托运发货单二联三联打印软件定制 佳易王物流单管理系统操作教程 1、软件为绿色免安装版&#xff0c;解压即可使用&#xff0c;已经内置数据库&#xff0c;不需再安装。 2、软件下载可以到本文章最后点击官网卡片下。 二、软件程序教程 1、如图&#xff0c;…

并发面试合集

1.创建线程的方式 区分线程和线程体的概念&#xff0c;线程体通俗点说就是任务。创建线程体的方式&#xff1a;像实现Runnable、Callable接口、继承Thread类、创建线程池等等&#xff0c;这些方式并没有真正创建出线程&#xff0c;严格来说&#xff0c;Java就只有一种方式可以…

Pygame中Sprite实现逃亡游戏4

在《Pygame中Sprite实现逃亡游戏3》中实现了玩家跳跃飞火的效果&#xff0c;接下来通过精灵类的碰撞检测来判断飞火是否击中玩家、飞火是否击中飞龙以及飞龙是否抓住玩家。 1 飞火是否击中玩家的判断 判断飞火是否击中玩家的代码如图1所示。 图1 判断飞火是否击中玩家的代码 …