一款轻量、干净的 Vue 后台管理框架

news2024/11/16 0:32:08

开始之前

在开始介绍之前我想谈谈为什么要自己做一个后台管理,我知道很多人都用一些开源的后台管理项目,这些老前辈有很多亮点值得学习,但是存在的一些问题同样不可忽视,我认为很多开发者会被困扰(仅代表个人观点)

  • 技术栈老旧不升级:因为一些历史原因仓库的依赖不再升级,不能做到开箱即用。一些便利性新特性也没有在项目中使用

  • 过度封装:为了追求大而全,展示一个完备的,高复用性的项目而做了层层封装,但是很多组件或方法完全没必要这样做,导致开发者使用后难以订制修改和调试,出现问题溯源难

  • 莫名其妙的轮子和库包:一些老项目在开发中为了便捷开发用了一些陈旧的库或无法稳定维护的个人库来实现功能,而在后续中又因为严重耦合不方便更换而导致一些开发问题或者构建产物问题

  • 简洁与二次开发友好:大部分开发者在使用开源框架只是想快速搭建起自己的业务,但是一些大而全的框架过多的依赖和封装成为了开发者的心智负担,在项目开始后被繁杂的目录和文件所困扰。

  • 代码规范:不少开源项目中为了体现规范,严谨,为项目加上了eslintprettierstylelinthuskycommitlint规范是没有问题的,但是也因此部分开发者在开发中产生一些附带负担,“我只是拉下跑一下,对接一下项目,怎么这么多报错和限制?”此类规范我认为不应被添加,如果团队有需要自行添加即可

我认为一个好的,优秀的框架应当在提供足够的功能前提下尽量解决这些问题,并让框架在提供的功能二次开发友好代码组件的封装复用这三者之间保持一种适度的平衡

介绍

Nova-admin[1]是一个基于Vue3、Vite5、Typescript、Naive UI, 简洁干净后台管理模板,用简单的方式实现完整功能,并尽可能的考虑代码规范,易读易理解无过度封装,方便二次开发。

特性

  • 基于Vue3、Vite5、TypeScript、NaiveUI、Unocss等最新技术栈开发

  • 基于alova[2]封装和配置,提供统一的响应处理和多场景能力

  • 完善的前后端权限管理方案

  • 支持本地静态路由和后台返回动态路由,路由简单易配置

  • 对日常使用频率较高的组件二次封装,满足基础工作需求

  • 黑暗主题适配, 界面样式保持naive风格

  • 仅在提交时进行eslint校验,没有过多限制,开发更简便

  • 界面样式布局灵活可配置

项目预览

  • Nova-Admin 预览[3]

图片

图片

图片

图片

图片

图片

开源地址

GitHub - chansee97/nova-admin: A simple and flexible admin template based on Vue3, Vite, TypeScript, NaiveUI

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面试(03)————多线程和线程池

一、多线程 1、什么是线程?线程和进程的区别? 2、创建线程有几种方式 ? 3、Runnable 和 Callable 的区别? 4、如何启动一个新线程、调用 start 和 run 方法的区别? 5、线程有哪几种状态以及各种状态之间的转换? 6、线程…

Docker容器与虚拟化技术:OpenEuler 部署 ES 与 Kibana

目录 一、实验 1.环境 2.OpenEuler 部署 ES (EalasticSearch) 3.OpenEuler 部署 Kibana 4.部署 Elasticvue插件 5.使用cpolar内网穿透 6.使用Elasticvue 一、实验 1.环境 (1)主机 表1 主机 系统架构版本IP备注LinuxopenEuler22.03 LTS SP2 1…

flex布局align-items和align-content、justfiy-content的区别

justfiy-content:定义主轴的对齐方式align-items:定义交叉轴的对齐方式align-content:将flex子项作为一个整体起作用 只在两种情况下有效果: ①子项多行且flex容器高度固定 ②子项单行,flex容器高度固定且设置了fle…

Mac安装配置Appium

一、安装 nodejs 与 npm 安装方式与 windows 类似 ,官网下载对应的 mac 版本的安装包,双击即可安装,无须配置环境变量。官方下载地址:https://nodejs.org/en/download/ 二、安装 appium Appium 分为两个版本,一个是…

HarmonyOS实战开发-屏幕属性(仅对系统应用开放)

介绍 本示例主要展示了屏幕管理相关的功能,使用ohos.display、ohos.screen接口,ohos.display接口提供获取默认display对象、获取所有display对象,开启监听、关闭监听功能;ohos.screen接口提供创建虚拟屏幕、销毁虚拟屏幕、扩展屏…

LeetCode-热题100:118. 杨辉三角

