完善

Former-commit-id: dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly 8bbdd72ba63cd9161b2b2e51826b8813e8c9fffc [formerly e7d3090ad5a6f6801b32d0abce9a4e9291fcc0e7]]]]]
Former-commit-id: 1be4f8ac464528598b8a52649c107686d01c08d8
Former-commit-id: 7317640b0da3a039d8ca5b6457c1263fc1261272
Former-commit-id: 29d4f7df0be48866f4309a012d38e008e1725438 [formerly 9ee9681b4a3200cc3b344673e83d9f5e4343f07a]
Former-commit-id: fddc0694f8fbf921142069e11ff694ea218fa0d9
Former-commit-id: 92059d07f780aa09aaff77faf9bc41a8bd6269f0
Former-commit-id: aef5ddaf56545324913a9b425e7f8b7c3ed45518
Former-commit-id: 279be73fde5a48ddc78a258a2ea55a3b0d64fe2b
Former-commit-id: b970cb8f0bbe694a3bf733e726f8c833a1f3f511

docs/zh/plugins/i18n.md

@@ -0,0 +1,124 @@
+# 多国语
+
+多国语插件
+
+::: tip
+此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
+:::
+
+公用的语言设置建议放在 `src/i18n` 下
+
+i18n 文件夹结构如下所示
+
+```
+|__index.js // 主文件
+|__lang // 语言配置文件夹
+| |__cn // 中文
+| | |__index.js // 中文 公用配置
+| |__ja // 日语
+| | |__index.js // 日语 公用配置
+| |__en // 英语
+| | |__index.js // 英语 公用配置
+```
+
+在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
+
+``` js
+import i18n from './i18n'
+new Vue({
+  el: '#app',
+  store,
+  i18n, // 使用 i18n
+  router,
+  template: '<App/>',
+  components: { App }
+})
+```
+
+## 使用
+
+使用 `$t('路径')`
+
+``` vue
+<PageHeader
+  slot="header"
+  :title="`${$t('pub.pageHeader.demo')} 1`"
+  url="http://kazupon.github.io/vue-i18n/en/">
+</PageHeader>
+```
+
+## 局部配置
+
+有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2-admin/src/i18n` 中会造成混乱，不易维护
+
+`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
+
+示例
+
+``` vue
+<i18n src="./lang.json"></i18n>
+
+<template>
+  <div>
+    <el-tag>{{$t('hello')}}</el-tag>
+    <p>{{$t('check.title')}}</p>
+    <el-checkbox-group v-model="check">
+      <el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
+      <el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
+      <el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      check: ['a', 'b']
+    }
+  }
+}
+</script>
+```
+
+在同一文件夹下的 `lang.json`
+
+``` json
+{
+  "cn": {
+    "hello": "你好",
+    "check": {
+      "title": "请选择",
+      "label": {
+        "Beijing": "北京",
+        "Tokyo": "东京",
+        "NewYork": "纽约"
+      }
+    }
+  },
+  "en": {
+    "hello": "hello",
+    "check": {
+      "title": "Please choose",
+      "label": {
+        "Beijing": "Beijing",
+        "Tokyo": "Tokyo",
+        "NewYork": "NewYork"
+      }
+    }
+  },
+  "ja": {
+    "hello": "こんにちは",
+    "check": {
+      "title": "選択してください",
+      "label": {
+        "Beijing": "北京",
+        "Tokyo": "東京",
+        "NewYork": "ニューヨーク"
+      }
+    }
+  }
+}
+```
+
+详细教程请查看官方文档，见此页右上角的链接