基于webpack4+vue-cli3项目实现换肤功能


Posted in Javascript onJuly 17, 2019

起因

最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤。

项目开始

首先我们用vue-element-admin这个开源的后台管理系统项目来做demo演示,为了便于做二次开发,下载vue-admin-template来开发。

// 从github下载vue-admin-template
clone https://github.com/PanJiaChen/vue-admin-template.git
cd vue-admin-template
npm install
npm run dev

运行成功后的效果

基于webpack4+vue-cli3项目实现换肤功能

安装style-loader处理器

因为vue-admin-template项目是添加过sass-loader依赖的,所以不用我们再次安装,在上一步就已经安装好了。

npm install style-loader --save-dev

创建主题文件

在src目录下创建theme-chalk、theme-light主题文件夹
在两个主题目录下创建index.useable.scss文件 

基于webpack4+vue-cli3项目实现换肤功能

index.useable.scss中写入样式

// theme-chalk/index.useable.scss
body {
  background: red; 
}
// theme-light/index.useable.scss
body {
  background: green; 
}

基于webpack4+vue-cli3项目实现换肤功能

到此,我们的主题样式都已经建好了,现在要将主题应用上去

在vue.config.js中增加style-loader/useable

vue-cli2根vue-cli3的配置区别还是挺大的,我在配置的过程中遇到很多坑,因为vue-cli3没有了webpack.config.js文件,我们在配置webpack的时候无法根据老文档来配置,需要熟悉cli3的webpack-chain来链式修改配置,但是文档很少,配置的过程中异常困难。

在配置文件中chainWebpack链式修改webpack配置就能成功应用loader了,话不多说,直接上代码,

// 换肤loader
  const scss = config.module.rule('scss').toConfig();
  const useable = { ...scss.oneOf[3], test: /\.useable.scss$/ };
  useable.use = [...useable.use];
  useable.use[0] = { loader: 'style-loader/useable' };
  config.module.rule('scss').merge({ oneOf: [useable] });

基于webpack4+vue-cli3项目实现换肤功能

使用主题

在准备工作都做好后,接下来我们开始使用主题样式。

之前说的为什么要用style-loader来做换肤呢?是因为style-loader提供了useable这一API,可动态加载删除link文件。具体详情请自行去看看style-loader。

在src目录下,创建theme.js文件

const cache = {};
const themeAction = {
 chalk() {
  if (!cache.chalk) {
   cache.chalk = import('./styles/theme-chalk/index.useable.scss');
  }
  return cache.chalk;
 },
 light() {
  if (!cache.light) {
   cache.light = import('./styles/theme-light/index.useable.scss');
  }
  return cache.light;
 }
};
let current = null;
async function setTheme(theme) {
 if (themeAction[theme]) {
  const style = await themeAction[theme]();
  if (current) {
   current.unref();
  }
  style.ref();
  current = style;
 }
}
window.setTheme = setTheme;
export default setTheme;

在main.js中,引入theme.js。

import setTheme from './theme'
// 使用主题
setTheme('chalk')

重启服务,查看效果

基于webpack4+vue-cli3项目实现换肤功能

在实际项目中,可根据传入的主题(chalk/light),动态切换主题色,同时也可根据业务需求,创建多个主题。我们只需要在index.useable.scss文件中写样式变量即可。

总结

以上所述是小编给大家介绍的基于webpack4+vue-cli3项目实现换肤功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
js getBoundingClientRect使用方法详解
Jul 17 #Javascript
深入了解Hybrid App技术的相关知识
Jul 17 #Javascript
Vue发布项目实例讲解
Jul 17 #Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 #Javascript
百度小程序自定义通用toast组件
Jul 17 #Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 #Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 #Javascript
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
javascript读取xml
2006/11/04 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JavaScript闭包详解
2015/02/02 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
matplotlib实现区域颜色填充
2019/03/18 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python之array赋值技巧分享
2019/11/28 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
python 如何对logging日志封装
2020/12/02 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
紧急通知
2015/04/17 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
使用Redis实现分布式锁的方法
2022/06/16 Redis