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

element-ui自定义主题

news 来源：原创 2025/8/24 13:51:00

此处的element-ui为基于vue2.x的

由于https://element.eleme.cn/#/zh-CN/theme/preview（element的主题）报错503，

所以使用https://element.eleme.cn/#/zh-CN/component/custom-theme 自定义主题文档中，在项目中改变scss变量的方式去自定义主题

我此处使用的版本为 node 16.20.1 ; npm 8.19.4

在项目中安装node-sass sass-loader

npm install node-sass sass-loader -D

在项目中新建一个theme.scss文件

官网文档描述

在theme.scss中写入你需要覆盖的默认颜色

比如theme.scss文件中为一下代码

/* src/styles/element-variables.scss */
$--color-primary: #F56C6C;
$--color-text-regular: #67C23A;/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";

需要覆盖的scss命名，可看node_modules\element-ui\packages\theme-chalk\src\common\var.scss文件

在main.js中引入（此处main.js中不需要引入import 'element-ui/lib/theme-chalk/index.css';）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import './index.scss'Vue.use(ElementUI);new Vue({router,store,render: h => h(App)
}).$mount('#app')

此时页面引用element-ui的组件颜色就是你自定义的了，类似于下图

element-ui自定义主题

此处的element-ui为基于vue2.x的由于https://element.eleme.cn/#/zh-CN/theme/preview（element的主题）报错503， 所以使用https://element.eleme.cn/#/zh-CN/component/custom-theme 自定义主题文档中，在项目中改变scss变量的方…...

编程日记 2025/8/24 13:51:00

PhotoShop学习10

1.画板功能的使用使用画板功能可以轻松针对不同的设备和屏幕尺寸设计网页和 APP。画板是一种容器，类似于特殊图层组。画板中的图层在图层面板中，按画板进行分组。使用画板，一个文档中可以有多个设计版面，这样可以在画板之间轻…...

编程日记 2025/8/19 17:11:05

基于LLVM设计领域专用语言（DSL）的步骤——以激光微加工为例

1. 明确DSL的设计目标在激光微加工领域，DSL需解决以下问题： • 工艺参数抽象化：激光功率、频率、扫描路径等需用高阶语法描述，而非底层G代码。 • 实时性要求：控制指令需低延迟编译为机器码（如FPGA或运动控…...

编程日记 2025/8/20 21:40:31

【MAUI】IOS保活

文章目录概述sevice使用概述每种方法都是独立的，可以根据应用的需求单独使用。例如，如果应用的主要功能是跟踪用户的地理位置，则可以仅使用后台定位；若是为了保持应用在后台运行以完成特定任务（比如上传数据&#…...

编程日记 2025/8/24 13:51:00

shardingsphere-jdbc集成Seata分布式事务

1、导入相关依赖 <dependency><groupId>org.apache.shardingsphere</groupId><artifactId>shardingsphere-jdbc</artifactId><version>5.5.1</version></dependency><!-- shardingspher…...

编程日记 2025/8/24 3:55:37

基于区块链的技术应用探索

文章目录前言一、区块链技术的核心特性1.1 去中心化1.2 不可篡改性1.3 透明性与可追溯性1.4 智能合约机制二、区块链的典型应用场景2.1 金融与支付2.2 溯源与供应链管理2.3 数字身份与数据隐私2.4 数字资产与NFT2.5 公共服务与政务透明三、区块链的分类1.按权限管理方式分类…...

编程日记 2025/8/24 13:31:05

MQ(RabbitMQ)消息重复消费问题的全面解决方案

MQ消息重复消费是分布式系统中的常见问题，主要由网络问题、消费者故障、消息重试机制等引起。以下是针对RabbitMQ的完整解决方案体系： 一、消息生产端解决方案 1. 消息幂等设计全局唯一消息ID： MessageProperties props MessagePropert…...

编程日记 2025/8/20 1:35:14

windows Cursor 配置MCP的小坑

