20行代码，给你的项目增加 DevUI 主题切换能力

近期，Vue DevUI 官网上线了主题切换器。

效果如下：

默认是“充满无限想象”的无限主题：

可以切换成“满满少女心”的蜜糖主题：

或者“适合夜猫子”的追光主题：

本文将手把手教大家如何在自己的项目中引入DevUI的主题切换能力。

1 先要有一个前端项目

如果已经有项目，则可以跳过该步骤。

我们先用vite创建一个Vue3项目，并启动起来：

pnpm create vite my-vue-app -- --template vue-ts
cd my-vue-app/
pnpm i
pnpm dev 

为了更好地展示主题切换的效果，我们引入vue-devui组件库。

pnpm i vue-devui 

在main.ts中增加以下代码：

// 引入vue-devui组件库及其样式文件
import DevUI from 'vue-devui'
import 'vue-devui/style.css'

createApp(App).use(DevUI).mount('#app') 

在App.vue中加两个按钮：

<d-button variant="solid