diff --git a/src/pages/demo/plugins/vue-i18n/components/DemoI18n.vue b/src/pages/demo/plugins/vue-i18n/components/DemoI18n.vue
new file mode 100644
index 00000000..123c91f1
--- /dev/null
+++ b/src/pages/demo/plugins/vue-i18n/components/DemoI18n.vue
@@ -0,0 +1,3 @@
+<template>
+  <el-button>{{$t('message.hello')}}</el-button>
+</template>
diff --git a/src/pages/demo/plugins/vue-i18n/components/DemoI18nControl.vue b/src/pages/demo/plugins/vue-i18n/components/DemoI18nControl.vue
new file mode 100644
index 00000000..8a377464
--- /dev/null
+++ b/src/pages/demo/plugins/vue-i18n/components/DemoI18nControl.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="dd-mb">
+    <el-radio-group v-model="lang" @change="handleChange">
+      <el-radio-button label="CN">中文</el-radio-button>
+      <el-radio-button label="EN">English</el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      lang: 'CN'
+    }
+  },
+  methods: {
+    handleChange (val) {
+      this.$i18n.locale = val
+    }
+  }
+}
+</script>
+
diff --git a/src/pages/demo/plugins/vue-i18n/demo-1.vue b/src/pages/demo/plugins/vue-i18n/demo-1.vue
index b2e6bde6..261c3be5 100644
--- a/src/pages/demo/plugins/vue-i18n/demo-1.vue
+++ b/src/pages/demo/plugins/vue-i18n/demo-1.vue
@@ -2,31 +2,21 @@
   <Container>
     <PageHeader
       slot="header"
-      title="示例1"
+      title="示例 1"
       url="http://kazupon.github.io/vue-i18n/en/">
     </PageHeader>
-    <div class="dd-mb">
-      <el-radio-group v-model="lang" @change="handleChange">
-        <el-radio-button label="CN">中文</el-radio-button>
-        <el-radio-button label="EN">English</el-radio-button>
-      </el-radio-group>
-    </div>
-    <el-button>{{$t('message.hello')}}</el-button>
+    <DemoI18nControl></DemoI18nControl>
+    <DemoI18n></DemoI18n>
   </Container>
 </template>
 
 <script>
+import DemoI18nControl from './components/DemoI18nControl'
+import DemoI18n from './components/DemoI18n'
 export default {
-  data () {
-    return {
-      lang: 'CN'
-    }
-  },
-  methods: {
-    handleChange (val) {
-      this.$i18n.locale = val
-    }
+  components: {
+    DemoI18nControl,
+    DemoI18n
   }
 }
 </script>
-
diff --git a/src/pages/demo/plugins/vue-i18n/demo-2.vue b/src/pages/demo/plugins/vue-i18n/demo-2.vue
index 6d37f912..10c1db81 100644
--- a/src/pages/demo/plugins/vue-i18n/demo-2.vue
+++ b/src/pages/demo/plugins/vue-i18n/demo-2.vue
@@ -2,31 +2,21 @@
   <Container>
     <PageHeader
       slot="header"
-      title="示例2"
+      title="示例 2"
       url="http://kazupon.github.io/vue-i18n/en/">
     </PageHeader>
-    <div class="dd-mb">
-      <el-radio-group v-model="lang" @change="handleChange">
-        <el-radio-button label="CN">中文</el-radio-button>
-        <el-radio-button label="EN">English</el-radio-button>
-      </el-radio-group>
-    </div>
-    <p>{{$t('message.hello')}}</p>
+    <DemoI18nControl></DemoI18nControl>
+    <DemoI18n></DemoI18n>
   </Container>
 </template>
 
 <script>
+import DemoI18nControl from './components/DemoI18nControl'
+import DemoI18n from './components/DemoI18n'
 export default {
-  data () {
-    return {
-      lang: 'CN'
-    }
-  },
-  methods: {
-    handleChange (val) {
-      this.$i18n.locale = val
-    }
+  components: {
+    DemoI18nControl,
+    DemoI18n
   }
 }
 </script>
-