vue3 后台管理框架geeker admin -- 全局配置(了解)

0 环境

• Node.js 16.x+
• pnpm 7.x+
• Git

1 参考文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

App.vue

global.ts

Config Provider 全局配置

vue-i18n

vue-i18n简单的demo

2 前言

要想在线看源码的，请点开上面的参考文档 App.vue查看具体源码，本地的源码位置：src/App.vue，下面我就会直接用App.vue替代了。还有global.ts参考文档上也有，本地位置在：src/stores/modules/global.ts。

3 大体了解

看下图： 这里先大致看下代码，跟el-config-provider和useGlobalStore有关。看一看el-config-provider和useGlobalStore如何初始化的。

4 Config Provider 全局配置

首先看官方文档。

语言、组件大小、按钮是否要空格。

5 代码分析

先看下globalStore的默认值。

1 初始化语言

1 了解vue-i18n

这里我们看到了useI18n来自vue-i18n中，

如下图，再找到package.json，确实是第三方的库，而并不是自定义的，搜索一下，vue-i18n。

找到vue-i18n的文档后(不想找的，上面有官方链接或者看我的截图)。如下图：

跟着文档的步骤找到main.ts，虽然格式没问题，但没看到createI18n呀，那么大概率@/languages/index里了，如下图是没有的。

• allowComposition: true：这可能是指使用组合模式来处理国际化的内容。这样可以使你的语言文件更加模块化，并允许你在多个文件或部分中重用相同的翻译。

• legacy 的默认值设为 false，意味着默认是不使用遗留的方案，而是采用新的国际化方案。

• locale: getBrowserLang(),：这表示默认的语言设置是基于浏览器的语言。getBrowserLang() 是一个函数，它检测并返回浏览器的当前语言(如下图所示，判断是中文返回中文，否则就是英文)。

• messages: { zh, en }：这是保存有所需翻译信息的对象，当然这里是可以拓展的，看个人需要加语言。对象的每个属性（如 zh， en）包含一个对应语言（在此为中文、英文）的翻译信息对象。这个翻译信息对象将根据上面设置的 locale 的值在页面上显示相应的语言。如下图，中英文的定义其实没啥，就是value不一样，key字段都一样的。

想要看具体的demo，可以找到上面的vue-i18n简单的demo链接，这个是官方提供的demo。具体截图如下，可以看出只要createI18n定义好了后，就可以用$t('xxx')的格式得到自己想要的中/英文值。

2 onMounted

看App.vue下24-30行，第25行是使用i18n实例，第27行默认语言是null，那么会从浏览器中得到对应的语言，上面有说过。分别被i18n.locale.value和globalStore language存入，并且断言为LanguageType包含了"zh" | "en" | null(假如你又有其它语言，别忘了在LanguageType中补充一下)。

2 element language

这里从globalStore.language拿到的是中文，那么返回element plus中文的语言，若拿到的是英文，就返回element plus英文的语言包，假如都不是，判断不是中文的话，一律视为英文。

3 其它

请看下40-43行，这里的assemblySize拿到的是全局globalStore里的默认值。一旦它的值发生变化，这里的全局组件它的大小也会及时更新上去的。button元素默认不要有空格。

6 总结

el-config-provider是element plus提供给我们全局配置的一个方案，比如常规用到的语言、组件大小、按钮是否要空格。初始化语言的时候，会用到vue-i18n，因为el-config-provider主要是为 Element Plus 组件库设置语言环境，以确保这些组件能够使用正确的语言。而vue-i18n包含了整个应用，为其提供国际化的支持，说白了就是element plus够不着的地方，就是它的底盘，比如文本。还有它俩语言设置是一致的(看onMounted)。其它的就简单了，就是从globalStore拿数据，顶多再加个判断。还有一个initTheme待续。

原文：https://juejin.cn/post/7381781956726898700