当前位置： 首页 > news >正文

【CSS 】Class Variance Authority CSS 类名管理工具库

news 来源：原创 2025/8/22 13:10:20

1.背景、什么是 CVA？

  1. Class Variance Authority (CVA) 是一个用于管理 CSS 类名 的工具库，特别适合在 React 或 Vue 等前端框架中使用。
  2. 它可以帮助你更轻松地处理组件的 样式变体（Variants），比如按钮的不同状态（primary、secondary、disabled 等）。
  3. 它非常契合像 Tailwind CSS 这类的原子化思想。

2.CVA的主要功能和特点?

  1. 结构化样式管理：CVA提供了一种结构化的方式来管理样式变体，减少了全局样式冲突的可能性。它允许开发者以声明的方式描述每个参数值的样式，从而自动找出正确的样式组合。
  2. 方便样式复用和扩展：当需要添加新的样式变体时，CVA使得扩展变得更加方便和高效。开发者可以通过定义variants、compoundVariants和defaultVariants等参数，来轻松创建可复用的样式组合。
  3. 减少样式冲突：由于CVA采用了结构化的样式管理方式，因此可以大大减少样式冲突的可能性。这使得在大型项目中维护样式变得更加容易。

3.CVA 的使用场景

  1. CVA 特别适用于使用Tailwind CSS 等原子化 CSS 框架的项目。
  2. 在这些项目中，开发者通常需要根据组件的 props 值将 Tailwind 类组合在一起，以创建可重用的 UI 元素。
  3. 然而，随着组件样式的增加，这种组合方式可能会变得非常复杂。通过引入 CVA，开发者可以消除这种复杂性，并以声明的方式描述每个参数值的样式。

4.如何在项目中使用 CVA

4.1安装

你可以通过 npm 或 pnpm 安装 CVA：

npm install class-variance-authority

或者

pnpm add class-variance-authority

4.2 CVA函数参数

  1. 基础类名（Base Classes）
    1. 参数形式：通常是一个数组（也可以是一个用空格分割的字符串），包含一组基础的 CSS类名。
      1. [‘pl-2’, ‘pt-1’]
      2. ‘pl-2 pt-1’
    2. 作用：这些基础类名会被应用到所有生成的样式类名组合中，作为样式的基础部分。它们不是“默认值”意义上的参数，而是函数调用的必需部分。
  2. 变体定义（Variants Definitions）
    1. 参数形式：一个对象，其键是变体属性的名称，值通常是一个对象，该对象定义了不同属性值对应的CSS类名数组。
    2. 作用：变体定义用于指定不同属性组合下的样式变化。这里的对象不是“第二个值”的固定形式，而是变体定义的一种常见结构。
  3. 其他可选参数
    1. 复合变体（Compound Variants）：一个对象，定义了当多个变体属性同时满足特定条件时应用的额外CSS类名。
    2. 默认变体（Default Variants）：一个数组或者是一个字符串，指定了当没有提供特定变体属性值时应使用的默认值。

4.3 定义CVA函数

4.3.1 基础使用

以下是一个简单的示例，展示如何使用 CVA 创建一个带有变体的按钮组件。

4.3.1.1 第一步

button.tsx

import React from "react";
import { cva } from "class-variance-authority";export type ButtonProps = {intent: "primary" | "secondary" | "danger";size: "small" | "medium" | "large";children: React.ReactNode;
}/** * 定义样式变体 buttonVariants*  cva：核心函数，用于定义样式变体。*  variants：定义组件的变体（如 intent 和 size）。*  defaultVariants：设置默认的变体值。
*/
const buttonVariants = cva("button", {variants: {intent: {primary: "bg-blue-500 text-white",secondary: "bg-gray-500 text-white",danger: "bg-red-500 text-white",},size: {small: "text-sm py-1 px-2",medium: "text-base py-2 px-4",large: "text-lg py-3 px-6",},},defaultVariants: {intent: "primary",size: "medium",},
});/** * 按钮组件 *  buttonVariants({ intent, size })：根据传入的 intent 和 size 动态生成类名。
*/
const Button = ({ intent, size, children }: ButtonProps) => {return (<button className={buttonVariants({ intent, size })}>{children}</button>);
};export default Button;

4.3.2.1.2 第二步 使用 botton 按钮

根据传入的 intent 和 size 动态生成类名。

