ant-design-vue+vite主题切换详细步骤（简单案例）

现在越来越多的网站支持主题切换，我们的也要！

在这，我们要实现两个例子，主题切换与夜间模式！
主题切换：

夜间模式：

1、准备工作，初始化一个简单的vite项目

安装 ant-design-vue和less

yarn add ant-design-vue@next

yarn add less --save

因为ant-design-vue是使用less开发的，所以既然用了它，咱最好还是用和它一致的less。

在main.ts中全局引入antd组件与样式

import { createApp } from 'vue'
import App from './App.vue'

import Antd from 'ant-design-vue';

import 'ant-design-vue/dist/antd.less'

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

在App.vue中，我们将无用代码去掉，加入一些antd的按钮便于测试。

<template>
  <a-button type="primary">Primary Button</a-button>
  <a-button>Default Button</a-button>
  <a-button type="dashed">Dashed Button</a-button>
  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
</template>

使用yarn dev启动

发现报错，原因是，我们引入的样式是less文件，我们需要在vite.config.ts文件中开启支持。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineCo