关于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)"
}