import Button from './botton.tsx'function App() {return (<div>{/* button bg-blue-500 text-white text-base py-2 px-4 */}<Button intent="primary" size="medium">Primary Button</Button>{/* button bg-gray-500 text-white text-sm py-1 px-2500 */}<Button intent="secondary" size="small">Secondary Button</Button>{/* 样式为: button bg-red-500 text-white text-lg py-3 px-6 */}<Button intent="danger" size="large">Danger Button</Button></div>);
}export default App;
4.3.1.2 高级用法
4.3.1.2.1 第一步： 复合变体, 你可以定义多个变体的组合!

button.tsx

import React from "react";
import { cva } from "class-variance-authority";export type ButtonProps = {intent: "primary" | "secondary"disabled: booleanchildren: React.ReactNode
}/** * 定义样式变体 *  cva 第一个参数："button" 是基础类名，用于定义组件的默认样式(如果有多个用空格分即可)。*  variants：定义组件的变体（如 intent 和 size）。*  defaultVariants：设置默认的变体值。*  compoundVariants：用于定义多个变体的组合样式。   
*/const buttonVariants = cva("button", {variants: {intent: {primary: "bg-blue-500 text-white",secondary: "bg-gray-500 text-white",},outlined: {true: "border-2",},},compoundVariants: [{intent: "primary",outlined: false,class: "border-blue-500",},{intent: "secondary",outlined: false,class: "border-gray-500",},],
});/** * 按钮组件 *  buttonVariants({ intent, disabled })：根据传入的 intent 和 size 动态生成类名。*  当 intent="secondary" 时，disabled=false 时, 它会添加 border-gray-500 类名到结果数组中; 
*/const Button = ({ intent, disabled }: ButtonProps) => {return (<buttonclassName={buttonVariants({intent,outlined: disabled,})}>Click Me</button>);
};export default Button;
4.3.1.2.2 第二步

根据传入的 intent 和 disabled动态生成类名。

import Button from './botton.tsx'function App() {return (<div>{/* 当 intent="secondary" 时，disabled=true 时，样式为：button bg-blue-500 text-white border-2 */}<Button intent="primary" disabled>Primary Button</Button>{/* 当 intent="secondary" 时，disabled=false 时，样式为:button bg-gray-500 text-white border-gray-500 */}<Button intent="secondary"disabled={false}>Secondary Button</Button></div>);
}export default App;

5. 优点

  1. 声明式 API：通过 variants 和 defaultVariants 定义样式，代码更清晰。
  2. 类型安全：如果你使用 TypeScript，CVA 可以提供完整的类型推断。
  3. 灵活性：支持复合变体和动态类名，适合复杂的 UI 组件。

6. 总结

  1. Class Variance Authority (CVA) 是一个强大的工具，特别适合管理组件的样式变体。
  2. 它可以帮助你减少重复代码，提高开发效率。
  3. 如果你正在构建一个需要多种样式变体的组件库，CVA 是一个非常好的选择！
  4. 如果你有更多问题，欢迎随时问我！😊

相关文章：

【CSS 】Class Variance Authority CSS 类名管理工具库

1.背景、什么是 CVA&#xff1f; Class Variance Authority (CVA) 是一个用于管理 CSS 类名 的工具库&#xff0c;特别适合在 React 或 Vue 等前端框架中使用。它可以帮助你更轻松地处理组件的 样式变体&#xff08;Variants&#xff09;&#xff0c;比如按钮的不同状态&#…...

编程日记 2025/8/22 13:10:20

【Linux】36.简单的TCP网络程序

文章目录 1. TCP socket API 详解1.1 socket():打开一个网络通讯端口1.2 bind():绑定一个固定的网络地址和端口号1.3 listen():声明sockfd处于监听状态1.4 accept():接受连接1.5 connect():连接服务器 2. 实现一个TCP网络服务器2.1 Log.hpp - "多级日志系统"2.2 Daem…...

编程日记 2025/8/20 14:24:24

Win 转 MacBook Pro 踩坑指南

前言 Window 和 macOS 系统的差异还是很大的&#xff0c;我从 Thinkpad 转用 M1 的 Macbook pro 已经一年了&#xff0c;几乎没有任何不适应&#xff0c;整体感受那是真的牛&#x1f443;&#xff0c;速度和续航惊艳到我了&#xff0c;同时开启 6个 vscode 加几十个浏览器标签…...

