Auto Commit

.eslintrc.cjs

+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+    root: true,
+    'extends': [
+        'plugin:vue/vue3-essential',
+        'eslint:recommended',
+        '@vue/eslint-config-prettier/skip-formatting'
+    ],
+    parserOptions: {
+        ecmaVersion: 'latest'
+    },
+    globals: {
+        $t: true, setLang: true
+    }
+}

package.json

@@ -8,10 +8,16 @@
   },
   "dependencies": {
     "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-i18n": "^9.3.0-beta.24"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.0.1",
-    "vite": "^3.0.1"
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "eslint": "^8.39.0",
+    "eslint-plugin-vue": "^9.11.0",
+    "prettier": "^2.8.8",
+    "vite": "^4.3.9"
   }
-}
+}
\ No newline at end of file

src/App.vue

@@ -12,9 +12,9 @@ import TheWelcome from './components/TheWelcome.vue'
     </div>
   </header>
 
-  <main>
+  <!-- <main>
     <TheWelcome />
-  </main>
+  </main> -->
 </template>
 
 <style scoped>

src/components/HelloWorld.vue

 <script setup>
+import { useI18n, } from 'vue-i18n'
+const { t, locale } = useI18n()
 defineProps({
   msg: {
     type: String,
     required: true
   }
 })
+
+const handleChange = (param) => {
+  console.log('handleChange', param);
+  let elem = document.querySelector('#toggle');
+  let currentVal = ['zh_CN', 'zh_HK', 'en_US'][elem.selectedIndex]
+  console.log('handleChange', elem, elem.selectedIndex, currentVal);
+  setLang(currentVal)
+}
+console.log('================================');
+console.log(t('title'));
+console.log($t.t('title'));
+console.log('================================');
 </script>
 
 <template>
   <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
+    <!-- <h1 class="green">{{ msg }}</h1>
     <h3>
       You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3> -->
+    <select name="language" id="toggle" @change="handleChange">
+      <option value="zh_CN">简体中文</option>
+      <option value="zh_HK">繁體中文</option>
+      <option value="en_US">English</option>
+    </select>
+    <p>{{ $t('title') }}</p>
+    <p>{{ $t('content') }}</p>
   </div>
 </template>
 
 <style scoped>
-h1 {
+body {
+  display: flex;
+  justify-content: center;
+}
+
+h1,
+p {
   font-weight: 500;
   font-size: 2.6rem;
+  position: relative;
   top: -10px;
+  margin-top: 20px;
 }
 
 h3 {
@@ -35,9 +64,17 @@ h3 {
 }
 
 @media (min-width: 1024px) {
+
   .greetings h1,
   .greetings h3 {
     text-align: left;
   }
 }
+
+#toggle {
+  margin: 0 auto;
+  width: 300px;
+  height: 45px;
+  font-size: 20px;
+}
 </style>

src/i18n/config/en_US.json

+{
+    "title": "Internationalized text",
+    "content": "I am an internationalized text"
+  }
+  
\ No newline at end of file

src/i18n/config/zh_CN.json

+{
+    "title": "国际化文字",
+    "content": "我是国际化过的文字哦"
+  }
+  
\ No newline at end of file

src/i18n/config/zh_HK.json

+{
+    "title": "國際化文字",
+    "content": "我是國際化過的文字哦"
+  }
+  
\ No newline at end of file

src/i18n/index.js

+import { createI18n } from 'vue-i18n'
+import en_US from './config/en_US.json'
+import zh_CN from './config/zh_CN.json'
+import zh_HK from './config/zh_HK.json'
+
+const I18n = createI18n({
+    locale: 'zh_CN',
+    globalInjection: true,
+    legacy: false,
+    messages: {
+        zh_CN,
+        zh_HK,
+        en_US
+    }
+})
+
+const setLang = (lang) => {
+    if (!lang) return;
+    console.log('setLang', lang);
+    I18n.global.locale.value = lang
+}
+// 
+window.$t = I18n.global
+window.setLang = setLang
+
+export default I18n

src/main.js

-import { createApp } from 'vue'
-import App from './App.vue'
-
 import './assets/main.css'
 
-createApp(App).mount('#app')
+import App from './App.vue'
+import I18n from './i18n'
+import { createApp } from 'vue'
+
+createApp(App).use(I18n).mount('#app')