no message

Former-commit-id: c99a0d09610fa66974da251bf29b55a3f5748804
Former-commit-id: 476c8fa042737ed58f521599d31020eda8ab7544
Former-commit-id: 476b1894db99d4b423da3617c83724a7c783c116

src/pages/demo/plugins/vue-i18n/doc.vue

@@ -1,5 +1,10 @@
 <template>
   <Container>
+    <PageHeader
+      slot="header"
+      title="使用方法"
+      url="http://kazupon.github.io/vue-i18n/en/">
+    </PageHeader>
     <Markdown url="/static/markdownFiles/article/插件 - 多国语.md"></Markdown>
   </Container>
 </template>

src/router/menu/_plugin.js

@@ -74,7 +74,7 @@ export const menu = {
           component: resolve => { require(['@/pages/demo/plugins/vue-i18n/demo-2.vue'], resolve) }
         },
         {
-          title: '文档',
+          title: '使用方法',
           icon: 'file-o',
           path: 'vue-i18n/doc',
           name: 'demo-plugins-vue-i18n-doc',

static/markdownFiles/article/插件 - 多国语.md

@@ -2,3 +2,121 @@
 
 多国语插件
 
+> 此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
+
+公用的语言设置建议放在 `d2admin-vue-element/src/i18n` 下
+
+i18n 文件夹结构如下所示
+
+```
+|__index.js // 主文件
+|__lang // 语言配置文件夹
+| |__cn // 中文
+| | |__index.js // 中文 公用配置
+| |__ja // 日语
+| | |__index.js // 日语 公用配置
+| |__en // 英语
+| | |__index.js // 英语 公用配置
+```
+
+在 `d2admin-vue-element/src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
+
+```
+import i18n from './i18n'
+new Vue({
+  el: '#app',
+  store,
+  i18n, // 使用 i18n
+  router,
+  template: '<App/>',
+  components: { App }
+})
+```
+
+## 基本使用方法
+
+使用 `$t('路径')`
+
+```
+<PageHeader
+  slot="header"
+  :title="`${$t('pub.pageHeader.demo')} 1`"
+  url="http://kazupon.github.io/vue-i18n/en/">
+</PageHeader>
+```
+
+## 在组件中单独配置
+
+有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2admin-vue-element/src/i18n` 中会造成混乱，不易维护
+
+`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
+
+示例
+
+```
+<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`
+
+```
+{
+  "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": "ニューヨーク"
+      }
+    }
+  }
+}
+```
+
+详细教程请查看官方文档，见此页右上角的链接