【VUE】ArcoDesign之自定义主题样式和命名空间
前言
Arco Design是什么?
Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库
- 官网地址:https://arco.design/
- 同时也提供了一套开箱即用的中后台前端解决方案:
Arco Design Pro(https://pro.arco.design/)
Arco Design样式基于less技术栈,但也同ElementPlus默认主题,CSS 命名采用BEM风格,方便使用者覆盖样式。
Arco Design 提供的默认命名空间为是空的。 在特殊情况下,我们需要自定义命名空间。
官方文档:
- 【ArcoDesign | 自定义主题】
以下演示按照按需导入模式下进行
1、环境
- vue:
^3.3.4 - vite:
^4.4.11 - @arco-design/web-vue:
^2.52.1 - @arco-plugins/vite-vue:
^1.4.5
2、目录结构
|- public
|- src# ...|- styles # 新增目录包含以下文件|- arco|- index.less # 用于后续对Arco Design的专门样式配置入口|- base.less # 用于项目全局的扩展# ...
|- vite.config.ts # or vite.config.js
3、Less自定义主题配置
3.1、安装相关依赖
npm install -D less
# or
yarn add -D less
# or
pnpm add -D less
3.2、arco/index.less配置
- 组件库 less 样式文件可以引入
@arco-design/web-vue/dist/arco.less或者@arco-design/web-vue/es/index.less - 如果使用了按需加载的方式引入组件,
请确保在按需加载插件中开启了 less 样式文件的导入。
/*** @file: src/styles/arco/index.less* * 组件库的全局 Token,可以在此查看组件库内置的设计变量以及默认* @link https://arco.design/vue/docs/token*//* 设置主色调 */
@arcoblue-6: #165dff;/* 引入arco less库 */
@import "@arco-design/web-vue/es/index.less";
3.3、base.less配置
/*** 引入arco less样式*/
@import (reference) "./arco/index.less";
3.4、vite.config.[ts|js]配置
以下方案二选一即可
3.4.1、方案一
该方案需要
@arco-plugins/vite-vue依赖
由Arco 官方提供的 Vite 插件进行按需加载和组件库样式配置,@arco-plugins/vite-vue插件会自动加载组件样式
@link 《按需加载与组件库主题(Arco 插件)》
依赖
npm install -D @arco-plugins/vite-vue
# or
yarn add -D @arco-plugins/vite-vue
# or
pnpm add -D @arco-plugins/vite-vue
配置
// ...
import path from 'node:path';
import {vitePluginForArco} from '@arco-plugins/vite-vue'
// ...export default ()=>{const viteConfig:UserConfig = {// ...plugins: [// ...vitePluginForArco({})],// ...css: {preprocessorOptions: {less: {modifyVars: {// 引入`base.less`hack: `true; @import (reference) "${path.resolve('./src/styles/base.less')}";`},javascriptEnabled: true,}},},// ...};return defineConfig(viteConfig);
}
3.4.2、方案二
该方案需要
unplugin-auto-import、unplugin-vue-components依赖
注意:
这种方法并不会处理用户在 script 中手动导入的组件,比如 Message 组件,用户仍需要手动导入组件对应的样式文件,例如
@arco-design/web-vue/es/message/style/css.js。
依赖
npm install -D unplugin-auto-import unplugin-vue-components
# or
yarn add -D unplugin-auto-import unplugin-vue-components
# or
pnpm add -D unplugin-auto-import unplugin-vue-components
配置
// ...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite';
import { ArcoResolver } from 'unplugin-vue-components/resolvers';
// ...export default ()=>{const viteConfig:UserConfig = {// ...plugins: [// ...AutoImport({resolvers: [ArcoResolver()],}),Components({resolvers: [ArcoResolver({sideEffect: true})]})],// ...css: {preprocessorOptions: {less: {modifyVars: {// 引入`base.less`hack: `true; @import (reference) "${path.resolve('./src/styles/base.less')}";`},javascriptEnabled: true,}},},// ...};return defineConfig(viteConfig);
}
ok,至此基本配置搞定,可以开始在arco/index.less中自定义需要的主题样式了
4、自定义命名空间配置
命名空间Arco划分为三个部分
css-vars-prefix前缀,
默认:空ClassName前缀 (arco组件样式class命名前缀名称,
默认:<div class="arco-${componentName}"/>)Component前缀 (arco组件调用时的前缀名称,
默认:<a-${componentName} />)
4.1 设置css-vars-prefix前缀
步骤三的demo代码基础上加上:@arco-vars-prefix变量
完整样式:
/*** @file src/styles/arco/index.less*/
@arco-vars-prefix: 'css-vars-prefix-name';/* 设置主色调 */
@arcoblue-6: #165dff;@import "@arco-design/web-vue/es/index.less";
修改前:

