关于vue.js:基于微前端架构的项目动态换肤方案

前言

本计划对于微前端架构我的项目,针对不同业态可展现不同的主题。

示例我的项目采纳vue2.0+vant

思路:
1.依据css伪类 :root配置全局变量,按照vant定制主题,在覆盖文件中取变量值进行笼罩。
2.主框架通过URL携带色值作为参数传给子利用,子利用在页面加载结束后更新页面根元素定义的css变量,从而更新我的项目中所有对该变量的援用。


  1. 引入款式源文件

    //babel.config.js
    
    module.exports = {
      plugins: [
     [
       'import',
       {
         libraryName: 'vant',
         libraryDirectory: 'es',
         // 指定款式门路
         style: (name) => `${name}/style/less`,
       },
       'vant',
     ],
      ],
    };
  2. 批改款式变量

    // vue.config.js
    
    const path = require('path')
    const themePath = path.join(__dirname, './src/assets/css/theme.less')
    
    module.exports = {
      css: {
     loaderOptions: {
       less: {
         // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,间接配置选项。
         lessOptions: {
           modifyVars: {
             // 间接笼罩变量
             'text-color': '#111',
             'border-color': '#eee',
             // 或者能够通过 less 文件笼罩(文件门路为绝对路径)
             hack: `true; @import "${themePath}";`
           }
         }
        }
     }
      }
    };
    
  3. APP.vue中定义全局变量默认值

    <style>
    /*如果须要定义多个全局变量,也可独自搁置在独立的less文件中在此援用即可*/
    :root {
     --color-primary: #fc950b;
    }
    </style>
  4. theme.less文件中用全局变量笼罩vant默认款式

    /*具体参照vant自定义主题的配置表,按需笼罩*/
    @button-primary-background-color: var(--color-primary);
    @button-primary-border-color:  var(--color-primary);
  5. 取url中的色值,批改根元素变量值

    /*
    在适合的地位,如APP.vue的mounted钩子函数中,取url链接中的色值,替换根元素的变量值。
    如以后子利用的url为http://www.segmentfault.com/index.html?color=fc950b
    本例中urlParams()为本人封装的取URL里参数的办法
    */
    
    document.documentElement.style.setProperty("--color-primary", `#${urlParams().color}`);

至此,便实现了动静切换主题色的性能,只需在主框架中确定好子利用的主题色,放在url中作为参数传给子利用,子利用即可动静切换主题色彩,无需从新打包部署。

其余UI框架也可参考同样思路,若我的项目中波及到图标,背景图这类动态资源,可在theme.less文件中定义不同类名,依据主框架url中别的标识来动静设置根元素类名即可。

:root.theme_a {
    --color-primary: #000;
    --banner_a: "url(../../static/images/banner_1.jpg)"
}
:root.theme_b {
    --color-primary: #333;
    --banner_b: "url(../../static/images/banner_2.jpg)"
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理