# vue3-vite-theme

**Repository Path**: veigarchen/vue3-vite-theme

## Basic Information

- **Project Name**: vue3-vite-theme
- **Description**: vue3 vite 前端项目主题切换（Echarts、Element Plus、图片、icon图标）解决方案
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-08-01
- **Last Updated**: 2025-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-vite-theme
vue3 vite 前端项目主题切换（Echarts、Element Plus、图片、icon图标）解决方案

## 说明
- 此方案使用var变量+class控制主题，并针对在修改主题时无法使用var变量控制的组件如：ECharts
- 仅适用于vite项目（功能依赖于vite-var仓库）
- 最终效果：对项目中的样式、iconfont图标、图片、ECharts图表、ui库进行主题的无缝切换
- 欢迎加如前端群【<a href="https://jq.qq.com/?_wv=1027&k=Erh7LBKn" target="_blank">553655769</a>】技术交流

> 示例地址：<a href="https://gitee.com/veigarchen/vue3-vite-theme" target="_blank">在vue3+typescript-vite进行主题切换</a>

## 效果预览

<img src="示例/动画.gif" />

## 目录结构

```
.
├─ build # 预处理
│   │
│   ├─config # vite配置处理
│   │   ├─ build # 打包配置
│   │   └─ plugins # 插件管理（重要）
│   └─env # 环境变量管理
│       ├─ theme # 主题文件夹 （重要）
│       │    ├─light.ts # 明亮主题
│       │    └─dark.ts # 阴暗主题
│       └─ _var # 变量定义  （重要）
│
├─ src
│   │
│   ├─components # 组件目录
│   │   ├─ sicon # 图标组件
│   │   │    └─index.vue
│   │   └─ chart # 图表组件
│   │        └─line.vue # 线图
│   │
│   ├─views # 页面
│   │   └─ home # 示例页面（重要）
│   │        └─index.vue
│   │
│   └─utils # 工具类
│       ├─ System # 管理echarts
│       └─ Theme # 管理主题（重要）
│
├─ .gitignore
├─ .prettierignore
├─ .prettierrc
├─ index.html
├─ package.json
├─ README.md
├─ tsconfig.json
└─ vite.config.ts

```
- 示例和使用

<img src="示例/0.png" />

## 设计思路
初期是直接使用var+class进行控制，后面发现在不能使用var变量时，需要进行再次定义一遍颜色，*~~因为懒得再写~~*所以***引入了插件进行预处理***，在使用时不需要再去写一次颜色的值，结合UI使用figma软件给到的变量和颜色，可以***快速的修改和新增主题*** 

- 定义主题方案：进入build/env/theme目录定义主题文件如图，然后在build/env/theme/index.ts引入即可

<img src="示例/1.png" />
<img src="示例/2.png" />


- 用于样式中时：在src/styles/theme目录中创建主题文件如图，然后在main.ts中引入即可

<img src="示例/3.png" />
<img src="示例/4.png" />

- 用于EChart时：在Theme.chart中定义方法和变量，然后在组件中传入该方法为颜色参数即可，*为什么定义成方法？*（**方便在图表更新时获取当前主题配置，可以作为颜色参数传入**）

<img src="示例/5.png" />

- 用于iconfont图标：直接修改sicon组件的color值即可
- 用于图片：使用v-bind对src属性中的目录使用Theme.use控制即可

> 上面使用了字符串如//#{style.dark}、#{light.c-blue}等，这些是**插件vite-var全局的变量写法**，适用于所有类型的文件，在运行或者打包时插件会进行处理，将我们上面定义的ts主题文件中的内容进行转换（不理解的可以打印变量查看编译前后的差异）

> 注意：在用var使用时如var(--c-primary)，需要加上--，而在全局变量中不需要加上--，如#{light.c-blue}，当然想加的可以自己改造

## 结尾
欢迎有更好的想法的小伙伴提出建议和意见，因为懒，所以才做了这些东西~我认为目前这些还是可以提升开发的效率、UI方面转换时间和后期的维护速度！