编程日记 2025/8/22 23:37:59

【模拟CMOS集成电路设计】带隙基准（Bandgap）设计与仿真（基于运放的电流模BGR）

【模拟CMOS集成电路设计】带隙基准&#xff08;Bandgap&#xff09;设计与仿真 前言工程文件&部分参数计算过程&#xff0c;私聊~ 一、 设计指标指标分析&#xff1a; 二、 电路分析三、 仿真3.1仿真电路图3.2仿真结果(1)运放增益(2)基准温度系数仿真(3)瞬态启动仿真(4)静态…...

编程日记 2025/8/20 17:39:54

手写一个Tomcat

Tomcat 是一个广泛使用的开源 Java Servlet 容器&#xff0c;用于运行 Java Web 应用程序。虽然 Tomcat 本身功能强大且复杂&#xff0c;但通过手写一个简易版的 Tomcat&#xff0c;我们可以更好地理解其核心工作原理。本文将带你一步步实现一个简易版的 Tomcat&#xff0c;并深…...

编程日记 2025/8/19 21:20:07

QT显示网页控件QAxWidget、QWebEngineView及区别

一.QT种显示网页控件QAxWidget 1.介绍 QAxWidget 属于 QtAxContainer 模块&#xff0c;ActiveX 是微软提出的一种组件对象模型&#xff08;COM&#xff09;技术&#xff0c;允许不同的软件组件在 Windows 操作系统上进行交互和集成。QAxWidget 为开发者提供了在 Qt 应用程序中…...

编程日记 2025/8/19 17:51:57

【AI智能体报告】开源AI助手的革命：OpenManus深度使用报告

一、引言&#xff1a;当开源智能体走进生活 2025年3月&#xff0c;MetaGPT团队用一场"开源闪电战"改写了AI Agent的竞争格局。面对商业产品Manus高达10万元的邀请码炒作&#xff0c;他们仅用3小时便推出开源替代品OpenManus&#xff0c;首日即登顶GitHub趋势榜。 …...

编程日记 2025/8/22 23:40:16

VS Code连接服务器教程

VS Code是什么 VS Code&#xff08;全称 Visual Studio Code&#xff09;是一款由微软推出的免费、开源、跨平台的代码编辑神器。VS Code 支持 所有主流操作系统&#xff0c;拥有强大的功能和灵活的扩展性。 官网&#xff1a;https://code.visualstudio.com/插件市场&#xff1…...

编程日记 2025/8/22 23:38:02

装饰器模式的C++实现示例

核心思想 装饰器设计模式是一种结构型设计模式&#xff0c;它允许动态地为对象添加额外的行为或职责&#xff0c;而无需修改其原始类。装饰器模式通过创建一个装饰器类来包装原始对象&#xff0c;并在保持原始对象接口一致性的前提下&#xff0c;扩展其功能。 装饰器模式的核…...

编程日记 2025/8/16 10:02:10

C 语言数据结构（二）：顺序表和链表

目录 1. 线性表 2. 顺序表 2.1 概念及结构 2.1.1 静态顺序表&#xff08;不常用&#xff09; 2.1.2 动态顺序表&#xff08;常用&#xff09; ​编辑 2.2 练习 2.2.1 移除元素 2.2.2 删除有序数组中的重复项 2.2.3 合并两个有序数组 2.3 顺序表存在的问题 3. 链表 …...

编程日记 2025/8/22 23:45:04

TDengine 服务无法启动常见原因

taosd 是 TDengine 的核心服务进程&#xff0c;如果无法启动将导致整个数据库无法使用&#xff0c;了解常导致无法启动的原因&#xff0c;可以帮你快速解决问题。 1. 如何查找日志 无法启动的原因记录在日志中&#xff0c;日志文件默认在 /var/log/taos 的 taosdlog.0 或者 t…...

编程日记 2025/8/22 23:35:51

在 UniApp 中实现stream流式输出 AI 聊天功能，AI输出内容用Markdown格式展示

在 UniApp 中实现流式 AI 聊天功能 介绍 在现代 Web 开发中&#xff0c;流式 API 响应能够显著提升用户体验&#xff0c;尤其是在与 AI 聊天接口进行交互时。本文将介绍如何在 UniApp 中使用 Fetch API 实现一个流式响应的 AI 聊天功能&#xff0c;包括实时更新聊天内容和滚动…...

