② index.js是关键文件，里面定义了翻译函数t；兼容i18n插件的处理函数i18nHandler；初始化页面时设置语言的use函数（需要刷新页面才能生效）
③ format.js是关键文件，用来处理多语言变量插值问题
来看下关键代码-翻译函数（t）：
//引入默认语言文件（可更改）
import defaultLang from './lang/en';
export const t = function (path, options) {
//兼容i18n插件
let value = i18nHandler.apply(this, arguments);
if (value !== null && value !== undefined) return value;
//传入来的是个路径，如aowu.test.btnContent，分割成数组，去获取对应的字段值
const array = path.split('.');
let current = lang;
for (let i = 0, j = array.length; i < j; i++) {
const property = array[i];
value = current[property];
//获取btnContent字段值并交给format处理并返回
if (i === j - 1) return format(value, options);
if (!value) return '';
current = value;
}
return '';
};
来看看在.vue文件中是如何使用的：
说明：
① src/mixins文件夹存放所有要混入（mixin）到组件中的对象。
② src/mixins/locale.js文件只是引入t函数，并绑定所在组件的作用域。
③ button.vue中混入了locale.js中的t方法，之后在组件中就可以使用this.t("path"，options)。
可以看到，有以下四个步骤：
① 前端修改color-primary的颜色
② 前端向后端发送了个更新css的请求，参数中有$--color-primary: "#FF4086"
③ 服务器实时编译并返回一个css文件（当中所有的--color-primary都已替换为"#FF4086"）
④ 前端加载使用这个css文件
好，搞懂了原理，现在我们也来实现一份(ElementUI使用Sass，我使用Stylus)：
在项目中创建相应的文件，如下图图所示：
说明：
① 新建了个theme-chalk文件夹（ElementUI中theme-chalk是个独立项目，便于其他项目单独安装）
② theme-chalk/src下存放各个样式文件，packages中的一个组件对应这里的一个样式文件
③ theme-chalk/src/common/var.js存放各种样式变量（栗子：$--button-color = #fff）
① button/src文件夹下是button组件② button/index.js作用是给button添加一个注册函数，当使用Vue.use按需引入时执行（例：Vue.use(Button)）
可以看到，有以下四个步骤：
