基于 vue3、vite、antdv、css 变量实现在线主题色切换

1、前言

动态切换主题是一个很常见的需求. 实现方案也有很多, 如:

• 编译多套 css 文件, 然后切换类名(需要预设主题, 不够灵活)

• less 在线编译(不兼容 ie, 性能较差)

• css 变量(不兼容 ie)

但是这些基本都是针对 vue2 的, 我在网上并没有找到比较完整的解决 vue3 换肤的方案, 大多只处理了自定义样式或者 ui 框架(比如 antdv)二者之一的主题切换, antdv 官网对动态主题的说明也不够清晰, 且与推荐的按需加载插件 unplugin-vue-components 有冲突

我最终放弃了 unplugin-vue-components 的样式的按需加载, 采取组件按需加载, 样式全量加载, 并通过 css 变量和 antdv 的 ConfigProvider 实现了在线主题色切换

下面是具体是实现

2、基础环境搭建

1、项目创建

根据vite 官方文档, 使用社区模板, 即可轻松创建基于 vue3 和 ts 的项目模板

npm init vite@latest
复制代码

然后按照提示, 依次选择 vue 、 vue-ts , 即可创建 vue3 + ts + vite 项目

2、eslint 和 prettier 配置

安装依赖

yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier -D
复制代码

添加配置

1. 新增.eslintrc.json

// .eslintrc.json{"env":{"browser":true,"es2021":true,"node":true,"vue/setup-compiler-macros":true},"extends":["eslint:recommended","plugin:vue/vue3-recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended"],"parser":"vue-eslint-parser","parserOptions":{"ecmaVersion":"latest","parser":"@typescript-eslint/parser","sourceType":"module"},"plugins":["vue","@typescript-eslint"],"rules":{"vue/comment-directive":"off","prettier/prettier":"off",// 允许单字单词作为组件名"vue/multi-word-component-names":"off","@typescript-eslint/no-non-null-assertion":"off"}}复制代码

2. 新增.prettierrc.js

// .prettierrc.jsmodule.exports = {printWidth: 80, //单行长度tabWidth: 2, //缩进长度useTabs: false, //使用空格代替tab缩进semi: true, //句末使用分号singleQuote: true, //使用单引号
};
复制代码

3. 安装 vscode 插件

安装下列 vscode 插件(已安装可跳过)

• Vue Language Features (Volar)

• Prettier - Code formatter

Volar 可以简单理解为是 vue3 的 Vetur, 如果是既有 vue2 项目又有 vue3 项目的, 可在工作区修改设置

新建.vscode 文件夹, 在.vscode 新建 extensions.json 和 settings.json

// .vscode/extensions.json{"recommendations":["johnsoncodehk.volar"]}复制代码

// .vscode/settings.json{"editor.formatOnSave":true,"editor.defaultFormatter":"esbenp.prettier-vscode","editor.codeActionsOnSave":{"source.fixAll":true},"vetur.format.enable":true,"vetur.validation.script":false,"vetur.validation.style":false,"vetur.validation.template":false}复制代码

4. 配置 lint 相关命令

修改 package.json

// package.json
...
"scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview","lint":"eslint . --ext .vue,.ts,.jsx,.tsx --fix","format":"prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"},
...
复制代码

执行 lint 和 format 即可校验和格式化项目文件

3、自定义主题色切换

1、引入 less

这套方案里, less 不是必须的, 使用 css、sass、postCSS 都可以, 其核心原理是使用了 css 变量, 但是项目需要使用 less 的类名嵌套、变量、函数等功能, 且 antd 本身是基于 less 的, 因此项目的样式这里也统一使用 less.

vite 本身是支持 less 等 css 预编译器的, 只需要安装 less, 然后直接在 style 添加属性 lang = 'less' 即可使用 less

yarn add less -D
复制代码

在 HelloWorld.vue 里使用 less

<!-- src/components/HelloWorld.vue -->
<script setup lang="ts">
defineProps<{ msg: string }>();
</script><template><div class="title">{{ msg }}</div>
</template><style lang="less" scoped>
.title {color: red;
}
</style>
复制代码

2、自定义全局 less 变量

在 assets 新建 styles 目录存放样式, 在 styles 下新建 common 目录存放公共样式和变量, 在 common 下新建 common.less、var.css 和 var.less

/* src/assets/styles/common/var.css 存放css变量 */:root {--ant-primary-color: #18a058;
}
复制代码