编程日记 2025/8/22 23:35:53

数据库SQL的配置和练习题

一、MySQL的安装 1.安装包下载 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 2.解压软件包 将MySQL软件包解压在没有中文和空格的目录下 3.设置配置文件 在解压目录下创建my.ini文件并添加内容如下&#xff1a; ​ [client] #客户端设置&…...

编程日记 2025/8/22 23:36:14

Pytorch的一小步，昇腾芯片的一大步

Pytorch的一小步&#xff0c;昇腾芯片的一大步 相信在AI圈的人多多少少都看到了最近的信息&#xff1a;PyTorch最新2.1版本宣布支持华为昇腾芯片&#xff01; 1、 发生了什么事儿&#xff1f; 在2023年10月4日PyTorch 2.1版本的发布博客上&#xff0c;PyTorch介绍的beta版本…...

编程日记 2025/8/19 20:27:27

AI+办公 Task1

作业 题目1&#xff1a;提示词除了三要素“角色”、“背景”、“要求”之外&#xff0c;还有哪些关键要素 提示词有一个框架叫CO-STAR框架&#xff0c;还有的关键要素有风格、任务、响应格式等。 要素适用场景实际案例​Context需要限定领域或场景的任务"作为医学助手&…...

编程日记 2025/8/22 14:16:40

文件系统调用─── linux第17课

目录 linux 中man 2和man 3的区别 文件内容介绍 C语言文件接口 示例: 输出信息到显示器&#xff0c;你有哪些方法 总结: 系统文件I/O 文件类的系统调用接口介绍 示例 open 函数具体使用哪个,和具体应用场景相关&#xff0c; write read close lseek ,类比C文件相关接…...

编程日记 2025/8/22 8:07:00

概念|RabbitMQ 消息生命周期 待消费的消息和待应答的消息有什么区别

目录 消息生命周期 一、消息创建与发布阶段 二、消息路由与存储阶段 三、消息存活与过期阶段 四、消息投递与消费阶段 五、消息生命周期终止 关键配置建议 待消费的消息和待应答的消息 一、待消费的消息&#xff08;Unconsumed Messages&#xff09; 二、待应答的消息…...

编程日记 2025/8/22 21:41:16

Javaweb后端文件上传@value注解

文件本地存储磁盘 阿里云oss准备工作 阿里云oss入门程序 要重启一下idea&#xff0c;上面有cmd 阿里云oss案例集成 优化 用spring中的value注解...

编程日记 2025/8/22 23:35:54

DeepSeek技术演进与发展前瞻

如果喜欢可以订阅专栏哟(＾Ｕ＾)ノ~ＹＯ，至少更新6年 以下DeepSeek未来发展的技术分析框架及核心内容示范 # -*- coding: utf-8 -*- """ DeepSeek技术演进模拟器（概念验证代码） 本代码展示动态架构调整的核心逻辑 """class DynamicArchitect…...

编程日记 2025/8/22 23:38:01

Java常见面试技术点整理讲解——后端框架（整理中，未完成）

前言&#xff1a; 对于后端常用框架的技术整理&#xff0c;其实框架在平时就是会用就行&#xff0c;但面试时多半需要描述实现原理&#xff0c;这个要靠自己理解&#xff0c;不推荐死记硬背。 这篇和另外几篇文章区分开&#xff0c;主要用于规整Java后端各种框架&#xff0c;…...

编程日记 2025/8/22 11:24:26

目标检测YOLO实战应用案例100讲-基于毫米波雷达的多目标检测 （续）

目录 3.2 改进的CFAR目标检测算法 3.3 算法步骤描述 3.4 实验结果与分析 基于VGG16-Net的毫米波雷达目标检测算法 4.1 VGG16-Net网络模型 4.2 改进VGG16-Net网络的目标检测算法 4.3 算法步骤描述 4.4 实验结果与分析 知识拓展 基于毫米波雷达的多目标检测：使…...

编程日记 2025/8/20 12:24:12

