前端动态换肤方式: vue + element-ui（一）

1、新建vue项目（由于目前公司采用的是vue2，因此采用此方式）

// 全局安装
npm install -g @vue/cli-init
// 新建项目
vue init webpack project-name

2、打开项目准备进行换肤实现

第一步：

// 安装element-ui框架
npm install --save element-ui

// 在main.js中进行引用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

// 如果需要进行其他设置或者只需要引用部分组件参见官网

第二步：

然后按照官网element-ui命令行主题工具部分进行操作，直到引入自定义主题部分结束

如果仅仅是定制样式而不需要换肤的话，那么到这一步就结束了；

如果仅仅是换肤的话，第二步可以忽略不进行操作。

第三步：

封装 theme-picker换肤公共组件

方式一：摘自

第四步：使用

以上样式及事件并非全部必要，按需求添加即可；

小结：

这个方案仍有不完善的地方，element-ui的部分组件比如el-header如果设置背景色，这个背景色是不会随之改变的。

待进一步研究。

 

此乃个人学习记录，如有问题还望指出，如有更改方案还望指教，谢谢。