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

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

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

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

引入款式源文件

//babel.config.js

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

批改款式变量

// 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}";`
       }
     }
    }
 }
  }
};

APP.vue 中定义全局变量默认值

<style>
/* 如果须要定义多个全局变量，也可独自搁置在独立的 less 文件中在此援用即可 */
:root {--color-primary: #fc950b;}
</style>

theme.less 文件中用全局变量笼罩 vant 默认款式

/* 具体参照 vant 自定义主题的配置表，按需笼罩 */
@button-primary-background-color: var(--color-primary);
@button-primary-border-color:  var(--color-primary);

取 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)"
}

前言