python爬虫：Android自动化工具Auto.js的详细使用

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 1. Auto.js 简介2. 安装与配置2.1 安装 Auto.js2.2 安装 Python 环境2.3 安装 ADB 工具3. Python 与 Auto.js 结合3.1 通过 ADB 执行 Auto.js 脚本3.2 通过 Python 控制 Auto.js3.3 通过 Python 与 Auto.js 交互4. 常用…...

编程日记 2025/8/22 23:33:58

MyBatis-Plus 注解大全

精心整理了最新的面试资料和简历模板&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 MyBatis-Plus 注解大全 MyBatis-Plus 是基于 MyBatis 的增强工具&#xff0c;通过注解简化了单表 CRUD 操作和复杂查询的配置。以下是常用注解的分类及详细说…...

编程日记 2025/8/22 23:36:14

牛客周赛 Round 84——小红的陡峭值（四）

牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ 小红的陡峭值&#xff08;四&#xff09; 题目&#xff1a; 思路&#xff1a; 题目告诉我们关于树的陡峭值的定义&#xff0c;那一开始看起来无从下手&#xff0c;但是当我们选取某一个节点为根节点时&#…...

编程日记 2025/8/22 23:34:00

Redis 内存淘汰策略深度解析

Redis 作为高性能的内存数据库&#xff0c;其内存资源的高效管理直接关系到系统的稳定性和性能。当 Redis 的内存使用达到配置的最大值&#xff08;maxmemory&#xff09;时&#xff0c;新的写入操作将触发内存淘汰机制&#xff08;Eviction Policy&#xff09;&#xff0c;以释…...

编程日记 2025/8/22 5:21:06

微前端之 Garfish.js 的基础使用教程和进阶配置

前言 在现代前端开发中&#xff0c;微前端架构逐渐成为一种流行的解决方案。它允许将大型应用拆分成多个小型独立的子应用&#xff0c;从而提高开发效率和可维护性。Garfish.js 是一个强大的微前端框架&#xff0c;可以帮助我们轻松实现这一架构。在本文中&#xff0c;通过一个…...

编程日记 2025/8/18 14:48:04

Rabbitmq--延迟消息

13.延迟消息 延迟消息&#xff1a;生产者发送消息时指定一个时间&#xff0c;消费者不会立刻收到消息&#xff0c;而是在指定时间之后才会收到消息 延迟任务&#xff1a;一定时间之后才会执行的任务 1.死信交换机 当一个队列中的某条消息满足下列情况之一时&#xff0c;就会…...

编程日记 2025/8/22 23:40:17

Webshell原理与利用

本文内容仅用于技术研究、网络安全防御及合法授权的渗透测试&#xff0c;严禁用于任何非法入侵、破坏或未经授权的网络活动。 1. WebShell的定义与原理 定义&#xff1a;WebShell是一种基于Web脚本语言&#xff08;如PHP、ASP、JSP&#xff09;编写的恶意后门程序&#xff0c;…...

编程日记 2025/8/22 23:42:47

Android 内存泄漏实战：从排查到修复的完整指南

通过实战示例和工具使用&#xff0c;帮助开发者理解、排查和修复 Android 应用中的内存泄漏问题 1. 什么是内存泄漏&#xff1f; 定义&#xff1a;内存泄漏是指程序中已动态分配的内存由于某种原因未能释放&#xff0c;导致系统内存的浪费&#xff0c;最终可能导致应用崩溃或性…...

编程日记 2025/8/22 8:27:41

Liunx系统 : 进程间通信【IPC-Shm共享内存】

文章目录 System V共享内存创建共享内存shmget 控制共享内存shmctl shm特性 System V System V是Liunx中的重要的进程间通信机制&#xff0c;它包括&#xff08;shm&#xff09;共享内存&#xff0c;&#xff08;msg&#xff09;消息队列和&#xff08;sem&#xff09;信号量。…...

编程日记 2025/8/15 20:59:07

c语言笔记 数组指针

数组指针是指针类型的一种&#xff0c;一般数组指针跟二维数组&#xff0c;一维数组结合比较多&#xff0c;下面我们通过图片来探讨一下数组指针的使用以及结合起来的联系。 1.数组指针与一维数组 int a[3]; //一维数组 int aa[2][3];//二维数组 数组元素类型 int [3] int (*p…...

编程日记 2025/8/21 15:38:43

SpringBoot + vue 管理系统

