我是一个Vite/Vue3的初学者,目前面临一个问题,需要社区的综合知识支持。
我创建了一个Vite/Vue3应用,并安装了TailwindCSS:
npm create vite@latest my-vite-vue-app -- --template vue
cd my-vite-vue-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
然后我按照Tailwind主页上的说明进行操作:
在tailwind.config.js文件中添加所有模板文件的路径。
在main.js文件中导入新创建的./src/index.css文件。
创建一个./src/index.css文件,并为Tailwind的每个层添加@tailwind指令。
现在我有一个可工作的Vite/Vue3/TailwindCSS应用程序,想要添加切换深色模式的功能。
Tailwind文档表示,可以通过将darkMode: 'class'
添加到tailwind.config.js
,然后为<html>
标签切换dark
类来实现此目的。
我使用以下代码使其工作:
- 在index.html内部
<html lang="en" id="html-root">
(...)
<body class="antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
- 在 About.vue 内部
<template>
<div>
<h1>This is an about page</h1>
<button @click="toggleDarkMode">Toggle</botton>
</div>
</template>
<script>
export default {
methods: {
toggleDarkMode() {
const element = document.getElementById('html-root')
if (element.classList.contains('dark')) {
element.classList.remove('dark')
} else {
element.classList.add('dark')
}
},
},
};
</script>
是的,我知道这不是Vue3风格的代码。当然,我也知道可以使用element.classList.toggle()
代替.remove()
和.add()
。但或许将来会有像我一样的初学者查看这个代码,并且感激起点简单易懂的代码。所以请宽容一点...
现在我最终要问社区的问题:
我知道像这样操作DOM并不是Vue的做法。当然,我想以正确的方式实现我的目标。但我该怎么做呢?
相信我,我谷歌了好几个小时,但没有找到一个解决方案,而不需要安装这个和那个和那个额外的npm模块。
但我想采取极简主义的方法。尽可能少的依赖项,以免使我和其他想开始学习的人感到不知所措。
在这样的背景下,你们有没有解决办法给我和其他新手呢? :-)