i18n

.env

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

babel.config.js

@@ -1,5 +1,22 @@
+/*
+ * @Descripttion: babel配置
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-09 13:45:46
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-09 14:36:24
+ */
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk'
+      }
+    ]
   ]
 }

package.json

@@ -5,15 +5,19 @@
   "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": "^3.6.5",
+    "element-ui": "^2.15.1",
     "vue": "^2.6.11",
+    "vue-i18n": "^8.22.3",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@kazupon/vue-i18n-loader": "^0.5.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
@@ -21,6 +25,8 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "deepmerge": "^1.5.2",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
@@ -29,6 +35,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.2",
+    "vue-cli-plugin-i18n": "~2.1.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/App.vue

@@ -1,32 +1,34 @@
+<!--
+ * @Descripttion: 应用入口
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-09 13:45:46
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-09 14:37:08
+-->
 <template>
   <div id="app">
-    <div id="nav">
+    <iph-header />
+    <!-- <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
     </div>
-    <router-view/>
+    <router-view/> -->
   </div>
 </template>
 
+<script>
+import IphHeader from './components/IphHeader.vue'
+export default {
+  components: { IphHeader }
+}
+</script>
+
 <style lang="scss">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+  color: #212121;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/IphHeader.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Descripttion: 头部导航栏
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-09 14:17:59
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-09 15:09:28
+-->
+<template>
+  <div class="header">
+    <div class="line">
+      <div class="line-title">{{$t('index.headerTitle')}}</div>
+      <div class="call-me">{{$t('index.contactUs')}}</div>
+    </div>
+    <div class="nav">
+      <img class="logo-img" src="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/1_引导页/u12.png?token=6e67bcec4e14480ba6cd201339355ff83cf967e9bc14671c9e21e82b8315fa41" />
+      <ul class="nav-menu-list">
+        <li :class="currentNav === index ? 'active' : ''" v-for="(item, index) in navList" :key="index" @click="changeNavTab(index)">{{$t(item)}}</li>
+      </ul>
+      <div class="local">
+        <span :class="local === 'zh_c' ? 'active' : ''" @click="chengeLanguage('zh_c')">CH</span>
+        <span>|</span>
+        <span :class="local === 'en' ? 'active' : ''" @click="chengeLanguage('en')">EN</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IphHeader',
+  data () {
+    return {
+      local: 'zh_c',
+      currentNav: 0,
+      navList: [
+        'index.nav[0]',
+        'index.nav[1]',
+        'index.nav[2]',
+        'index.nav[3]',
+        'index.nav[4]',
+        'index.nav[5]'
+      ]
+    }
+  },
+  methods: {
+    changeNavTab (index) {
+      this.currentNav = index
+    },
+    chengeLanguage (val) {
+      this.local = val
+      this.$i18n.locale = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  .line {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    .line-title {
+      flex: 1;
+      text-align: center;
+    }
+    .call-me {
+      color: '#169BD5';
+      cursor: pointer;
+    }
+  }
+  .nav {
+    display: flex;
+    align-items: center;
+    padding: 0 32px;
+    .logo-img {
+      width: 90px;
+      height: 70px;
+    }
+    .nav-menu-list {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      list-style: none;
+      li {
+        padding: 24px;
+        color: #55C0EE;
+        cursor: pointer;
+      }
+      .active {
+        font-weight: 600;
+        color: #169BD5;
+      }
+    }
+    .local {
+      display: flex;
+      align-items: center;
+      span {
+        padding: 6px;
+        cursor: pointer;
+      }
+      .active {
+        color: #169BD5;
+      }
+    }
+  }
+}
+</style>

src/i18n.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  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/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "message": "hello i18n !!",
+  "index": {
+    "headerTitle": "Welcome to the Montreux (China) Jazz Festival",
+    "contactUs": "Contact us",
+    "nav": ["Home", "Band", "Performance", "Dynamic News", "Around The Window", "About"]
+  }
+}

src/locales/zh_c.json

@@ -0,0 +1,8 @@
+{
+  "message": "欢迎使用i18n ！！",
+  "index": {
+    "headerTitle": "欢迎来到蒙特勒（中国）爵士音乐节",
+    "contactUs": "联系我们",
+    "nav": ["首页", "乐队", "演出", "动态新闻", "周边橱窗", "关于我们"]
+  }
+}

src/main.js

@@ -1,12 +1,26 @@
+/*
+ * @Descripttion: 入口文件
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-09 13:45:46
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-09 14:34:56
+ */
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import i18n from './i18n'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
 Vue.config.productionTip = false
 
+Vue.use(ElementUI)
+
 new Vue({
   router,
   store,
+  i18n,
   render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -1,23 +1,31 @@
+/*
+ * @Descripttion: vue-router
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-09 13:45:46
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-09 15:06:37
+ */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+// import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+  // {
+  //   path: '/',
+  //   name: 'Home',
+  //   component: Home
+  // },
+  // {
+  //   path: '/about',
+  //   name: 'About',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // }
 ]
 
 const router = new VueRouter({

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

vue.config.js

@@ -0,0 +1,28 @@
+/*
+ * @Descripttion: webpack 配置
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-09 13:50:31
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-09 13:51:21
+ */
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('i18n')
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use('i18n')
+      .loader('@kazupon/vue-i18n-loader')
+      .end()
+  },
+
+  pluginOptions: {
+    i18n: {
+      locale: 'zh_c',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: false
+    }
+  }
+}