SpringBoot vue 管理系统 文章目录 SpringBoot vue 管理系统 1、成品效果展示2、项目准备3、项目开发 3.1、部门管理 3.1.1、前端核心代码3.1.2、后端代码实现 3.2、员工管理 3.2.1、前端核心代码3.2.2、后端代码实现 3.3、班级管理 3.3.1、前端核心代码3.3.2、后端代码实现 …...

编程日记 2025/8/20 7:22:10

Python语法核心架构与核心知识点：从理论到实践

一、Python的核心设计哲学 Python以“简洁优雅”为核心理念&#xff0c;遵循以下原则&#xff1a; # Zen of Python&#xff08;输入 import this 可查看&#xff09; >>> import this The Zen of Python, by Tim Peters ... Simple is better than complex. Readab…...

编程日记 2025/8/22 21:55:09

OpenHarmony子系统开发 - 编译构建Kconfig可视化配置指导

OpenHarmony子系统开发 - 编译构建Kconfig可视化配置指导 概述 功能简介 该功能基于Kconfiglib与Kconfig实现&#xff0c;方便用户个性化配置OpenHarmony产品子系统部件。 基于Kconfig实现的可视化配置功能具有以下优点&#xff1a; 能直观且全面地展示软件的部件选项。可…...

编程日记 2025/8/20 18:37:43

管中窥豹数字预失真（DPD）

管中窥豹数字预失真&#xff08;DPD&#xff09; 数字预失真在通信领域发挥了巨大的作用&#xff0c;对提高功放效率、改善误码率起了不可忽略的作用&#xff0c;广泛运用与通信、雷达等各种领域。但是对于普通用户&#xff0c;它显得及其高深神秘。今天就用这个短文&#xff…...

编程日记 2025/8/18 2:29:52

spring-boot-starter和spring-boot-starter-web的关联

maven的作用是方便jar包的管理&#xff0c;所以每一个依赖都是对应着相应的一个或者一些jar包&#xff0c;从网上看到很多对spring-boot-starter的描述就是“这是Spring Boot的核心启动器&#xff0c;包含了自动配置、日志和YAML。”没看太明白&#xff0c;所参与的项目上也一直…...

编程日记 2025/8/18 2:29:50

梯度计算中常用的矩阵微积分公式

标量对向量求导的常用数学公式 设标量函数 y f ( x ) y f(\boldsymbol{x}) yf(x)&#xff0c;其中 x ( x 1 , x 2 , ⋯ , x n ) T \boldsymbol{x} (x_1, x_2, \cdots, x_n)^{\rm T} x(x1​,x2​,⋯,xn​)T是一个 n n n维列向量。标量 y y y对向量 x \boldsymbol{x} x的导数…...

编程日记 2025/8/16 9:58:03

vim 编写/etc/docker/daemon.json文件时，E212: 无法打开并写入文件

目录 问题描述 解决方法 1、创建/etc/docker目录 2、打开/etc/docker目录 3、创建daemon.json文件 4、vim 编辑daemon.json文件 问题描述 当我们输入代码&#xff1a;vim /etc/docker/daemon.json时&#xff0c;报E212: 无法打开并写入文件错误&#xff0c;如下图 vim /e…...

编程日记 2025/8/20 9:49:24

http 模块的概念及作用详细介绍

目录 1. http 模块概述 2. http 模块的作用 3. http 服务器代码示例 运行代码 4. http 客户端代码示例 运行代码 5. 总结 1. http 模块概述 http 模块是 Node.js 内置的核心模块之一&#xff0c;它用于创建 HTTP 服务器和客户端&#xff0c;支持处理 HTTP 请求和响应。…...

编程日记 2025/8/16 9:58:05

重生之我在学Vue--第5天 Vue 3 路由管理（Vue Router）

重生之我在学Vue–第5天 Vue 3 路由管理&#xff08;Vue Router&#xff09; 文章目录 重生之我在学Vue--第5天 Vue 3 路由管理&#xff08;Vue Router&#xff09;前言一、路由配置与导航1.1 什么是 Vue Router&#xff1f;1.2 安装 Vue Router1.3 基本路由配置步骤代码示例 1…...

编程日记 2025/8/18 9:22:04

常见排序算法深度评测：从原理到10万级数据实战

常见排序算法深度评测&#xff1a;从原理到10万级数据实战 摘要 本文系统解析冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序和基数排序8种经典算法&#xff0c;通过C语言实现10万随机数排序并统计耗时。测试显示&#xff1a;快速排序综合性能最优&…...

