방법: TailwindCSS + Vue3 + Vite를 사용하여 다크 모드 전환
저는 Vite/Vue3 초보자인데 현재 커뮤니티의 결합된 지식이 필요한 문제에 직면해 있습니다.
Vite/Vue3 애플리케이션을 만들고 TailwindCSS를 설치했습니다.
으아아아그런 다음 Tailwind 홈페이지의 지침을 따랐습니다.
tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.
새로 생성된 ./src/index.css 파일을 ./src/main.js 파일로 가져옵니다.
./src/index.css 파일을 생성하고 @tailwind 지시문 Tailwind 레이어를 각 파일에 추가합니다.
이제 Vite/Vue3/TailwindCSS 앱이 실행 중이고 다크 모드를 전환하는 기능을 추가하고 싶습니다.
Tailwind 문서에서는 darkMode: 'class' 添加到 tailwind.config.js 来存档，然后将类 dark 切换为 <html>로 표시하여 이를 수행할 수 있음을 나타냅니다.
저는 다음 코드를 사용하여 이 작업을 수행했습니다.
- 내부index.html
- About.vue 내부
예, Vue3 스타일 코드가 아니라는 것을 알고 있습니다. 그리고 네, element.classList.toggle() 而不是 .remove() 和 .add()를 사용하는 것이 가능하다는 것을 알고 있습니다. 하지만 나 같은 다른 초보자도 나중에 이것을 보고 시작할 수 있는 간단한 코드를 고맙게 여기게 될 것입니다. 그러니 자비를 베풀어주세요...
이제 드디어 커뮤니티에 물어볼 질문이 생겼습니다.
저는 DOM을 이렇게 조작하는 것이 Vue의 작업 방식이 아니라는 것을 알고 있습니다. 물론 나는 올바른 방법으로 목표를 달성하고 싶다. 그런데 어떻게 해야 하나요?
저를 믿으세요. Google에서 몇 시간 동안 검색했지만 this 및 this 추가 npm 모듈을 설치하지 않고 작동하는 솔루션을 찾지 못했습니다.
하지만 저는 미니멀한 접근 방식을 원했어요. 저와 학습을 시작하려는 다른 사람들을 압도하지 않도록 가능한 한 적게 의존하십시오.
이를 배경으로 - 나와 다른 초보자에게 적합한 솔루션이 있습니까? :-)
