使用deepMerge库深度合并两个对象可枚举属性

在探索admin ant design vue的源代码时，发现的这个库。

一，简介

深度合并两个或多个对象的可枚举属性。

https://www.npmjs.com/package/deepmerge
这个deepMerge库，在作自定义配置时，比较有用。我们可以先定义一个完整的默认配置对象，然后，再通过自定义配置对象合并整合，就可以即使保留一些默认配置，又实现了自定义的配置。
二，setting的对象定义

// 此配置为系统默认设置，需修改的设置项，在src/config/config.js中添加修改项即可。也可直接在此文件中修改。
module.exports = {
  lang: 'CN',                           //语言，可选 CN(简体)、HK(繁体)、US(英语)，也可扩展其它语言
  theme: {                              //主题
    color: '#1890ff',                   //主题色
    mode: 'light',                       //主题模式 可选 dark、 light 和 night
    success: '#52c41a',                 //成功色
    warning: '#faad14',                 //警告色
    error: '#f5222f',                   //错误色
  },
  layout: 'side',                       //导航布局，可选 side 和 head，分别为侧边导航和顶部导航
  fixedHeader: false,                   //固定头部状态栏，true:固定，false:不固定
  fixedSideBar: true,                   //固定侧边栏，true:固定，false:不固定
  fixedTabs: false,                      //固定页签头，true:固定，false:不固定
  pageWidth: 'fixed',                   //内容区域宽度，fixed:固定宽度，fluid:流式宽度
  weekMode: false,                      //色弱模式，true:开启，false:不开启
  multiPage: false,                     //多页签模式，true:开启，false:不开启
  hideSetting: false,                   //隐藏设置抽屉，true:隐藏，false:不隐藏
  systemName: 'Metis',         //系统名称
  copyright: '2020 Metis',     //copyright
  asyncRoutes: false,                   //异步加载路由，true:开启，false:不开启
  showPageTitle: true,                  //是否显示页面标题（PageLayout 布局中的页面标题），true:显示，false:不显示
  filterMenu: true,                    //根据权限过滤菜单，true:过滤，false:不过滤
  animate: {                            //动画设置
    disabled: true,                    //禁用动画，true:禁用，false:启用
    name: 'bounce',                     //动画效果，支持的动画效果可参考 ./animate.config.js
    direction: 'left'                   //动画方向，切换页面时动画的方向，参考 ./animate.config.js
  },
  footerLinks: [                        //页面底部链接，{link: '链接地址', name: '名称/显示文字', icon: '图标，支持 ant design vue 图标库'}
    {link: 'https://pro.ant.design', name: 'Pro首页'},
    {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'},
    {link: 'https://ant.design', name: 'Ant Design'}
  ],
}

这些就是默认的antd vue admin的默认配置对象
三，_config的对象定义

// 自定义配置，参考 ./default/setting.config.js，需要自定义的属性在这里配置即可
module.exports = {
  theme: {
    color: '#13c2c2',
    mode: 'dark',
  },
  multiPage: true,
  animate: {
    name: 'lightSpeed',
    direction: 'left'
  }
}

如果我们要自定义主题的名称，色彩，多页tab，动画效果时，就用一个自定义的文件。
四，合并配置

const deepMerge = require('deepmerge')
const _config = require('./config')
const {setting} = require('./default')
const config = deepMerge(setting, _config)

module.exports = config

分别导入默认配置对象文件和自定义配置对象文件，然后，调用deepMerge作配置合并。
五，最终的配置对象内容

{lang: "CN", theme: {…}, layout: "side", fixedHeader: false, fixedSideBar: true, …}
animate: {__ob__: Observer}
asyncRoutes: false
copyright: "2020 Metis"
filterMenu: true
fixedHeader: false
fixedSideBar: true
fixedTabs: false
footerLinks: (3) [{…}, {…}, {…}, __ob__: Observer]
hideSetting: false
lang: "CN"
layout: "side"
multiPage: true
pageWidth: "fixed"
showPageTitle: true
systemName: "Metis"
theme:
color: (...)
error: (...)
mode: (...)
success: (...)
warning: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get color: ƒ reactiveGetter()
set color: ƒ reactiveSetter(newVal)
get error: ƒ reactiveGetter()
set error: ƒ reactiveSetter(newVal)
get mode: ƒ reactiveGetter()
set mode: ƒ reactiveSetter(newVal)
get success: ƒ reactiveGetter()
set success: ƒ reactiveSetter(newVal)
get warning: ƒ reactiveGetter()
set warning: ƒ reactiveSetter(newVal)
__proto__: Object
weekMode: false
__proto__: Object

可以看到，multiPage: true，lang: "CN"，完美整合了默认配置和自定义配置~