feat: 支持国际化

documents/docs/.vuepress/config.ts

@@ -26,33 +26,29 @@ export default defineUserConfig({
     smoothScroll: true,
     darkMode: false,
     navbar: [
-      { 
+      {
         text: '指南',
         link: '/README.md',
       },
       {
         text: 'v6.x',
         children: [
-          { 
+          {
             text: 'v6.x',
-            link: '/'
+            link: '/',
           },
-          { 
+          {
             text: 'v5.x',
-            link: 'https://codexu.github.io/'
+            link: 'https://codexu.github.io/',
           },
-        ]
+        ],
       },
     ],
     sidebar: {
       '/': [
         {
           text: '指南',
-          children: [
-            '/',
-            '/guide/overview/quickstart.md',
-            '/guide/overview/deploy.md',
-          ]
+          children: ['/', '/guide/overview/quickstart.md', '/guide/overview/deploy.md'],
         },
         {
           text: '核心',
@@ -66,17 +62,18 @@ export default defineUserConfig({
             '/guide/core/request.md',
             '/guide/core/env.md',
             '/guide/core/standard.md',
-          ]
+            '/guide/core/i18n.md',
+          ],
         },
         {
           text: '相关',
           children: [
             '/guide/depth/plugin.md',
             '/guide/depth/history.md',
             '/guide/depth/contribution.md',
-          ]
+          ],
         },
       ],
     },
   }),
-})
+});

documents/docs/guide/core/i18n.md

@@ -0,0 +1,32 @@
+# 国际化
+
+如果你使用的 vscode 开发工具，则推荐使用 [i18n Ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) 插件，安装了该插件后，你的代码内可以实时看到对应的语言内容。
+
+## 使用
+
+X-BUILD 已经帮你安装好了 i18n 插件，开箱即用，可以参考下面的简单示例：
+
+```vue
+<template>
+  <form>
+    <label>{{ t('language') }}</label>
+    <select v-model="locale">
+      <option value="en">en</option>
+      <option value="zh_CN">zh_CN</option>
+    </select>
+  </form>
+  <p>{{ t('message.title') }}</p>
+</template>
+
+<script lang="ts" setup name="PageExample">
+import { useI18n } from 'vue-i18n';
+
+const { t, locale } = useI18n();
+</script>
+```
+
+## 语言文件
+
+在 src/locales/lang/ 管理对应语言的文件。
+
+如果你想新增语言，例如增加日语，你可以在此目录下创建 ja.ts，并对此语言进行配置。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-build",
-  "version": "6.2.5",
+  "version": "6.3.0",
   "description": "",
   "main": "bin/x-build.js",
   "bin": {

template/package.ejs

@@ -36,6 +36,7 @@
     "tailwindcss": "2.2.19",
     "ua-parser-js": "0.7.28",
     "vue": "3.2.6",
+    "vue-i18n": "^9.2.2",
     "vue-router": "4.0.11",
   },
   "devDependencies": {

template/src/locales/index.ts

@@ -0,0 +1,17 @@
+import { createI18n } from 'vue-i18n';
+// eslint-disable-next-line camelcase
+import zh_CN from './lang/zh_CN';
+import en from './lang/en';
+
+const messages = {
+  zh_CN,
+  en,
+};
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'zh_CN',
+  messages,
+});
+
+export default i18n;

template/src/locales/lang/en.ts

@@ -0,0 +1,6 @@
+// src/i18n/language/en.ts
+export default {
+  message: {
+    title: 'hello',
+  },
+};

template/src/locales/lang/zh_CN.ts

@@ -0,0 +1,5 @@
+export default {
+  message: {
+    title: '你好',
+  },
+};

template/src/main.ejs

@@ -1,9 +1,10 @@
 import { createApp } from 'vue';
+import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { components, plugins } from './components';
 import App from './App.vue';
 import store from './stores';
 import router from './router';
-import { useRegisterSW } from 'virtual:pwa-register/vue';
+import i18n from './locales';
 import '@/router/permission';
 import 'virtual:svg-icons-register';
 
@@ -15,6 +16,7 @@ useRegisterSW();
 const app = createApp(App);
 app.use(store);
 app.use(router);
+app.use(i18n);
 app.mount('#app');
 
 // 加载全局组件