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

最新推荐文章于 2024-07-21 07:48:18 发布

embelfe_segge

最新推荐文章于 2024-07-21 07:48:18 发布

阅读量2.4k

点赞数 5

分类专栏：前端 html 面试文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/embelfe_segge/article/details/123079349

版权

本文介绍了如何在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文件中开启支持。