# vue3换肤demo

**Repository Path**: heywc/vue3-skin-change-demo

## Basic Information

- **Project Name**: vue3换肤demo
- **Description**: vue3换肤demo
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-27
- **Last Updated**: 2025-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Sass, vite

## README

## 换肤
实现：
1.在 4.0 版本的 antd 中提供的定制主题方案 
2.使用html5的 data-*属性 和Scss生成对应主题变量

主要使用的插件： 
截图


1.vue3-colorpicker
颜色选择器，选择性引入这个插件，input的属性值为color时也能实现拾色器
官方提供Demo链接：https://aesoper101.github.io/vue3-colorpicker/?path=/docs/example-introduction--docs

2.pinia-plugin-persistedstate
持久化pinia的数据，实现页面刷新后主题色数据不丢失

3.ant-design-vue
这里注意一定是4.0及其以上版本的ant-design-vue,低版本不支持
参考链接：https://next.antdv.com/docs/vue/customize-theme-cn
官方提供的主题编辑器：https://next.antdv.com/theme-editor-cn
4.