初始化

src/App.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <div> {{$t('message.hello')}} </div>
+    <router-view/>
+  </div>
+</template>
+
+<style>
+#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;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="hello">
+    <p>{{label}}</p>
+    <button @click="switchLang">切换</button>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'HelloWorld',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapState(['lang']),
+    label () {
+      return this.$t('message.hello')
+    }
+  },
+  methods: {
+    switchLang () {
+      let lang = ''
+      if (this.lang === 'en') {
+        lang = 'cn'
+      } else {
+        lang = 'en'
+      }
+      this.$store.commit('switchLang', lang)
+    }
+  }
+}
+</script>
+<style scoped>
+h1,
+h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/i18n/i18n.js

@@ -0,0 +1,14 @@
+//i18n.js
+import Vue from 'vue'
+import locale from 'element-ui/lib/locale'
+import VueI18n from 'vue-i18n'
+import messages from './langs'
+
+Vue.use(VueI18n)
+const i18n = new VueI18n({
+  locale: localStorage.lang || 'cn',
+  messages
+})
+locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换
+
+export default i18n

src/i18n/langs/cn.js

@@ -0,0 +1,13 @@
+//cn.js
+
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+const cn = {
+  message: {
+    'hello': '你好，世界',
+    'switch': 'English',
+    'test':'测试'
+  },
+  ...zhLocale
+}
+
+export default cn

src/i18n/langs/en.js

@@ -0,0 +1,13 @@
+//en.js
+
+import enLocale from 'element-ui/lib/locale/lang/en'
+const en = {
+  message: {
+    'hello': 'hello, world',
+    'switch': '简体中文',
+    'test':'test'
+  },
+  ...enLocale
+}
+
+export default en

src/i18n/langs/index.js

@@ -0,0 +1,6 @@
+import en from './en'
+import cn from './cn'
+export default {
+  en,
+  cn
+}

src/main.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import i18n from './i18n/i18n'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+
+Vue.config.productionTip = false
+Vue.use(ElementUI)
+
+new Vue({
+  i18n,
+  router,
+  render: h => h(App)
+}).$mount('#app')

src/router/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+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')
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    {{$t("message.test")}}
+  </div>
+</template>

src/views/Home.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="hello">
+    <p>{{$t('message.hello')}}</p>
+    <button @click="switchLang">{{$t('message.switch')}}</button>
+    <div>
+      <About/>
+    </div>
+  </div>
+</template>
+<script>
+import About from './About'
+export default {
+  name: 'HelloWorld',
+  components: {
+    About
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    label () {
+      return this.$t('message.hello')
+    }
+  },
+  methods: {
+    switchLang () {
+      let lang = ''
+      if (this.$i18n.locale === 'en') {
+        lang = 'cn'
+      } else {
+        lang = 'en'
+      }
+      this.$i18n.locale = lang;
+    }
+  }
+}
+</script>
+<style scoped>
+h1,
+h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>