题目描述 给定一个非负整数 numRows,生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中,每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示例 2: 输入: numRows 1 输出: [[1]]…

什么软件可以保密公司文件?

#天锐绿盾# 天锐绿盾是一款专为企业设计的文件加密与数据防泄密软件,旨在通过一系列高级安全功能来保护公司的敏感信息和重要文件不被未经授权的访问、窃取或泄露。 PC地址: https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfe…

蓝奏云直链获取在线解析网站源码

源码简介 蓝奏云直链获取在线解析网站源码 蓝奏云链接解析 本地API接口 支持有无密码和短期直链和永久直链,同时还可以显示文件名和大小。 这个解析器无需数据库即可搭建,API接口已经本地化,非常简单易用。 安装环境 php5.6 搭建教程 …

HTML - 你如何使H5页面禁止手动缩放

难度级别:初级及以上 提问概率:40% 我们知道,这道题其实是在考察meta标签的viewport属性,正常情况下设置viewport的代码为 <head><meta name="viewport" content="width=device-width,initial-scale=1.0" …

全网最详细的网络安全自学笔记

1.选择方向 首先是选择方向的问题&#xff0c;网络安全是一个很宽泛的专业&#xff0c;包含的方向特别多。比如 web安全&#xff0c;系统安全&#xff0c;无线安全&#xff0c;二进制安全&#xff0c;运维安全&#xff0c;渗透测试&#xff0c;软件安全&#xff0c;IOT安全&am…

【运输层】网络数据报协议 UDP

目录 1、UDP 的特点 2、UDP 的首部格式 UDP 只在 IP 协议之上增加了很少的一些功能&#xff0c;比如复用、分用以及差错检测等。 1、UDP 的特点 UDP是无连接的&#xff0c;即发送数据之前不需要建立连接&#xff0c;因此减少了开销和发送数据之前的时延。 UDP使用尽最大努力…

python函数练习2

找出10000以内能被5或6整除&#xff0c;但不能被两者同时整除的数&#xff08;函数&#xff09; def func():for i in range(1,50):if (i % 5 0 or i % 6 0 ):if i % 5 0 and i % 6 0:continue #利用continue跳过能被5和6整除的数print(i) func()写一个方法&#xff0c;计算…

Windbg查看函数调用过程中的内存布局

我们在分析问题的时候经常会需要查看进程的栈和帧中的值&#xff0c;下面我们就用一个简单的例子来分析一下这个过程。 源代码&#xff1a; #include <iostream> int add(int a, int b) {return a b; }int main() {int a, b;a 3;b 4;int ret add(a, b);std::cout &…

【Python】快速排序法 Leetcode 148. 排序链表

题目 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 代码 第一次使用朴素快速排序&#xff0c;基准值为头节点值&#xff0c;居然超时了&#xff0c;然后…

pymilvus创建IVF_FLAT向量索引

索引简介 索引的作用是加速大型数据集上的查询。 目前&#xff0c;向量字段仅支持一种索引类型&#xff0c;即只能创建一个索引。 milvus支持的向量索引类型大部分使用近似最近邻搜索算法(ANNS,approximate nearest neighbors search) 。ANNS 的核心思想不再局限于返回最准确…

什么是数据治理?你都了解吗?

在当今数字化时代&#xff0c;数据已成为企业重要的战略资产。有效管理数据对于企业提高运营效率、降低成本、做出更好的决策至关重要。数据治理作为一种重要的管理方法&#xff0c;可以帮助企业确保数据的质量、安全、合规性和有效利用。 一、数据治理的定义与重要性 近日&a…

2024.4.6-day11-CSS 背景和精灵图

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 作业2024.4.6学习笔记1 背景2 背景图片3 CSS 精灵图 作业 <!DOCTYPE html&…

C语言初阶—9函数

函数的声明 &#xff08;main函数前&#xff09;----告诉有一个函数 格式&#xff1a; 类型 函数名&#xff08;参数&#xff09;&#xff1b; 函数的声明 放到头文件add.c 函数的定义 ----创建函数----放到add.c 格式&#xff1a;类型 函数名(参数) { 语句项; } 在文…

【Qt 学习笔记】使用两种方式实现helloworld

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 使用两种方式实现helloworld 文章编号&#xff1a;Qt 学习笔记 / 05 …

Ais client LA8295 camx KMD enqueue dequeue

Ais client 调用qcarcam_s_buffers 设置buffer 进行enqueue buf PUBLIC_API qcarcam_ret_t qcarcam_s_buffers(qcarcam_hndl_t hndl, qcarcam_buffers_t* p_buffers) {return camera_to_qcarcam_result(ais_s_buffers(hndl, p_buffers)); }qcarcam_s_buffers(input_ctxt->q…