diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 45cad17..faf38d7 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -25,6 +25,7 @@ export default defineConfig({ items: [ { text: "自动路由", link: "/cli-feature/auto-router" }, { text: "组件库", link: "/cli-feature/component-lib" }, + { text: "国际化", link: "/cli-feature/international" }, ], }, ], diff --git a/docs/cli-feature/international.md b/docs/cli-feature/international.md new file mode 100644 index 0000000..29eb086 --- /dev/null +++ b/docs/cli-feature/international.md @@ -0,0 +1,39 @@ +# 国际化 + +## 使用 i18n + +如果您需要适配国际化,Hucky 提供了 i18n 基础配置,首先您可以先查阅 [i18n 文档](https://vue-i18n.intlify.dev/guide/advanced/composition.html) 其中的 composition api 部分以获取基础知识。 + +其中您主要需要使用到的是 `useI18n` 函数,它返回一个对象,其中包含了 `t` 方法,用于翻译字符串。 + +```vue + + + +``` + +关于 t 方法后方的参数,它来自于 `i18n/index.ts` 中的实现 `messagesInterface` 接口的对象。也就是说如果您需要添加新的翻译字符串,您需要首先在 `messagesInterface` 接口中添加新的属性,然后在类似 `zh_CNMessages` 和 `en_USMessages` 等具体语言文件中添加对应的翻译字符串。 + +## 切换语言 + +切换语言同样需要用到 `useI18n` 函数,其中包含了 `locale` 属性,您可以通过修改这个属性来切换语言。 + +```vue + +``` + +Hucky 本身提供了 `ChangeLanguageDropdownButton` 组件以及相对应的一些封装方法,通过使用这个组件您可以让用户自行更改需要的语言。您也可以深入 `hooks/globalLanguageHook` 中的方法来拓展更多功能。 diff --git a/src/hooks/globalLanguageHook.ts b/src/hooks/globalLanguageHook.ts index 3ba3a8b..8e3b894 100644 --- a/src/hooks/globalLanguageHook.ts +++ b/src/hooks/globalLanguageHook.ts @@ -3,7 +3,6 @@ import { GlobalLanguage, languageMap, } from "@/stores/LanguageStore"; -import { Locale } from "vue-i18n"; const languageStore = useLanguageStore();