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

【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-importunplugin-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是什么&#xff1f; Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库 官网地址&#xff1a;https://arco.design/同时也提供了一套开箱即用的中后台前端解决方案&#xff1a;Arco Design Pro(https://pro.arco.design/) Arco De…...

TVRNet网络PyTorch实现

文章目录 文章地址网络各层结构代码实现 文章地址 An End-to-End Traffic Visibility Regression Algorithm文章通过训练搜集得到的真实道路图像数据集&#xff08;Actual Road dense image Dataset, ARD&#xff09;&#xff0c;通过专业的能见度计和多人标注&#xff0c;获得…...

opencv之坑(八)——putText中文乱码解决

opencv4.0之前版本和部分4.0版本的putText仅支持英文&#xff0c;如果中文会乱码&#xff0c;可以用下面方法构造函数解决&#xff1a; 头文件如下&#xff1a; #pragma once #ifndef PUTTEXT_H_ #define PUTTEXT_H_#include <windows.h> #include <string> #incl…...

nrf52832 开发板入手笔记:资料搜集

前言 最近翻箱&#xff0c;发现了两块几年前买的 NRF52832 与 NRF52840 的开发板&#xff0c;打算搭个 BLE 的开发环境 NRF52832 与 NRF51822 之前用过&#xff0c; NRF52840 没有用过&#xff0c;好像是 BLE4 与 BLE5 的区别吧 相关介绍 除了开发板&#xff0c;最重要的还是…...

PHP如何批量修改二维数组中值

每个name值加pex&#xff0c;age加5&#xff0c; 原数据&#xff1a; $data[["name">a,age>12],["name">b,age>22],["name">c,age>33],["name">d,age>44], ];实现效果 方案一、foreach引用方式 $data[["…...

Python 算法高级篇:归并排序的优化与外部排序

Python 算法高级篇&#xff1a;归并排序的优化与外部排序 引言 1. 归并排序的基本原理2. 归并排序的优化2.1 自底向上的归并排序2.2 最后优化 3. 外部排序4. 性能比较5. 结论 引言 在计算机科学中&#xff0c;排序是一项基本的任务&#xff0c;而归并排序&#xff08; Merge S…...

LeetCode--1991.找到数组的中间位置

1 题目描述 给你一个下标从 0 开始的整数数组 nums , 请你找到 最左边 的中间位置 middleIndex &#xff08;也就是所有可能中间位置下标最小的一个&#xff09; 中间位置 middleIndex 是满足 nums[0] nums[1] ... nums[middleIndex-1] nums[middleIndex1] nums[middleI…...

物联网数据采集网关连接设备与云平台的关键桥梁

随着工业4.0和智能制造的快速发展&#xff0c;物联网数据采集网关在工业物联网中的应用越来越广泛。物联网数据采集网关作为连接设备与云端之间的关键桥梁&#xff0c;能够实现高效、可靠、安全的数据传输和转换&#xff0c;为智能制造和工业4.0提供了强大的支持。 一、物联网…...

专家级数据恢复:UFS Explorer Professional Recovery Crack

UFS Explorer Professional Recovery - 一款功能强大且方便的数据恢复程序&#xff0c;支持检测大量文件系统、操作系统和各种类型的驱动器&#xff1a;从简单的闪存驱动器到复杂的复合存储&#xff08;各种级别的 RAID 阵列&#xff09;。 该程序由执业专家开发&#xff0c;并…...

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的工作包是可控和可管理的&#xff0c;不能过于复杂。任务分解也不能过细&#xff0c;一般原则WBS的树形结构不超过6层。每个工作包要…...

MacOS系统Chrome开发者模式下载在线视频

操作流程 # step1. 进入开发者模式 command option i # step2. 在搜索栏中搜索 getHttpVideoInfo.do?关键词 # step3. 在Preview的Json界面中找到video&#xff0c;然后选择不同resolution & duration的视频片段&#xff1b; # 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&#xff08;Virtual DOM&#xff09;是一种在前端开发中常用的技术&#xff0c;它可以提高性能并改善用户体验。虚拟 DOM 的原理和用处如下&#xff1a; 原理&#xff1a; 当页面状态发生变化时&#xff0c;虚拟 DOM 会以 JavaScript 对象的形式进行更新&#xff0c;而…...

2015年亚太杯APMCM数学建模大赛A题海上丝绸之路发展战略的影响求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 A题 海上丝绸之路发展战略的影响 原题再现 一带一路不是实体或机制&#xff0c;而是合作与发展的理念和主张。凭借现有有效的区域合作平台&#xff0c;依托中国与有关国家现有的双边和多边机制&#xff0c;利用古丝绸之路的历史象征&#xff0…...

js中HTMLCollection如何循环

//不带索引 let divCon document.getElementsByClassName("el-form-item__error"); if (divCon.length > 0) {for (var item of divCon) {console.log("打印&#xff1a;", item.innerText);} }//带有索引 let divCon document.getElementsByClassNam…...

Kafka - 3.x 副本不完全指北

文章目录 kafka 副本的基本信息Leader选举过程Kafka Controllerkafka 分区副本Leader的选举流程实际演示① 查看first的详细信息&#xff0c;注意观察副本分布情况② 停掉hadoop103上的kafka进程③ 再次查看first的相信信息&#xff0c;观察副本分布④ 处理分区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 扩展语言&#xff0c;用于创建和维护 URDF&#xff08;Unified Robot Description Format&#xff09;文件。它允许你使用参数化、宏和条件语句等功能来更灵活、更可维护地定义机器人模型。下面是关于 xacro 的详细解释&#xff1a; 1. 参数化&#xff08;Par…...

XMLHttpRequest拦截请求和响应

环境&#xff1a; angular 实现&#xff1a; 拦截请求 向请求信息增加字段 拦截响应 过滤返回值 响应拦截&#xff1a; 根据angular使用的XMLHttpRequest 将对原本的请求转移到另一个将监听返回事件挂载到另一个世纪发送请求的xml上 使用get set 将客户端获取的res…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...