【使用 Vue2 脚手架创建项目并实现主题切换功能涵盖Ant-Design-Vue2/Element-UI】

使用 Vue2 脚手架创建项目并实现主题切换功能

初始化 Vue2 项目

复制代码

vue create theme-switch-demo
cd theme-switch-demo

安装依赖（根据选择的 UI 库）

对于 Ant Design Vue 2：

复制代码

npm install ant-design-vue@2.x

对于 Element UI：

复制代码

npm install element-ui

方案一：使用 Ant Design Vue 2 实现主题切换

创建主题样式文件

在 src/assets 下创建两个主题文件：

ant-dark-theme.less

less 复制代码

@primary-color: #1890ff;
@layout-header-background: #001529;
@body-background: #000;
@component-background: #141414;
@text-color: rgba(255, 255, 255, 0.85);

ant-light-theme.less

less 复制代码

@primary-color: #1890ff;
@layout-header-background: #fff;
@body-background: #f0f2f5;
@component-background: #fff;
@text-color: rgba(0, 0, 0, 0.85);

配置 vue.config.js

javascript 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        }
      }
    }
  }
})

主题切换组件

vue 复制代码

<template>
  <a-config-provider :theme="currentTheme">
    <div :class="['app-container', theme]">
      <a-button @click="toggleTheme">切换主题</a-button>
      <!-- 其他内容 -->
    </div>
  </a-config-provider>
</template>

<script>
import { theme } from 'ant-design-vue'
const { darkAlgorithm, defaultAlgorithm } = theme

export default {
  data() {
    return {
      theme: 'light',
    }
  },
  computed: {
    currentTheme() {
      return {
        algorithm: this.theme === 'dark' ? darkAlgorithm : defaultAlgorithm,
      }
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
      document.documentElement.setAttribute('data-theme', this.theme)
    }
  }
}
</script>

<style lang="less">
.app-container {
  height: 100vh;
  padding: 20px;
  transition: all 0.3s;

  &.dark {
    background: #000;
    color: rgba(255, 255, 255, 0.85);
  }

  &.light {
    background: #f0f2f5;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>

方案二：使用 Element UI 实现主题切换

安装主题工具

复制代码

npm install element-theme element-theme-chalk -D

创建主题配置文件

在项目根目录创建 element-variables.scss:

scss 复制代码

/* 深色主题 */
$--color-primary: #409EFF;
$--background-color-base: #222;
$--color-text-regular: #eee;
$--border-color-base: #444;

/* 浅色主题 */
// $--color-primary: #409EFF;
// $--background-color-base: #f5f7fa;
// $--color-text-regular: #606266;
// $--border-color-base: #dcdfe6;

构建主题

复制代码

node_modules/.bin/et -i element-variables.scss
node_modules/.bin/et

主题切换组件

vue 复制代码

<template>
  <div :class="['app-container', theme]">
    <el-button @click="toggleTheme">切换主题</el-button>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light'
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
      this.loadTheme()
    },
    loadTheme() {
      const theme = this.theme
      const oldLink = document.getElementById('theme-style')
      
      if (oldLink) {
        oldLink.remove()
      }
      
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.type = 'text/css'
      link.id = 'theme-style'
      link.href = `./theme/${theme}/index.css`
      
      document.head.appendChild(link)
    }
  },
  mounted() {
    this.loadTheme()
  }
}
</script>

<style>
.app-container {
  height: 100vh;
  padding: 20px;
  transition: all 0.3s;
}

.app-container.dark {
  background: #222;
  color: #eee;
}

.app-container.light {
  background: #f5f7fa;
  color: #606266;
}
</style>

构建主题文件

将生成的 ./theme 文件夹复制到 public 目录下，确保生产环境能访问到主题文件。

全局状态管理（可选）

对于大型应用，建议使用 Vuex 管理主题状态：

安装 Vuex

复制代码

npm install vuex

创建 store

javascript 复制代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    theme: 'light'
  },
  mutations: {
    toggleTheme(state) {
      state.theme = state.theme === 'light' ? 'dark' : 'light'
    }
  }
})

然后在组件中使用：

javascript 复制代码

computed: {
  theme() {
    return this.$store.state.theme
  }
},
methods: {
  toggleTheme() {
    this.$store.commit('toggleTheme')
  }
}

以上两种方案分别实现了 Ant Design Vue 2 和 Element UI 的主题切换功能，可根据项目需求选择合适的 UI 库方案。