Adjusted tslint config & added vue-i18n

Author: Colin Yang

.env

@@ -0,0 +1,2 @@
+VUE_APP_I18N_LOCALE=en
+VUE_APP_I18N_FALLBACK_LOCALE=en

package-lock.json

@@ -5,19 +5,23 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
     "core-js": "^2.6.5",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
+    "vue-i18n": "^8.0.0",
     "vue-property-decorator": "^8.1.0"
   },
   "devDependencies": {
+    "@types/webpack": "^4.4.0",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-typescript": "^3.8.0",
     "@vue/cli-service": "^3.8.0",
     "typescript": "^3.4.3",
+    "vue-cli-plugin-i18n": "^0.6.0",
     "vue-template-compiler": "^2.6.10"
   },
   "postcss": {

package.json

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueI18n, { LocaleMessages } from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages (): LocaleMessages {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages: LocaleMessages = {}
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+export default new VueI18n({
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  messages: loadLocaleMessages()
+})

src/i18n.ts

@@ -0,0 +1,3 @@
+{
+  "message": "hello i18n !!"
+}

src/locales/en.json

@@ -1,8 +1,10 @@
-import Vue from 'vue';
-import App from './App.vue';
+import Vue from 'vue'
+import App from './App.vue'
+import i18n from './i18n'
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
 
 new Vue({
+  i18n,
   render: (h) => h(App),
-}).$mount('#app');
+}).$mount('#app')

src/main.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from 'vue';
+import Vue, { VNode } from 'vue'
 
 declare global {
   namespace JSX {
@@ -7,7 +7,7 @@ declare global {
     // tslint:disable no-empty-interface
     interface ElementClass extends Vue {}
     interface IntrinsicElements {
-      [elem: string]: any;
+      [elem: string]: any
     }
   }
 }

src/shims-tsx.d.ts

@@ -1,4 +1,4 @@
 declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+  import Vue from 'vue'
+  export default Vue
 }

src/shims-vue.d.ts

@@ -12,6 +12,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
+      "webpack",
       "webpack-env"
     ],
     "paths": {
@@ -36,4 +37,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}

tsconfig.json

@@ -9,6 +9,10 @@
     ]
   },
   "rules": {
+    "space-before-function-paren": false,
+    "arrow-parens": false,
+    "trailing-comma": false,
+    "semicolon": false,
     "quotemark": [true, "single"],
     "indent": [true, "spaces", 2],
     "interface-name": false,

tslint.json

@@ -0,0 +1,10 @@
+module.exports = {
+  pluginOptions: {
+    i18n: {
+      locale: 'en',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
+  }
+}