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

本文介绍了如何在ant-design-vue项目中结合vite实现主题切换和夜间模式。首先,文章讲解了初始化vite项目、安装依赖、引入ant-design-vue组件与样式。接着,通过修改less变量实现静态主题切换。然后,利用vite-plugin-theme-preprocessor插件实现实时动态切换主题,并解决相关配置问题。最后,文章展示了如何添加夜间模式,并对整个过程进行了总结,强调该方法适用于所有基于less和sass的项目。
摘要由CSDN通过智能技术生成

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

在这,我们要实现两个例子,主题切换与夜间模式!
主题切换:
在这里插入图片描述
夜间模式
在这里插入图片描述

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
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值