diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..098109c3a09e214798dea5575eb4eaba523d51d6
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,17 @@
+/* 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
+    }
+}
diff --git a/package.json b/package.json
index aa1c7deb0adb6e6aea5a1380426189ac24eee7a7..e02dffb7c037e4fe764e71b8b6375d83df75b203 100644
--- a/package.json
+++ b/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
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..26a5a8d6141563e71f3911bfadc41c232517f949 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,9 +12,9 @@ import TheWelcome from './components/TheWelcome.vue'
     </div>
   </header>
 
-  <main>
+  <!-- <main>
     <TheWelcome />
-  </main>
+  </main> -->
 </template>
 
 <style scoped>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1b8faac1521345513353e96050dd24d94610d432..cf4e5b0fcd5d455bc6e6f6a8be6a566bd9cdfa60 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,28 +1,57 @@
 <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>
diff --git a/src/i18n/config/en_US.json b/src/i18n/config/en_US.json
new file mode 100644
index 0000000000000000000000000000000000000000..d4b5d79bcb7096e36101ed2a1e002fe378aa998f
--- /dev/null
+++ b/src/i18n/config/en_US.json
@@ -0,0 +1,5 @@
+{
+    "title": "Internationalized text",
+    "content": "I am an internationalized text"
+  }
+  
\ No newline at end of file
diff --git a/src/i18n/config/zh_CN.json b/src/i18n/config/zh_CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..cfc8b6090fe436dabaa435dd430a330c5acd59ee
--- /dev/null
+++ b/src/i18n/config/zh_CN.json
@@ -0,0 +1,5 @@
+{
+    "title": "国际化文字",
+    "content": "我是国际化过的文字哦"
+  }
+  
\ No newline at end of file
diff --git a/src/i18n/config/zh_HK.json b/src/i18n/config/zh_HK.json
new file mode 100644
index 0000000000000000000000000000000000000000..6cdb570eeb27f152591ba790499e0aee1c782064
--- /dev/null
+++ b/src/i18n/config/zh_HK.json
@@ -0,0 +1,5 @@
+{
+    "title": "國際化文字",
+    "content": "我是國際化過的文字哦"
+  }
+  
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..64c17d99784ac95482ccb76eed6f8d596096bae9
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,26 @@
+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
diff --git a/src/main.js b/src/main.js
index 90e6400b4d8ad8aba0c1caa53874eb4b81380648..b4a11a0ed1571e4fa20598c101bee2f3c2329013 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
-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')