/* src/assets/styles/common/var.less 存放less变量 */@primary-color:var(--ant-primary-color, #18a058);
复制代码

/* src/assets/styles/common/common.less 存放公共样式 */a {color: @primary-color;
}
复制代码

在 vite.config.ts 引入 var.less, var.less 里定义的 less 变量便可以在全局使用

// vite.config.tsimport { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';
import path from'path';functionresolve(url: string): string {return path.resolve(__dirname, url);
}// https://vitejs.dev/config/exportdefaultdefineConfig({plugins: [vue()],resolve: {alias: {'@': resolve('./src'),'~@': resolve('./src'),},},css: {preprocessorOptions: {less: {// 全局添加lessadditionalData: `@import '@/assets/styles/common/var.less';`,javascriptEnabled: true,},},},
});
复制代码

此时 ts 并不能识别 nodejs 的模块, path 会报错, 需要安装@types/node

yarn add @types/node -D
复制代码

然后修改 tsconfig.node.json

// tsconfig.node.json{"compilerOptions":{"composite":true,"module":"esnext","moduleResolution":"node","allowSyntheticDefaultImports":true},"include":["vite.config.ts"]}复制代码

在 App.vue 里引入 var.css 和 common.less

<!-- src/App.vue -->
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue';
</script><template><HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template><style>
@import url('@/assets/styles/common/var.css');
@import url('@/assets/styles/common/common.less');
</style>
复制代码

然后在 HelloWorld 里使用 less 变量, 可以看到配置生效了

<!-- src/components/HelloWorld.vue -->
<script setup lang="ts">
defineProps<{ msg: string }>();
</script><template><div class="title">{{ msg }}</div>
</template><style lang="less" scoped>
.title {color: @primary-color;
}
</style>
复制代码

3、切换主题色

新建 ThemeSetting 组件, 用于修改全局的主题色

<!-- src/components/ThemeSetting.vue -->
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({setup() {return {color: '#18a058',setColor(color: string) {document.documentElement.style.setProperty('--ant-primary-color',color);},};},methods: {handleChange(color: string) {this.color = color;this.setColor(this.color);},},
});
</script><template><input type="color" v-model="color" @change="handleChange(color)" />
</template><style lang="less" scoped></style>
复制代码

当通过颜色选择器修改颜色后, 可以看到 HelloWorld.vue 的颜色同时被修改了

4、antdv 主题色切换

1、引入 antdv

yarn add ant-design-vue
复制代码

在 main.ts 里引入非组件模块

// src/main.tsimport { createApp } from'vue';
importAppfrom'./App.vue';import { message } from'ant-design-vue';const app = createApp(App);
app.mount('#app');
app.config.globalProperties.$message = message;
复制代码

2、按需加载

安装 unplugin-vue-components

yarn add unplugin-vue-components -D
复制代码

在 vite 里使用插件

// vite.config.tsimport { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';
import path from'path';
importComponentsfrom'unplugin-vue-components/vite';
import { AntDesignVueResolver } from'unplugin-vue-components/resolvers';functionresolve(url: string): string {return path.resolve(__dirname, url);
}exportdefaultdefineConfig({plugins: [vue(),// 按需加载Components({resolvers: [AntDesignVueResolver({// 不加载css, 而是手动加载css. 通过手动加载less文件并将less变量绑定到css变量上, 即可实现动态主题色importStyle: false,}),],}),],...
});复制代码

3、主题色切换

全局引入 css 文件, 并通过 ConfigProvider 设置主题色

<!-- src/App.vue -->
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue';
import ThemeSetting from './components/ThemeSetting.vue';
import { ConfigProvider } from 'ant-design-vue';
ConfigProvider.config({theme: {primaryColor: '#18a058',},
});
</script><template><ThemeSetting /><HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template><style lang="less">
@import url('ant-design-vue/dist/antd.variable.less');
@import url('@/assets/styles/common/var.css');
@import url('@/assets/styles/common/common.less');
</style>
复制代码

在 HelloWorld 里使用 antd 组件

<!-- src/components/HelloWorld.vue -->
<script setup lang="ts">
defineProps<{ msg: string }>();
</script><template><div class="title">{{ msg }}</div><a-button type="primary">按钮</a-button>
</template><style lang="less" scoped>
.title {color: @primary-color;
}
</style>
复制代码

修改 setColor, 添加设置 antd 主题色功能

<script lang="ts">
import { ConfigProvider } from 'ant-design-vue';
import { defineComponent } from 'vue';
export default defineComponent({setup() {return {color: '#18a058',setColor(color: string) {document.documentElement.style.setProperty('--ant-primary-color',color);ConfigProvider.config({theme: {primaryColor: color,},});},};},
});
</script>
...