1、基于 vue element-ui node10
实现
1、创建文件夹theme
2、cd theme 文件夹 npm init -y
3、安装主题生成工具 npm i element-theme -D
4、安装主题包 npm i element-theme-chalk -D
5、初始化变量文件 node_modules/.bin/et -i
6、可以看到多出一个 element-variables.css的文件
7、然后调整几个颜色变量值,
- 可以直接在element-variables.css中直接修改
- 也可以使用[官方在线构建](https://element.eleme.cn/#/zh-CN/theme/preview)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9523f05a31a646ac846e00f4a9e0fce3.png#pic_center)
下载替换 element-variables.css 文件即可
8、构建主题包:node_modules/.bin/et
9、将构建完成包放到项目 public/theme/[名称] 下面
10、手动用函数引入
themeColorChangeHandle (val) {
var urlObj =
{
id: 'J_elementTheme',
url: `${process.env.BASE_URL}theme/${val}/index.css?t=${nDate().getTime()}`
},
var el = document.querySelector(`#${urlObj.id}`)
if (el) {
el.href = urlObj.url
}
el = document.createElement('link')
el.id = urlObj.id
el.href = urlObj.url
el.rel = 'stylesheet'
document.querySelector('head').appendChild(el)
}