Ant design vue动态主题切换的坑与一般性方法

本文原创，并且以吐槽为主，下面开始：

Ant design vue是很优秀的框架，不过对于一般小白用户（比如我），文档方面不够友好。官方给出了主题自定义色彩的方案，但是太过于简陋，网上很多技术解决方案也点到即止，我在这方面足足浪费了两天时间，下面说一下技术重点，每个点都是自己踩出来的坑，都是泪：

先说下需要的各个模块以及版本号，这个很重要，版本号不对，就会有各种你搜都搜不出解决方案的报错

【以下内容均针对vue cli3/4初始化的项目环境，其他方案请自行解决】

Vue@2.6.11
Ant-design-vue@1.7.4
less@2.7.3
less-loader@4.1.0 //这个应该在7.x及以下版本都可以，不要再高了antd-theme-generator@1.2.8 //这个是主题切换的主要module

上面的module，特别需要注意的是antd-theme-generator如果是用1.2.8版本，则需要在【node-modules/ant-design-vue/lib/style/themes/default.less】文件中添加下面内容，否则会报LessError: error evaluating function darken: color.toHSL is not a function错误，less无法生成，我在这里卡了很久……

@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;

如果不想改module文件，可以把antd-theme-generator降级到1.2.5版本。

截至2021年3月，个人不推荐上vue3和ant design vue2.x版本，主要原因是因为如果你在项目中要应用其他modules的时候，很多支持不够好，可能会跑不起来

下面进入具体步骤，个别地方与网上一大抄的文章不太一样：

1、新建themer.js在【项目根目录】，内容如下：

const path = require("path");
const { generateTheme, getLessVars } = require("antd-theme-generator");
// ant-design-vue/dist/antd.less
const options = {antDir: path.join(__dirname, "./node_modules/ant-design-vue"), //对应具体位置stylesDir: path.join(__dirname, "./src/assets/theme"), //对应具体位置varFile: path.join(__dirname, "./src/assets/theme/var.less"), //对应具体位置mainLessFile: path.join(__dirname, "./src/assets/theme/index.less"), //对应具体位置themeVariables: ["@primary-color","@secondary-color","@text-color","@text-color-secondary","@heading-color","@layout-body-background","@btn-primary-bg","@layout-header-background","@body-background",],indexFileName: "index.html",outputFilePath: path.join(__dirname, "./public/color.less"),
};
generateTheme(options).then((less) => {console.log("Theme generated successfully");}).catch((error) => {console.log("Error", error);});

2、在项目目录【src/assets】下新建theme目录以及index.less和var.less两个文件用来生成需要的css，其中index.less为空即可，当然也可以直接把一些less变量写死在里面，然后var.less里放置你想要动态修改的变量，比如：

@import "~ant-design-vue/lib/style/themes/default.less";
@link-color: #00375b;
@primary-color: rgb(138, 164, 182);
@body-background: #222;

3、修改package.json中的生成语句中，添加【node themer】命令，比如我的是：

"scripts": {"dev": "node themer & vue-cli-service electron:serve"
},

意思就是在编译的时候，生成color.less到public文件夹内供调用

4、修改你的vue.config.js

module.exports = {css: {loaderOptions: {less: {lessOptions: {modifyVars: {},javascriptEnabled: true,},},},},
};

5、在你的Vue文件中，添加以下方法：

btnclick(color) {this.color = color;this.changeTheme();
},
changeTheme() {window.less.modifyVars({"@primary-color": this.color,"@link-color": this.color,"@btn-primary-bg": this.color,"@body-background": this.color,}).then(() => {console.log("成功");}).catch((error) => {alert("失败");console.log(error);});
}

6、在【public/index.html】的</body>之前，添加以下代码：

<link rel="stylesheet/less" type="text/css" href="/color.less" /><script>window.less = {async: false,env: 'production'};</script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

这样，就把页面的css内容直接动态替换掉了。我的项目中会使用到dark主题，其实就是替换掉其中的核心less变量即可，等做好了单独写文章记录具体的色值和变量。

Ant design vue动态主题切换的坑与一般性方法相关推荐

Ant Design Vue 动态路由
main.js 引入 router import router from './router' new Vue({router,i18n,created: bootstrap,render: h =& ...
vue3+ant design vue 动态加载Icon图标
问题与思路在使用前端组件库时,我们常常会遇到需要动态加载 Icon 图标,如何处理这一需求,是前端开发人员必须思考的问题.在 vue 中,有一个内置组件 component,它的主要作用是配合 is ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
Ant Design Vue 切换中英文改变Menu和内容
前言,目前一个小项目使用的是Ant Design Vue,情况是路由从接口获取并渲染到页面上,切换国际化语言时,Menu 和内容都中英文自动切换. Ant Design Vue 结构 Ant D ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...

Ant design vue动态主题切换的坑与一般性方法

Ant design vue动态主题切换的坑与一般性方法相关推荐

最新文章

热门文章