@xiaonoodles/meetfun-i18n 1.2.16 → 1.3.0

package/MIGRATION_GUIDE.md

@@ -1,253 +1,253 @@
-# Vue2/Vue3 迁移指南
-
-本文档帮助您在 Vue2 和 Vue3 项目之间迁移使用 meetfun-i18n。
-
-## 快速对比
-
-| 特性 | Vue2 | Vue3 |
-|------|------|------|
-| **引入方式** | `import { createMeetFunI18n } from 'meetfun-i18n/vue2'` | `import { createMeetFunI18n } from 'meetfun-i18n'` |
-| **Vue 版本** | Vue 2.7+ | Vue 3.x |
-| **vue-i18n 版本** | 8.x | 9.x |
-| **安装方式** | `Vue.use(i18n)` | `app.use(i18n)` |
-| **API 使用** | 完全相同 ✅ | 完全相同 ✅ |
-
-## Vue2 项目示例
-
-### 1. 安装依赖
-
-```bash
-pnpm add meetfun-i18n vue@^2.7.0 vue-i18n@^8.0.0
-```
-
-### 2. 初始化
-
-```javascript
-// src/locales/index.js
-import { createMeetFunI18n } from 'meetfun-i18n/vue2'
-import zhHans from './zh-Hans.json'
-import en from './en.json'
-import { queryLangDictHotData, queryLangDictColdData } from '@/api/translate'
-
-const baseMessages = {
-  'zh-Hans': zhHans,
-  en: en,
-}
-
-const apiConfig = {
-  queryLangDictHotData,
-  queryLangDictColdData,
-}
-
-export default createMeetFunI18n(baseMessages, apiConfig, {
-  defaultLocale: 'zh-Hans',
-  systemCode: 'YOUR_SYSTEM_CODE',
-})
-```
-
-### 3. 在 main.js 中安装
-
-```javascript
-// main.js
-import Vue from 'vue'
-import App from './App.vue'
-import i18nInstance from './locales'
-
-// 安装 vue-i18n
-Vue.use(i18nInstance.getI18n())
-
-// 可选：挂载到原型
-Vue.prototype.$i18nInstance = i18nInstance
-
-new Vue({
-  i18n: i18nInstance.getI18n(),
-  render: h => h(App)
-}).$mount('#app')
-```
-
-### 4. 在组件中使用
-
-```vue
-<template>
-  <view>
-    <text>{{ $t('welcomeMessage') }}</text>
-    <button @click="changeLanguage">切换语言</button>
-  </view>
-</template>
-
-<script>
-export default {
-  methods: {
-    changeLanguage() {
-      this.$i18nInstance.switchLocale('en')
-    }
-  }
-}
-</script>
-```
-
-## Vue3 项目示例
-
-### 1. 安装依赖
-
-```bash
-pnpm add meetfun-i18n vue@^3.0.0 vue-i18n@^9.0.0
-```
-
-### 2. 初始化
-
-```typescript
-// src/locales/index.ts
-import { createMeetFunI18n } from 'meetfun-i18n'
-import zhHans from './zh-Hans.json'
-import en from './en.json'
-import { queryLangDictHotData, queryLangDictColdData } from '@/api/translate'
-
-const baseMessages = {
-  'zh-Hans': zhHans,
-  en: en,
-}
-
-const apiConfig = {
-  queryLangDictHotData,
-  queryLangDictColdData,
-}
-
-export default createMeetFunI18n(baseMessages, apiConfig, {
-  defaultLocale: 'zh-Hans',
-  systemCode: 'YOUR_SYSTEM_CODE',
-})
-```
-
-### 3. 在 main.ts 中安装
-
-```typescript
-// main.ts
-import { createSSRApp } from 'vue'
-import App from './App.vue'
-import i18nInstance from './locales'
-
-export function createApp() {
-  const app = createSSRApp(App)
-  
-  // 安装 vue-i18n
-  app.use(i18nInstance.getI18n())
-  
-  return {
-    app,
-  }
-}
-```
-
-### 4. 在组件中使用
-
-```vue
-<template>
-  <view>
-    <text>{{ $t('welcomeMessage') }}</text>
-    <button @click="changeLanguage">切换语言</button>
-  </view>
-</template>
-
-<script setup lang="ts">
-import i18nInstance from '@/locales'
-
-const changeLanguage = () => {
-  i18nInstance.switchLocale('en')
-}
-</script>
-```
-
-## 从 Vue2 迁移到 Vue3
-
-如果您的项目正在从 Vue2 升级到 Vue3，只需要：
-
-### 步骤 1：更新引入路径
-
-```typescript
-// 之前 (Vue2)
-import { createMeetFunI18n } from 'meetfun-i18n/vue2'
-
-// 之后 (Vue3)
-import { createMeetFunI18n } from 'meetfun-i18n'
-```
-
-### 步骤 2：更新依赖
-
-```bash
-# 卸载 Vue2 相关依赖
-pnpm remove vue@2 vue-i18n@8
-
-# 安装 Vue3 相关依赖
-pnpm add vue@^3.0.0 vue-i18n@^9.0.0
-```
-
-### 步骤 3：更新 main 文件
-
-```typescript
-// 之前 (Vue2)
-import Vue from 'vue'
-Vue.use(i18nInstance.getI18n())
-Vue.prototype.$i18nInstance = i18nInstance
-
-// 之后 (Vue3)
-import { createSSRApp } from 'vue'
-const app = createSSRApp(App)
-app.use(i18nInstance.getI18n())
-app.config.globalProperties.$i18nInstance = i18nInstance
-```
-
-### 步骤 4：更新组件语法
-
-```vue
-<!-- 之前 (Vue2 Options API) -->
-<script>
-export default {
-  data() {
-    return {
-      text: this.$i18nInstance.$t('hello')
-    }
-  }
-}
-</script>
-
-<!-- 之后 (Vue3 Composition API) -->
-<script setup lang="ts">
-import { ref } from 'vue'
-import i18nInstance from '@/locales'
-
-const text = ref(i18nInstance.$t('hello'))
-</script>
-```
-
-## 注意事项
-
-1. **引入路径**：这是唯一的区别，Vue2 必须从 `meetfun-i18n/vue2` 引入
-2. **API 使用**：所有 API 方法在两个版本中完全相同
-3. **类型支持**：两个版本都提供完整的 TypeScript 类型定义
-4. **功能特性**：所有功能特性在两个版本中保持一致
-
-## 常见问题
-
-### Q: 可以在同一个项目中同时使用 Vue2 和 Vue3 版本吗？
-
-A: 不可以。一个项目只能使用一个版本。请根据项目使用的 Vue 版本选择对应的引入路径。
-
-### Q: 如果引入错误的版本会怎样？
-
-A: 会出现类型错误或运行时错误。Vue3 项目使用 `/vue2` 路径会导致 vue-i18n 版本不匹配。
-
-### Q: 两个版本的性能有差异吗？
-
-A: 性能主要取决于 Vue 和 vue-i18n 的版本，本库在两个版本中的性能表现一致。
-
-### Q: API 函数的实现需要改变吗？
-
-A: 不需要。API 函数的实现在两个版本中完全相同。
-
-## 相关文档
-
-- [README.md](./README.md) - 完整的使用文档
-- [VUE2_USAGE.md](./VUE2_USAGE.md) - Vue2 详细使用指南
-- [USAGE_EXAMPLE.md](./USAGE_EXAMPLE.md) - 更多使用示例
-
+# Vue2/Vue3 迁移指南
+
+本文档帮助您在 Vue2 和 Vue3 项目之间迁移使用 meetfun-i18n。
+
+## 快速对比
+
+| 特性 | Vue2 | Vue3 |
+|------|------|------|
+| **引入方式** | `import { createMeetFunI18n } from 'meetfun-i18n/vue2'` | `import { createMeetFunI18n } from 'meetfun-i18n'` |
+| **Vue 版本** | Vue 2.7+ | Vue 3.x |
+| **vue-i18n 版本** | 8.x | 9.x |
+| **安装方式** | `Vue.use(i18n)` | `app.use(i18n)` |
+| **API 使用** | 完全相同 ✅ | 完全相同 ✅ |
+
+## Vue2 项目示例
+
+### 1. 安装依赖
+
+```bash
+pnpm add meetfun-i18n vue@^2.7.0 vue-i18n@^8.0.0
+```
+
+### 2. 初始化
+
+```javascript
+// src/locales/index.js
+import { createMeetFunI18n } from 'meetfun-i18n/vue2'
+import zhHans from './zh-Hans.json'
+import en from './en.json'
+import { queryLangDictHotData, queryLangDictColdData } from '@/api/translate'
+
+const baseMessages = {
+  'zh-Hans': zhHans,
+  en: en,
+}
+
+const apiConfig = {
+  queryLangDictHotData,
+  queryLangDictColdData,
+}
+
+export default createMeetFunI18n(baseMessages, apiConfig, {
+  defaultLocale: 'zh-Hans',
+  systemCode: 'YOUR_SYSTEM_CODE',
+})
+```
+
+### 3. 在 main.js 中安装
+
+```javascript
+// main.js
+import Vue from 'vue'
+import App from './App.vue'
+import i18nInstance from './locales'
+
+// 安装 vue-i18n
+Vue.use(i18nInstance.getI18n())
+
+// 可选：挂载到原型
+Vue.prototype.$i18nInstance = i18nInstance
+
+new Vue({
+  i18n: i18nInstance.getI18n(),
+  render: h => h(App)
+}).$mount('#app')
+```
+
+### 4. 在组件中使用
+
+```vue
+<template>
+  <view>
+    <text>{{ $t('welcomeMessage') }}</text>
+    <button @click="changeLanguage">切换语言</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    changeLanguage() {
+      this.$i18nInstance.switchLocale('en')
+    }
+  }
+}
+</script>
+```
+
+## Vue3 项目示例
+
+### 1. 安装依赖
+
+```bash
+pnpm add meetfun-i18n vue@^3.0.0 vue-i18n@^9.0.0
+```
+
+### 2. 初始化
+
+```typescript
+// src/locales/index.ts
+import { createMeetFunI18n } from 'meetfun-i18n'
+import zhHans from './zh-Hans.json'
+import en from './en.json'
+import { queryLangDictHotData, queryLangDictColdData } from '@/api/translate'
+
+const baseMessages = {
+  'zh-Hans': zhHans,
+  en: en,
+}
+
+const apiConfig = {
+  queryLangDictHotData,
+  queryLangDictColdData,
+}
+
+export default createMeetFunI18n(baseMessages, apiConfig, {
+  defaultLocale: 'zh-Hans',
+  systemCode: 'YOUR_SYSTEM_CODE',
+})
+```
+
+### 3. 在 main.ts 中安装
+
+```typescript
+// main.ts
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import i18nInstance from './locales'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  
+  // 安装 vue-i18n
+  app.use(i18nInstance.getI18n())
+  
+  return {
+    app,
+  }
+}
+```
+
+### 4. 在组件中使用
+
+```vue
+<template>
+  <view>
+    <text>{{ $t('welcomeMessage') }}</text>
+    <button @click="changeLanguage">切换语言</button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import i18nInstance from '@/locales'
+
+const changeLanguage = () => {
+  i18nInstance.switchLocale('en')
+}
+</script>
+```
+
+## 从 Vue2 迁移到 Vue3
+
+如果您的项目正在从 Vue2 升级到 Vue3，只需要：
+
+### 步骤 1：更新引入路径
+
+```typescript
+// 之前 (Vue2)
+import { createMeetFunI18n } from 'meetfun-i18n/vue2'
+
+// 之后 (Vue3)
+import { createMeetFunI18n } from 'meetfun-i18n'
+```
+
+### 步骤 2：更新依赖
+
+```bash
+# 卸载 Vue2 相关依赖
+pnpm remove vue@2 vue-i18n@8
+
+# 安装 Vue3 相关依赖
+pnpm add vue@^3.0.0 vue-i18n@^9.0.0
+```
+
+### 步骤 3：更新 main 文件
+
+```typescript
+// 之前 (Vue2)
+import Vue from 'vue'
+Vue.use(i18nInstance.getI18n())
+Vue.prototype.$i18nInstance = i18nInstance
+
+// 之后 (Vue3)
+import { createSSRApp } from 'vue'
+const app = createSSRApp(App)
+app.use(i18nInstance.getI18n())
+app.config.globalProperties.$i18nInstance = i18nInstance
+```
+
+### 步骤 4：更新组件语法
+
+```vue
+<!-- 之前 (Vue2 Options API) -->
+<script>
+export default {
+  data() {
+    return {
+      text: this.$i18nInstance.$t('hello')
+    }
+  }
+}
+</script>
+
+<!-- 之后 (Vue3 Composition API) -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import i18nInstance from '@/locales'
+
+const text = ref(i18nInstance.$t('hello'))
+</script>
+```
+
+## 注意事项
+
+1. **引入路径**：这是唯一的区别，Vue2 必须从 `meetfun-i18n/vue2` 引入
+2. **API 使用**：所有 API 方法在两个版本中完全相同
+3. **类型支持**：两个版本都提供完整的 TypeScript 类型定义
+4. **功能特性**：所有功能特性在两个版本中保持一致
+
+## 常见问题
+
+### Q: 可以在同一个项目中同时使用 Vue2 和 Vue3 版本吗？
+
+A: 不可以。一个项目只能使用一个版本。请根据项目使用的 Vue 版本选择对应的引入路径。
+
+### Q: 如果引入错误的版本会怎样？
+
+A: 会出现类型错误或运行时错误。Vue3 项目使用 `/vue2` 路径会导致 vue-i18n 版本不匹配。
+
+### Q: 两个版本的性能有差异吗？
+
+A: 性能主要取决于 Vue 和 vue-i18n 的版本，本库在两个版本中的性能表现一致。
+
+### Q: API 函数的实现需要改变吗？
+
+A: 不需要。API 函数的实现在两个版本中完全相同。
+
+## 相关文档
+
+- [README.md](./README.md) - 完整的使用文档
+- [VUE2_USAGE.md](./VUE2_USAGE.md) - Vue2 详细使用指南
+- [USAGE_EXAMPLE.md](./USAGE_EXAMPLE.md) - 更多使用示例
+