前言

Arco Design是什么？

Arco Design 是由字節(jié)跳動(dòng)推出的企業(yè)級(jí)產(chǎn)品的完整設(shè)計(jì)和開發(fā)解決方案前端組件庫

• 官網(wǎng)地址：https://arco.design/
• 同時(shí)也提供了一套開箱即用的中后臺(tái)前端解決方案：Arco Design Pro(https://pro.arco.design/)

Arco Design樣式基于less技術(shù)棧，但也同ElementPlus默認(rèn)主題，CSS 命名采用 BEM風(fēng)格，方便使用者覆蓋樣式。
Arco Design 提供的默認(rèn)命名空間為是空的。 在特殊情況下，我們需要自定義命名空間。

官方文檔：

• 【ArcoDesign | 自定義主題】

以下演示按照按需導(dǎo)入模式下進(jìn)行

1、環(huán)境

• vue： ^3.3.4
• vite：^4.4.11
• @arco-design/web-vue： ^2.52.1
• @arco-plugins/vite-vue：^1.4.5

2、目錄結(jié)構(gòu)

|- public
|- src
   # ...
   |- styles # 新增目錄包含以下文件
      |- arco
         |- index.less # 用于后續(xù)對(duì)Arco Design的專門樣式配置入口
      |- base.less # 用于項(xiàng)目全局的擴(kuò)展
   # ...
|- vite.config.ts # or vite.config.js

3、Less自定義主題配置

3.1、安裝相關(guān)依賴

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
• 如果使用了按需加載的方式引入組件，請(qǐng)確保在按需加載插件中開啟了 less 樣式文件的導(dǎo)入。

/**
 * @file: src/styles/arco/index.less
 * 
 * 組件庫的全局 Token，可以在此查看組件庫內(nèi)置的設(shè)計(jì)變量以及默認(rèn)
 * @link https://arco.design/vue/docs/token
 */
 
/* 設(shè)置主色調(diào) */
@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 插件進(jìn)行按需加載和組件庫樣式配置，@arco-plugins/vite-vue 插件會(huì)自動(dòng)加載組件樣式
@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依賴

注意：

這種方法并不會(huì)處理用戶在 script 中手動(dòng)導(dǎo)入的組件，比如 Message 組件，用戶仍需要手動(dòng)導(dǎo)入組件對(duì)應(yīng)的樣式文件，例如 @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劃分為三個(gè)部分

• css-vars-prefix前綴，
  默認(rèn)：空
• ClassName前綴 (arco組件樣式class命名前綴名稱，
  默認(rèn)：<div class="arco-${componentName}"/>)
• Component前綴 (arco組件調(diào)用時(shí)的前綴名稱，
  默認(rèn)：<a-${componentName} />)

4.1 設(shè)置css-vars-prefix前綴

步驟三的demo代碼基礎(chǔ)上加上：@arco-vars-prefix變量

完整樣式：

/**
 * @file src/styles/arco/index.less
 */
@arco-vars-prefix: 'css-vars-prefix-name';

/* 設(shè)置主色調(diào) */
@arcoblue-6: #165dff;

@import "@arco-design/web-vue/es/index.less";

修改前：

修改后：

4.2 設(shè)置ClassName前綴

步驟三的demo代碼基礎(chǔ)上加上：@prefix變量

打開文件：src/styles/arco/index.less,增加@prefix變量設(shè)置：

@prefix: 'class-name-prefix';

/* 設(shè)置主色調(diào) */
@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 設(shè)置 Component調(diào)用前綴

以下基于官方提供的 Vite 插件(@arco-plugins/vite-vue)實(shí)現(xiàn)

打開文件：vite.config.[ts|js]
找到plugins配置項(xiàng)：

// ...
plugins: [
    // ...
    vitePluginForArco({
        componentPrefix: "arco-ui", // 自定義組件前綴名稱
    })
],
// ...

修改前：

修改后：
文章來源地址http://www.zghlxwxcb.cn/news/detail-718405.html

到了這里，關(guān)于【VUE】ArcoDesign之自定義主題樣式和命名空間的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！