现在越来越多的网站支持主题切换,我们的也要!
在这,我们要实现两个例子,主题切换与夜间模式!
主题切换:
夜间模式:
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
文件中开启支持。
i