Arco Design是什么?
Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库
- 官网地址:https://arco.design/
- 同时也提供了一套开箱即用的中后台前端解决方案:
Arco Design Pro
(https://pro.arco.design/)
Arco Design
样式基于less
技术栈,但也同ElementPlus
默认主题,CSS 命名采用BEM风格
,方便使用者覆盖样式。
Arco Design 提供的默认命名空间为是空的。 在特殊情况下,我们需要自定义命名空间。
官方文档:
以下演示按照按需导入模式下进行
^3.3.4
^4.4.11
^2.52.1
^1.4.5
|- public
|- src
# ...
|- styles # 新增目录包含以下文件
|- arco
|- index.less # 用于后续对Arco Design的专门样式配置入口
|- base.less # 用于项目全局的扩展
# ...
|- vite.config.ts # or vite.config.js
npm install -D less
# or
yarn add -D less
# or
pnpm add -D less
arco/index.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";
base.less
配置/**
* 引入arco less样式
*/
@import (reference) "./arco/index.less";
vite.config.[ts|js]
配置以下方案二选一即可
该方案需要
@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);
}
该方案需要
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
中自定义需要的主题样式了
命名空间Arco划分为三个部分
css-vars-prefix
前缀,
默认:空ClassName
前缀 (arco组件样式class命名前缀名称,
默认:)
Component
前缀 (arco组件调用时的前缀名称,
默认:)
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";
修改前:
修改后:
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
<template>
<a-config-provider prefix-cls="class-name-prefix">
a-config-provider>
template>
修改前:
修改后:
Component
调用前缀以下基于官方提供的 Vite 插件(
@arco-plugins/vite-vue
)实现
打开文件:vite.config.[ts|js]
找到plugins
配置项:
// ...
plugins: [
// ...
vitePluginForArco({
componentPrefix: "arco-ui", // 自定义组件前缀名称
})
],
// ...
修改前:
修改后: