# 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库进行主题的无缝切换 - 欢迎加如前端群【553655769】技术交流 > 示例地址:在vue3+typescript-vite进行主题切换 ## 效果预览 ## 目录结构 ``` . ├─ 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 ``` - 示例和使用 ## 设计思路 初期是直接使用var+class进行控制,后面发现在不能使用var变量时,需要进行再次定义一遍颜色,*~~因为懒得再写~~*所以***引入了插件进行预处理***,在使用时不需要再去写一次颜色的值,结合UI使用figma软件给到的变量和颜色,可以***快速的修改和新增主题*** - 定义主题方案:进入build/env/theme目录定义主题文件如图,然后在build/env/theme/index.ts引入即可 - 用于样式中时:在src/styles/theme目录中创建主题文件如图,然后在main.ts中引入即可 - 用于EChart时:在Theme.chart中定义方法和变量,然后在组件中传入该方法为颜色参数即可,*为什么定义成方法?*(**方便在图表更新时获取当前主题配置,可以作为颜色参数传入**) - 用于iconfont图标:直接修改sicon组件的color值即可 - 用于图片:使用v-bind对src属性中的目录使用Theme.use控制即可 > 上面使用了字符串如//#{style.dark}、#{light.c-blue}等,这些是**插件vite-var全局的变量写法**,适用于所有类型的文件,在运行或者打包时插件会进行处理,将我们上面定义的ts主题文件中的内容进行转换(不理解的可以打印变量查看编译前后的差异) > 注意:在用var使用时如var(--c-primary),需要加上--,而在全局变量中不需要加上--,如#{light.c-blue},当然想加的可以自己改造 ## 结尾 欢迎有更好的想法的小伙伴提出建议和意见,因为懒,所以才做了这些东西~我认为目前这些还是可以提升开发的效率、UI方面转换时间和后期的维护速度!