vue换肤实现
实现 Vue 换肤的常见方法
CSS 变量动态切换
通过定义 CSS 变量并在 Vue 中动态修改变量值实现换肤。在根元素（如 :root）或组件中定义变量，通过 JavaScript 动态切换主题。
/* 全局 CSS 变量 */
:root {
--primary-color: #409EFF;
--bg-color: #f5f5f5;
}
.dark-theme {
--primary-color: #304156;
--bg-color: #1c2b36;
}// Vue 组件中切换主题
methods: {
toggleTheme() {
document.documentElement.classList.toggle('dark-theme');
}
}SCSS/LESS 变量预处理
使用预处理器（如 SCSS 或 LESS）定义主题变量，通过编译生成多套 CSS 文件，动态切换 <link> 标签引入的样式文件。
// light-theme.scss
$primary-color: #409EFF;
$bg-color: #f5f5f5;
// dark-theme.scss
$primary-color: #304156;
$bg-color: #1c2b36;// 动态切换主题文件
function loadTheme(themeName) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `${themeName}.css`;
document.head.appendChild(link);
}Vue 插件与全局状态管理
结合 Vuex 或 Pinia 管理主题状态，通过插件或混入（Mixin）全局注入主题切换逻辑。
// store/theme.js (Vuex 示例)
const state = { currentTheme: 'light' };
const mutations = {
setTheme(state, theme) { state.currentTheme = theme; }
};// 主题混入
const themeMixin = {
computed: {
themeClass() { return `${this.$store.state.theme.currentTheme}-theme`; }
}
};UI 框架内置主题切换
若使用 Element UI、Ant Design Vue 等支持主题定制的 UI 框架，可直接调用其提供的主题切换 API。
// Element UI 示例
import { toggleClass } from 'element-ui/lib/utils/dom';
toggleClass(document.body, 'dark-theme');动态主题加载与持久化
本地存储主题偏好
通过 localStorage 或 cookie 保存用户选择的主题，实现刷新后主题持久化。
// 保存主题
localStorage.setItem('theme', 'dark');
// 初始化时加载
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.classList.add(`${savedTheme}-theme`);异步加载主题文件
使用 Webpack 的 require.context 或动态 import() 按需加载主题资源，减少初始加载体积。
// 动态导入主题文件
const loadTheme = async (theme) => {
const style = await import(`@/themes/${theme}.scss`);
};注意事项
- 性能优化：避免频繁操作 DOM，优先使用 CSS 变量或类名切换。
- 兼容性检查：CSS 变量在 IE 中不兼容，需提供降级方案。
- 样式隔离：确保主题样式不会意外影响第三方组件。
以上方法可根据项目需求组合使用，例如结合 CSS 变量与 Vuex 实现动态响应式换肤。