修改后:

4.2 设置ClassName前缀
步骤三的demo代码基础上加上:@prefix变量
打开文件:src/styles/arco/index.less,增加@prefix变量设置:
@prefix: 'class-name-prefix';/* 设置主色调 */
@arcoblue-6: #165dff;@import "@arco-design/web-vue/es/index.less";
打开文件:src/App.vue
<!-- App.vue -->
<template><a-config-provider prefix-cls="class-name-prefix"><!-- ... --></a-config-provider>
</template>
修改前:

修改后:

4.3 设置 Component调用前缀
以下基于官方提供的 Vite 插件(
@arco-plugins/vite-vue)实现
打开文件:vite.config.[ts|js]
找到plugins配置项:
// ...
plugins: [// ...vitePluginForArco({componentPrefix: "arco-ui", // 自定义组件前缀名称})
],
// ...
修改前:

修改后:

相关文章:
【VUE】ArcoDesign之自定义主题样式和命名空间
前言 Arco Design是什么? Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库 官网地址:https://arco.design/同时也提供了一套开箱即用的中后台前端解决方案:Arco Design Pro(https://pro.arco.design/) Arco De…...
TVRNet网络PyTorch实现
文章目录 文章地址网络各层结构代码实现 文章地址 An End-to-End Traffic Visibility Regression Algorithm文章通过训练搜集得到的真实道路图像数据集(Actual Road dense image Dataset, ARD),通过专业的能见度计和多人标注,获得…...
opencv之坑(八)——putText中文乱码解决
opencv4.0之前版本和部分4.0版本的putText仅支持英文,如果中文会乱码,可以用下面方法构造函数解决: 头文件如下: #pragma once #ifndef PUTTEXT_H_ #define PUTTEXT_H_#include <windows.h> #include <string> #incl…...
nrf52832 开发板入手笔记:资料搜集
前言 最近翻箱,发现了两块几年前买的 NRF52832 与 NRF52840 的开发板,打算搭个 BLE 的开发环境 NRF52832 与 NRF51822 之前用过, NRF52840 没有用过,好像是 BLE4 与 BLE5 的区别吧 相关介绍 除了开发板,最重要的还是…...
PHP如何批量修改二维数组中值
每个name值加pex,age加5, 原数据: $data[["name">a,age>12],["name">b,age>22],["name">c,age>33],["name">d,age>44], ];实现效果 方案一、foreach引用方式 $data[["…...
Python 算法高级篇:归并排序的优化与外部排序
Python 算法高级篇:归并排序的优化与外部排序 引言 1. 归并排序的基本原理2. 归并排序的优化2.1 自底向上的归并排序2.2 最后优化 3. 外部排序4. 性能比较5. 结论 引言 在计算机科学中,排序是一项基本的任务,而归并排序( Merge S…...
LeetCode--1991.找到数组的中间位置
1 题目描述 给你一个下标从 0 开始的整数数组 nums , 请你找到 最左边 的中间位置 middleIndex (也就是所有可能中间位置下标最小的一个) 中间位置 middleIndex 是满足 nums[0] nums[1] ... nums[middleIndex-1] nums[middleIndex1] nums[middleI…...
物联网数据采集网关连接设备与云平台的关键桥梁
随着工业4.0和智能制造的快速发展,物联网数据采集网关在工业物联网中的应用越来越广泛。物联网数据采集网关作为连接设备与云端之间的关键桥梁,能够实现高效、可靠、安全的数据传输和转换,为智能制造和工业4.0提供了强大的支持。 一、物联网…...
专家级数据恢复:UFS Explorer Professional Recovery Crack
UFS Explorer Professional Recovery - 一款功能强大且方便的数据恢复程序,支持检测大量文件系统、操作系统和各种类型的驱动器:从简单的闪存驱动器到复杂的复合存储(各种级别的 RAID 阵列)。 该程序由执业专家开发,并…...
2023/10/23 mysql学习
数据库修改 show databases; 展示所有数据库 create database 数据库名; 创建数据库 create database if not exists 数据库名; 如果未创建过当前数据库名则创建 drop database 数据库名; drop database if exists 数据库名;用法和创建类似 删除数据库 use 数据库名; 跳…...
软考系统架构师知识点集锦六:项目管理
一、考情分析 二、考点精讲 2.1进度管理(时间管理) 进度管理:为了确保项目按期完成所需要的管理过程。 2.1.1过程 [WBS分解的基本要求] WBS的工作包是可控和可管理的,不能过于复杂。任务分解也不能过细,一般原则WBS的树形结构不超过6层。每个工作包要…...
MacOS系统Chrome开发者模式下载在线视频
操作流程 # step1. 进入开发者模式 command option i # step2. 在搜索栏中搜索 getHttpVideoInfo.do?关键词 # step3. 在Preview的Json界面中找到video,然后选择不同resolution & duration的视频片段; # step4. 选择合适的video::chapters, 选择…...
uniapp v3+ts 使用 u-upload上传图片以及视频
上传图片方法 <u-upload :fileList"fileList1" afterRead"afterRead" delete"deletePic" name"file" multiple :maxCount"6"></u-upload> // maxCount 最大上传数const fileList1 ref([]);const file ref([…...
为什么虚拟dom会提高性能?
虚拟 DOM(Virtual DOM)是一种在前端开发中常用的技术,它可以提高性能并改善用户体验。虚拟 DOM 的原理和用处如下: 原理: 当页面状态发生变化时,虚拟 DOM 会以 JavaScript 对象的形式进行更新,而…...
2015年亚太杯APMCM数学建模大赛A题海上丝绸之路发展战略的影响求解全过程文档及程序
2015年亚太杯APMCM数学建模大赛 A题 海上丝绸之路发展战略的影响 原题再现 一带一路不是实体或机制,而是合作与发展的理念和主张。凭借现有有效的区域合作平台,依托中国与有关国家现有的双边和多边机制,利用古丝绸之路的历史象征࿰…...
js中HTMLCollection如何循环
//不带索引 let divCon document.getElementsByClassName("el-form-item__error"); if (divCon.length > 0) {for (var item of divCon) {console.log("打印:", item.innerText);} }//带有索引 let divCon document.getElementsByClassNam…...
Kafka - 3.x 副本不完全指北
文章目录 kafka 副本的基本信息Leader选举过程Kafka Controllerkafka 分区副本Leader的选举流程实际演示① 查看first的详细信息,注意观察副本分布情况② 停掉hadoop103上的kafka进程③ 再次查看first的相信信息,观察副本分布④ 处理分区leader分布不均匀…...
二分归并法将两个数组合并
#define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> main() {int a[5] {1,3,4,5,6};int b[4] {2,7,8,9};int c[9];int m0, n0,k0;while (m < 5 && n < 4){if (a[m] < b[n]){c[k] a[m];//谁小谁先进数组m; k;}else{c[k] b[n];k; n;}}while (m <…...
ROS自学笔记十六:URDF优化_xacro文件
xacro 是一种 XML 扩展语言,用于创建和维护 URDF(Unified Robot Description Format)文件。它允许你使用参数化、宏和条件语句等功能来更灵活、更可维护地定义机器人模型。下面是关于 xacro 的详细解释: 1. 参数化(Par…...
XMLHttpRequest拦截请求和响应
环境: angular 实现: 拦截请求 向请求信息增加字段 拦截响应 过滤返回值 响应拦截: 根据angular使用的XMLHttpRequest 将对原本的请求转移到另一个将监听返回事件挂载到另一个世纪发送请求的xml上 使用get set 将客户端获取的res…...
联想X3650M5服务器双模式切换实战:UEFI与Legacy BIOS自由转换技巧
联想X3650M5服务器双模式切换实战:UEFI与Legacy BIOS自由转换技巧 在企业级IT基础设施中,服务器启动模式的灵活配置往往是系统部署的关键第一步。联想X3650M5作为主流机架式服务器,其双模式切换功能直接影响着操作系统兼容性、磁盘性能表现乃…...
Base64隐写术逆向工程:从CTF题到自制解密工具(Python实现)
Base64隐写术逆向工程:从CTF题到自制解密工具(Python实现) 1. Base64编码原理与隐写空间 Base64编码的本质是将二进制数据转换为由64个可打印字符(A-Z、a-z、0-9、、/)组成的ASCII字符串。每个Base64字符对应6位二进制…...
Gin 框架中的规范响应格式设计与实现
为什么需要统一的响应格式?首先,让我们思考一个问题:为什么要统一API响应格式?前后端协作效率:一致的响应格式让前端开发者能以统一的方式处理服务端响应错误处理简化:标准化的错误码和消息便于统一处理各种…...
Windows下OpenClaw安装指南:一键连接GLM-4.7-Flash模型
Windows下OpenClaw安装指南:一键连接GLM-4.7-Flash模型 1. 为什么选择OpenClawGLM-4.7-Flash组合 去年我在处理日常办公自动化时,发现很多重复性工作既耗时又容易出错。尝试过多个自动化工具后,最终被OpenClaw的"本地化AI智能体"…...
国科大研一CS选课避坑指南:从算法分析到模式识别,我的踩坑与真香体验
国科大研一CS选课避坑指南:从算法分析到模式识别,我的踩坑与真香体验 第一次踏入国科大雁栖湖校区的图书馆时,我被落地窗外绵延的燕山山脉震撼得说不出话——直到发现座位插座没电、WiFi信号时断时续,才意识到理想与现实的参差。这…...
5分钟搞定ECharts Tooltip显示问题:从滚动条到完美适配屏幕的保姆级教程
5分钟搞定ECharts Tooltip显示问题:从滚动条到完美适配屏幕的保姆级教程 第一次用ECharts做数据可视化时,Tooltip的显示问题简直让人抓狂——要么内容太长出现滚动条,要么直接冲出屏幕边界。作为过来人,我整理了这份实战指南&…...
安装claude code,开始学习强大的AI编程助手
1.首先检查是否安装node.js(版本尽量大于22) window端输入winr -> cmd 打开终端查看node版本 可以使用nvm去管理nodejs版本,安装方式见 https://blog.csdn.net/m0_56820004/article/details/159585001?spm1011.2415.3001.10575…...
ORCAD TCL脚本菜单化加载与性能调优实践
1. ORCAD TCL脚本菜单化加载的必要性 作为一名在电子设计自动化领域摸爬滚打多年的工程师,我深刻理解ORCAD用户在使用TCL脚本时遇到的痛点。当你的脚本库逐渐壮大,每次启动ORCAD都要自动加载几十个脚本文件,那种等待的煎熬简直让人抓狂。我曾…...
别再为H5读Excel发愁了!UniApp里用FileReader+XLSX库的保姆级避坑指南
UniApp H5开发实战:Excel文件解析的深度解决方案 当你在UniApp中开发H5应用时,处理本地Excel文件可能会遇到一些独特的挑战。与标准Web环境不同,UniApp的混合架构对文件操作有着特殊限制和要求。本文将带你深入理解这些差异,并提供…...
如何用开源工具G-Helper实现华硕笔记本硬件控制的全面优化?
如何用开源工具G-Helper实现华硕笔记本硬件控制的全面优化? 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项…...