编程日记 2025/8/19 17:38:10

搭建BOA服务器

BOA服务器是嵌入式常用的服务器类型&#xff0c;嵌入式程序作为后端时候如果想配合网页进行显示&#xff0c;利用BOA服务器搭建网络界面是不错的选择 首先下载boa官方安装包 Boa Webserver 下载后传输到Ubuntu随便文件夹&#xff0c;解压 tar -xvf boa-0.94.13.tar.gz 进入…...

编程日记 2025/8/21 18:49:45

JSON.parse(JSON.stringify())深拷贝不会复制函数

深拷贝 是指创建一个新对象&#xff0c;并递归地复制原对象中所有层级的属性和值&#xff0c;从而确保新对象与原对象完全独立 深拷贝的实现方法 &#xff1a; 1. 使用 JSON.parse(JSON.stringify()) 函数会被忽略复制&#xff0c;比如&#xff0c;下面的对象的forma…...

编程日记 2025/8/21 23:01:55

debug_unpack_ios failed: Exception: Failed to codesign 解决方案（亲测有效）

debug_unpack_ios failed: Exception: Failed to codesign 解决方案&#xff08;亲测有效&#xff09; 背景原因解决方案tipsresult 背景 执行flutter doctor全通过后run项目依然报错 原因 1、检查flutter Mac的flutter项目在哪个文件夹内 2、检查flutter Sdk在哪个文件夹内 …...

编程日记 2025/8/16 10:01:47

Docker篇

1.docker环境搭建&#xff1a; 1.1软件仓库的配置rhel9&#xff1a; #cd/etc/yum.repos.d #vim docker.repo [docker] namedocker-ce baseurlhttps://mirrors.aliyun.com/docker-ce/linux/rhel/9/x86_64/stable gpgcheck0 1.2安装docker并且启动服务 yum install -y dock…...

编程日记 2025/8/20 14:22:02

【Linux】基本命令

目录 &#x1f525;一、基础命令 1.sudo su&#xff08;superuser do&#xff09; 2.pwd&#xff08;print working directory&#xff09; 3.ls&#xff08;list&#xff09; 4.cd&#xff08;change directory&#xff09; 5.mkdir&#xff08;make directory&#xff…...

编程日记 2025/8/22 3:22:28

win10电脑鼠标速度突然变的很慢？

电脑鼠标突然变很慢&#xff0c;杀毒检测后没问题&#xff0c;鼠标设置也没变&#xff0c;最后发现可能是误触鼠标的“DPI”调节键。 DPI调节键在鼠标滚轮下方&#xff0c;再次点击即可恢复正常鼠标速度。 如果有和-的按键&#xff0c;速度变快&#xff0c;-速度变慢。 图源&…...

编程日记 2025/8/22 18:49:12

前端（vue）学习笔记（CLASS 3）：生命周期工程化开发入门

1、生命周期 Vue生命周期&#xff1a;一个Vue实例从创建到销毁的整个过程 生命周期四个阶段&#xff1a;创建、挂载、更新、销毁 1、创建阶段&#xff1a;响应式数据 2、挂载阶段&#xff1a;渲染模板 3、更新阶段&#xff1a;数据修改、更新视图&#xff08;执行多次&…...

编程日记 2025/8/16 5:30:00

Python写一个查星座的小程序，适合初学者练手——字典和if语句练习

一、界面预览 二、完整代码 # 导入必要的库 import tkinter as tk from tkinter import ttk # 导入ttk模块用于更现代的控件 from PIL import Image, ImageTk # 用于处理图片 import os # 用于文件路径操作class ZodiacApp:def __init__(self, root):self.root rootself.r…...

编程日记 2025/8/21 9:53:48

云上特权凭证攻防启示录：从根账号AK泄露到安全体系升级的深度实践

事件全景：一场持续17分钟的云上攻防战 2025年3月9日15:39，阿里云ActionTrail日志突现异常波纹——根账号acs:ram::123456789:root（已脱敏）从立陶宛IP（164.92.91.227）发起高危操作。攻击者利用泄露的AccessKey（AK）在17分钟内完成侦察→提权→持久化攻击链，完整操作序列…...

编程日记 2025/8/21 1:19:11