TalonBlog
Search K

Appearance

记录一下 Arco Design Vue 更换官方 Design Lab 风格配置平台 主题包 ​

前言 ​

大家好，我是你们的友好邻居 Talon ，想必大家都用过 Arco Design 的组件库吧，用过的人都说好用，没用过的人建议用一用，那么这个主题包到底怎么换，我们今天就来一探究竟。

准备 ​

首先，我们需要下载一个主题包，这里我选择 的主题包是 gi-demo 和 arco 官方的插件包 arco plugin

安装主题包 ​

shell
pnpm install @arco-themes/vue-gi-demo -D
pnpm install @arco-themes/vue-gi-demo -D

安装 arco 官方插件 ​

shell
pnpm install @arco-plugins/vite-vue -D
pnpm install @arco-plugins/vite-vue -D

配置 ​

ts
// vite.config.ts

import {defineConfig} from 'vite';
import {vitePluginForArco} from '@arco-plugins/vite-vue';

export default defineConfig({
    plugins: [
        vitePluginForArco({theme: '@arco-themes/vue-gi-demo'}),
    ],
});
// vite.config.ts

import {defineConfig} from 'vite';
import {vitePluginForArco} from '@arco-plugins/vite-vue';

export default defineConfig({
    plugins: [
        vitePluginForArco({theme: '@arco-themes/vue-gi-demo'}),
    ],
});
ts
// main.ts

import '@arco-design/web-vue/dist/arco.less';
// main.ts

import '@arco-design/web-vue/dist/arco.less';

总结 ​

本文栗子均为 vite 构建 请读者仔细阅读，测试框架 为官方的 arco design pro vue 框架

最后 ​

好了，今天就到这里啦，明天依旧光芒万丈哦～，希望对你们有帮助，祝大家工作顺利，生活愉快！ 读者有什么更好的方式想法，欢迎留言评论，一起学习一起进步，谢谢大家zzzzzz！