vue3+TS 整合element-plus+tailwindcss

vue3TS 整合element-plus和tailwindcss1. 安装依赖npminstallelement-plus element-plus/icons-vue vueuse/corenpminstall-Dtailwindcss tailwindcss/vite sass2. Vite 配置vite.config.tsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueimporttailwindcssfromtailwindcss/viteexportdefaultdefineConfig({plugins:[vue(),tailwindcss(),],})3. 全局样式文件src/style.css/* 使用 tailwindcss/vite 方式导入 */importtailwindcss;/* 配置暗色模式 */custom-variantdark(:where(.dark,.dark *));/* 全局过渡动画 */*{transition:background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease;}/* 滚动条样式 */::-webkit-scrollbar{width:8px;height:8px;}::-webkit-scrollbar-track{background:#f1f1f1;}.dark ::-webkit-scrollbar-track{background:#2a2a2a;}::-webkit-scrollbar-thumb{background:#888;border-radius:4px;}.dark ::-webkit-scrollbar-thumb{background:#555;}::-webkit-scrollbar-thumb:hover{background:#555;}.dark ::-webkit-scrollbar-thumb:hover{background:#666;}4. 主题 Composablesrc/composables/useTheme.tsimport{useDark,useToggle,usePreferredDark}fromvueuse/coreimport{computed,watch,typeRef}fromvuetypeThemeModelight|dark|autointerfaceUseThemeReturn{isDark:RefbooleanthemeMode:RefThemeModetoggleTheme:()voidsetThemeMode:(mode:ThemeMode)void}exportfunctionuseTheme():UseThemeReturn{constpreferredDarkusePreferredDark()constisDarkuseDark({storageKey:theme-mode,valueDark:dark,valueLight:light,})constthemeModecomputedThemeMode({get:(){constsavedlocalStorage.getItem(theme-mode)asThemeMode|nullif(savedlight||saveddark){returnsaved}returnauto},set:(mode:ThemeMode){if(modeauto){localStorage.removeItem(theme-mode)isDark.valuepreferredDark.value}else{localStorage.setItem(theme-mode,mode)isDark.valuemodedark}}})consttoggleThemeuseToggle(isDark)constsetThemeMode(mode:ThemeMode):void{themeMode.valuemode}watch(preferredDark,(newVal){if(themeMode.valueauto){isDark.valuenewVal}})return{isDark,themeMode,toggleTheme,setThemeMode,}}5. Element Plus 暗色主题配置src/styles/element-dark.scss// Element Plus 暗色主题自定义 html.dark { --el-bg-color: #1a1a1a; --el-bg-color-overlay: #1d1d1d; --el-text-color-primary: #e5e5e5; --el-text-color-regular: #cfcfcf; --el-border-color: #4c4d4f; --el-fill-color: #2a2a2a; --el-fill-color-light: #333333; --el-fill-color-lighter: #3a3a3a; --el-fill-color-extra-light: #404040; --el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3); }6. 主题切换组件src/components/ThemeToggle.vuetemplate el-switch v-modelisDark :active-iconMoon :inactive-iconSunny changetoggleTheme classtheme-switch / /template script setup langts import { computed } from vue import { Moon, Sunny } from element-plus/icons-vue import { useTheme } from /composables/useTheme const { isDark, toggleTheme } useTheme() /script style scoped .theme-switch { --el-switch-off-color: #409eff; --el-switch-on-color: #303030; } /style7. 主题选择器组件下拉菜单src/components/ThemeSelector.vuetemplate el-dropdown commandhandleCommand div classflex items-center cursor-pointer p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg el-icon :size20 component :iscurrentIcon / /el-icon span classml-2 text-sm hidden sm:inline {{ currentTheme dark ? 暗色 : 亮色 }} /span /div template #dropdown el-dropdown-menu el-dropdown-item commandlight el-iconSunny //el-icon span classml-2亮色/span /el-dropdown-item el-dropdown-item commanddark el-iconMoon //el-icon span classml-2暗色/span /el-dropdown-item el-dropdown-item commandauto el-iconMonitor //el-icon span classml-2跟随系统/span /el-dropdown-item /el-dropdown-menu /template /el-dropdown /template script setup langts import { computed } from vue import { Sunny, Moon, Monitor } from element-plus/icons-vue import { useTheme } from /composables/useTheme const { isDark, themeMode, setThemeMode } useTheme() const currentIcon computed(() { if (themeMode.value auto) return Monitor return isDark.value ? Moon : Sunny }) const currentTheme computed(() { if (themeMode.value auto) return auto return isDark.value ? dark : light }) const handleCommand (command: light | dark | auto): void { setThemeMode(command) } /script8. 主应用文件src/App.vuetemplate div classmin-h-screen bg-white dark:bg-gray-900 transition-colors duration-300 !-- 顶部导航栏 -- header classbg-gray-100 dark:bg-gray-800 shadow-md p-4 transition-colors duration-300 div classcontainer mx-auto flex justify-between items-center h1 classtext-2xl font-bold text-gray-800 dark:text-white Vue3 Element Plus Tailwind /h1 div classflex items-center gap-4 ThemeSelector / ThemeToggle / /div /div /header !-- 主内容 -- main classcontainer mx-auto p-6 el-card classmb-4 template #header span classtext-gray-800 dark:text-whiteElement Plus 组件示例/span /template div classspace-y-4 el-button typeprimary主要按钮/el-button el-button typesuccess成功按钮/el-button el-button typewarning警告按钮/el-button el-button typedanger危险按钮/el-button el-button typeinfo信息按钮/el-button /div /el-card !-- 使用 Tailwind 的暗色样式 -- div classgrid grid-cols-1 md:grid-cols-3 gap-4 div v-fori in 3 :keyi classp-6 bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-white transition-colors duration-300 h3 classtext-lg font-semibold mb-2卡片 {{ i }}/h3 p classtext-gray-600 dark:text-gray-300 这是一个使用 Tailwind CSS 实现的暗色模式卡片 /p /div /div /main /div /template script setup langts import ThemeToggle from ./components/ThemeToggle.vue import ThemeSelector from ./components/ThemeSelector.vue /script9. 主入口文件src/main.tsimport{createApp}fromvueimportElementPlusfromelement-plusimportelement-plus/dist/index.cssimportelement-plus/theme-chalk/dark/css-vars.cssimport./styles/element-dark.scssimport./style.cssimportAppfrom./App.vueconstappcreateApp(App)app.use(ElementPlus)app.mount(#app)10. 最终效果亮色暗色