以高德地图MCP举例按需求配置好以后，会提示 Client closed 解决方案， windows 需要更改一下 commandargs 新增一个npx保存后Cursor设置MCP页面Refresh一下即可，打开的终端不要关闭最后贴一下文本代码，方便复制粘贴 {"m…...

编程日记 2025/8/24 13:49:09

探秘串口服务器厂家：背后的故事与应用

在科技飞速发展的今天，串口服务器作为连接串口设备与网络的桥梁，在工业自动化、智能交通、智能家居等众多领域发挥着关键作用。你是否好奇，那些生产串口服务器的厂家究竟有着怎样的故事？它们的产品背后又蕴含着怎样的原理呢&#…...

编程日记 2025/8/23 12:16:21

二叉树详细讲解（2/2）

4. 实现链式结构二叉树⽤链表来表⽰⼀棵⼆叉树，即⽤链来指⽰元素的逻辑关系。通常的⽅法是链表中每个结点由三个域组成，数据域和左右指针域，左右指针分别⽤来给出该结点左孩⼦和右孩⼦所在的链结点的存储地址，其结构如下&#…...

编程日记 2025/8/21 11:32:46

SpringBoot整合Redis限流

通过一个完整的Spring Boot项目演示如何用Redis实现简单的API限流功能。我们将从零开始搭建项目。一、环境准备 1.1 开发环境要求 JDK 1.8IntelliJ IDEA（推荐）Redis 5.0（本地安装）Postman（测试用） 1.2…...

编程日记 2025/8/20 18:23:47

（Matlab）自动驾驶仿真设计驾驶场景、配置传感器并生成合成数据

驾驶场景仿真平台核心功能一、场景搭建与编辑 ‌可视化场景构建‌ 使用拖放界面创建道路网络和角色模型（车辆、行人等）支持欧洲新车评估计划（Euro NCAP）测试协议及其他预置场景模板二、传感器配置 ‌车载传感器系统‌ 支持…...

编程日记 2025/8/19 22:30:52

接口测试（get请求方法）-----------实战演练

1.最简单的get请求方法 eg:请求一个王者荣耀语音包的接口接口文档如下： 2.把接口地址、请求方法、请求参数写到postman相应位置 3.填写请求参数的值，点击发送按钮，即可获得到返回参数...

编程日记 2025/8/24 13:50:35

【赵渝强老师】TiDB的列存引擎：TiFlash

TiDB的TiFlash提供列式存储，且拥有借助ClickHouse高效实现的协处理器层。除此以外，它与TiKV非常类似，依赖同样的Multi-Raft体系，以Region为单位进行数据复制和分散。TiFlash以低消耗不阻塞TiKV写入的方式，实时复制TiKV…...

编程日记 2025/8/22 2:03:52

《vue3学习手记3》

标签的ref属性 vue3和vue2中的ref属性： 用在普通DOM标签上，获取的是DOM节点 ref用在组件标签上，获取的是组件实例对象区别在于： 1.vue3中person子组件中的数据父组件App不能直接使用，需要引入并使用defineExpose才可…...

编程日记 2025/8/17 20:47:30

【Vue】从 MVC 到 MVVM：前端架构演变与 Vue 的实践之路

个人博客：haichenyi.com。感谢关注一. 目录一–目录二–架构模式的演变背景三–MVC：经典的分层起点四–MVP：面向接口的解耦尝试五–MVVM：数据驱动的终极形态六–Vue：MVVM 的现代化实践二. 架构模…...

编程日记 2025/8/19 7:10:35

Docker Compose 命令实现动态构建和部署一、编写支持动态版本号的 docker-compose.yml version: 3.8services:myapp:build: context: . # Dockerfile所在目录args:APP_VERSION: ${TAG:-latest} # 从环境变量获取版本号，默认latestimage: myapp:${TAG:-latest} …...

编程日记 2025/8/21 2:13:59

工厂模式实现案例

场景一：配置文件解析（工厂模式实现） 1. 定义解析器接口与具体实现 from abc import ABC, abstractmethod import json import yaml # 需要安装PyYAML库：pip install pyyamlclass ConfigParser(ABC):"""配置文件解…...

编程日记 2025/8/21 4:59:34

Vue3.5 企业级管理系统实战（十五）：其他全局设置项

在设置面板中，除了主题颜色的选择设置，还可以添加其他全局配置选项，如 tagsView 导航栏，Logo 的显示隐藏配置等。 1 Settings 的 Pinia 配置在 src/stores/settings.ts 中添加要持久存储的全局配置项，这里是 tagsVi…...

编程日记 2025/8/20 7:05:55

L2-052 吉利矩阵分

L2-052 吉利矩阵 - 团体程序设计天梯赛-练习集所有元素为非负整数，且各行各列的元素和都等于 7 的 33 方阵称为“吉利矩阵”，因为这样的矩阵一共有 666 种。本题就请你统计一下，把 7 换成任何一个 [2,9] 区间内的正整数 L，把矩…...

编程日记 2025/8/24 8:21:15

408 计算机网络知识点记忆（9）

前言本文基于王道考研课程与湖科大计算机网络课程教学内容，系统梳理核心知识记忆点和框架，既为个人复习沉淀思考，亦希望能与同行者互助共进。（PS：后续将持续迭代优化细节） 往期内容 408 计算机网络知识…...

编程日记 2025/8/20 22:09:52

矩阵基础+矩阵转置+矩阵乘法+行列式与逆矩阵

GPU渲染过程矩阵什么是矩阵（Matrix） 向量 （3，9，88） 点乘：计算向量夹角叉乘：计算两个向量构成平面的法向量。矩阵矩阵有3行，2列，所以表示为M32 获取固…...

编程日记 2025/8/22 13:38:09

如何在 .NET 环境中使用 Npgsql 驱动连接 KaiwuDB

在现代软件开发中，数据库连接和操作是任何应用程序的核心部分。本文将介绍如何在 .NET 环境下，使用 Npgsql 驱动连接 KaiwuDB，并执行基本的数据库操作，包括创建表、插入数据和查询操作。我们假设您已经安装并配置好了 KaiwuDB 数据…...

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

【代理错误 django】Request error: HTTPSConnectionPool(host=‘‘, port=443): 、

❗问题 ❶：仍然是代理错误（ProxyError） 错误日志： Request error: HTTPSConnectionPool(hostxueshu.baidu.com, port443): Max retries exceeded ... Caused by ProxyError(Unable to connect to proxy, FileNotFoundError(2, N…...

编程日记 2025/8/19 5:28:00

5.9 《GPT-4调试+测试金字塔：构建高可靠系统的5大实战策略》

5.4 测试与调试：构建企业级质量的保障体系关键词：测试金字塔模型、GPT-4调试助手、LangChain调试模式、异步任务验证测试策略设计（测试金字塔实践） #mermaid-svg-RblGbJVMnCIShiCW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill…...

编程日记 2025/8/17 20:36:09

Maven 多仓库和多镜像配置

Maven是一个流行的Java项目构建和管理工具。在Maven中，我们可以配置多个仓库源来下载和管理依赖项。同时，我们还可以使用repositories和mirrors进行配置，以满足特定的需求。首先，让我们了解一下repositories和mirrors的作用。在M…...

编程日记 2025/8/23 6:21:47

案例驱动的 IT 团队管理：创新与突破之路：第五章创新管理：从机制设计到文化养成-5.1 创新激励体系-5.1.3失败案例的价值转化机制

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲失败案例的价值转化机制：IT团队创新管理中的"黑天鹅"炼金术1. 认知重构：重新定义失败的价值1.1 传统失败管理的困境1.2 失败价值转化模型 …...

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

华为纯血卓易通使用记录

（1）我们在测试华为纯血的时候，发现了，使用咱们的基站上的wifi, wifi与手机终端是互相ping 通的， 手机可以发信号到基站，但基站收到信号后，也发出信号 ，但信号不能到达手机。这个是…...

编程日记 2025/8/23 7:10:41

计算机网络中科大 - 第7章网络安全（详细解析）-以及案例

目录 🛡️ 第8章：网络安全（Network Security）优化整合笔记📌 本章学习目标一、网络安全概念二、加密技术（Encryption）1. 对称加密（Symmetric Key）2. 公钥加密&#xff0…...

编程日记 2025/8/19 21:22:57

初识Redis · set和zset

目录前言： set 基本命令交集并集差集内部编码和应用场景 zset 基本命令交集并集差集内部编码和应用场景应用场景（AI生成） 排行榜系统应用背景设计思路热榜系统应用背景设计思路热度计算方式总结对比表前言&a…...

编程日记 2025/8/23 12:41:50

Prometheus+Grafana+K8s构建监控告警系统

一、技术介绍 Prometheus、Grafana及K8S服务发现详解 Prometheus简介 Prometheus是一个开源的监控系统和时间序列数据库，最初由SoundCloud开发，现已成为CNCF(云原生计算基金会)的毕业项目‌。它专注于实时监控和告警，特别适合云原生和分布式…...

编程日记 2025/8/21 10:24:10

用 AI + 前端实现一个简易产品图生成器：上传商品标题 → 多场景展示图自动生成

文章目录一、项目背景与功能概述核心功能： 二、技术选型与环境准备安装依赖与 API Key 配置三、核心功能模块实现1. 商品图生成器核心逻辑2. 组件模板与 UI 结构四、功能拓展与优化建议（附代码思路）✅ 1. 本地历史记录可视化✅ 3. 支持图片…...

编程日记 2025/8/19 23:51:55

实现高效灵活的模糊搜索：JavaScript中的多条件过滤实践

现代Web应用中，数据搜索功能是用户体验的关键部分。本文将深入探讨如何实现一个高效灵活的模糊搜索函数，支持多条件组合查询、精确匹配、模糊匹配以及时间范围筛选。需求分析我们需要一个通用的搜索函数，能够处理以下场景： 多…...

编程日记 2025/8/21 21:59:31

ChatterBot的JupyterLab实践指南，从零开始构建AI聊天机器人

从手机上的语音助手到电商平台的客服机器人，这些能理解人类语言的程序背后，都离不开自然语言处理（NLP）技术的支撑。本文将以JupyterLab为实验平台，带您亲手打造一个会对话的AI机器人。通过这个项目，您不仅能…...

编程日记 2025/8/17 18:34:40

《深度学习》课程之卷积神经网络原理与实践教学设计方案

《深度学习》课程之卷积神经网络原理与实践教学设计方案一、教学目标设计 （一）知识目标学生能够准确描述卷积神经网络（CNN）的基本定义，包括其核心组成部分（如卷积层、池化层、全连接层等）及…...

编程日记 2025/8/24 1:12:57

快手OneRec 重构推荐系统：从检索排序到生成统一的跃迁

文章目录 1. 背景2. 方法2.1 OneRec框架2.2 Preliminary2.3 生成会话列表2.4 利用奖励模型进行迭代偏好对齐2.4.1 训练奖励模型2.4.2 迭代偏好对齐 3. 总结昨天面试的时候聊到了OneRec，但是由于上次看这篇文章已经是一个月之前，忘得差不多了&#xff0c…...

编程日记 2025/8/20 17:57:11

算法——直接插入排序

目录一、直接插入排序的定义二、直接插入排序的原理三、直接插入排序的特点四、代码实现一、直接插入排序的定义直接插入排序是一种简单直观的排序算法，其基本思想是将一个元素插入到已经排好序的部分数组中，使得插入后的数组仍然保持有序。具…...

编程日记 2025/8/23 4:52:53

Linux 软件管理

文章目录 dpkg软件包管理工具APT软件包管理工具apt-get命令apt-cache Linux操作系统主要支持RPM和Deb两种软件包管理工具。 RPM（Redhat Package Manager）是一种用于互联网下载包的打包及安装工具。其原始设计理念是开放的，不仅可以在Redhat平…...

编程日记 2025/8/20 21:18:04

电力实训中应注意以下安全事项

电力实训中应注意以下安全事项： 一、环境准备与设备检查保持实训场地整洁通风，清除易燃物与杂物，确保操作空间充足。电路容量需匹配设备功率，安装漏电保护器及空气开关。非带电金属设备外壳应接地，定期检查线路…...

编程日记 2025/8/21 13:49:56

序列化-流量统计

新建文件夹及文件编写流量统计的Bean对象 package com.root.mapreduce.writable; import org.apache.hadoop.io.Writable; import java.io.DataInput; import java.io.DataOutput; import java.io.IOException; //1 继承Writable接口 public class FlowBean implements Writab…...

编程日记 2025/8/17 1:51:12

矩阵游戏--二分图的匈牙利算法

https://www.luogu.com.cn/problem/P1129 学习路线---https://blog.csdn.net/qq_39304630/article/details/108135381 1.二分图就是两个独立的两个集合，如这里是行和列 2.匈牙利匹配就是媒婆拉媒，没伴侣或者伴侣可以换就将当前的塞给她 3.最后true的…...

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

spring security解析

Spring Security 中文文档 :: Spring Security Reference 1. 密码存储最早是明文存储，但是攻击者获得数据库的数据后就能得到用户密码。于是将密码单向hash后存储，然后攻击者利用彩虹表（算法高级（23）-彩虹表&…...

编程日记 2025/8/20 8:15:13

【技巧】chol分解时，矩阵非正定时的临时补救措施，以MATLAB为例

针对非正定矩阵无法进行标准Cholesky分解的解决方案及MATLAB代码实现，结合不同应用场景的需求分层解析文章目录数值修正方法修正Cholesky分解LDL分解矩阵变换与重构特征值修正乘积法构造正定矩阵替代分解与降维方法QR分解与SVD主成分分析（PCA&#x…...

编程日记 2025/8/24 4:16:42

Hi3518E官方录像例程源码流程分析（三）

文章目录第二阶段，初始化第一阶段计算好的参数SAMPLE_COMM_SYS_Init 第三阶段，启动VI和chn捕获SAMPLE_COMM_VI_StartVi（）SAMPLE_COMM_VI_StartBT656小阶段1 SAMPLE_COMM_VI_StartMIPI_BT1120（）小阶段1 SAM…...

编程日记 2025/8/19 15:23:51

37.Java 异步回调（CompletableFuture 概述、CompletableFuture 使用）

一、CompletableFuture 概述 CompletableFuture 在 Java 里面被用于异步编程，异步通常意味着非阻塞，可以使得任务单独运行在与主线程分离的其他线程中，并且通过回调可以在主线程中得到异步任务的执行状态，是否完成，和是…...

编程日记 2025/8/22 1:44:51

数学建模AI智能体(4.16大更新)

别的不说就说下面这几点，年初内卷到现在，就现阶段AI水平，卷出了我比较满意的作品，这里分享给各位同学，让你们少走弯路： 1.轻松辅导学生 2.帮助学习 3.突破知识壁垒，缩短与大佬的差距 4.打破…...

编程日记 2025/8/19 1:49:23

Python 第三节流程控制

目录 1.分支结构条件控制 2.循环语句 3.循环控制语句 4.嵌套循环控制代码执行的顺序顺序结构分支结构循环结构 1.分支结构条件控制让代码有自主选择的能力, 当满足某个条件的时候执行对应的操作 1.1 if语句语法格式 if 判断条件:执行语句(当判断条件为真的时候执…...

编程日记 2025/8/20 2:22:00

深入探究Linux编译器gcc/g++：从基础到进阶

目录一、编译的幕后流程 （一）预处理：宏与文件的魔法融合 （二）编译：代码规范性的严格审视 （三）汇编：迈向机器语言的关键一步 （四）连接&a…...

编程日记 2025/8/21 2:13:56

用户态网络缓冲区

用户态网络缓冲区缓冲区作用用于临时存储数据以便高效地进行读写操作。用户态缓冲区位于用户空间中，与内核空间中的缓冲区（内核缓冲区）相对。用户态接受缓存区粘包问题，缓存非完整数据包生产者的速度 > 消费者的速…...

编程日记 2025/8/17 18:31:53

解决Flutter 2.10.5在升级Xcode 16后的各种报错

Flutter 环境 Flutter version 2.10.5Dart version 2.16.2DevTools version 2.9.2CocoaPods version 1.16.2Xcode 16.3 问题一：XCResult parsing error: Error: This command is deprecated and will be removed in a future release, --legacy flag is required t…...

编程日记 2025/8/19 22:24:23

相关文章：