收录网站有哪些,wordpress小插件下载,恩施网站建设xiduyun,潜江资讯网 手机版免费生活前言
Arco Design是什么#xff1f; Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库 官网地址#xff1a;https://arco.design/同时也提供了一套开箱即用的中后台前端解决方案#xff1a;Arco Design Pro(https://pro.arco.design/) Arco De…前言
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.4vite^4.4.11arco-design/web-vue ^2.52.1arco-plugins/vite-vue^1.4.5
2、目录结构
|- public
|- src# ...|- styles # 新增目录包含以下文件|- arco|- index.less # 用于后续对Arco Design的专门样式配置入口|- base.less # 用于项目全局的扩展# ...
|- vite.config.ts # or vite.config.js3、Less自定义主题配置
3.1、安装相关依赖
npm install -D less
# or
yarn add -D less
# or
pnpm add -D less3.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.lesshack: 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.lesshack: 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 classarco-${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 --
templatea-config-provider prefix-clsclass-name-prefix!-- ... --/a-config-provider
/template修改前
修改后
4.3 设置 Component调用前缀 以下基于官方提供的 Vite 插件(arco-plugins/vite-vue)实现 打开文件vite.config.[ts|js] 找到plugins配置项
// ...
plugins: [// ...vitePluginForArco({componentPrefix: arco-ui, // 自定义组件前缀名称})
],
// ...修改前 修改后
