diff --git a/babel.config.js b/babel.config.js
index ba17966..649b152 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,14 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/app',
+  ],
+  plugins: [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
   ]
 }
diff --git a/package.json b/package.json
index 8dd34d9..e058601 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@vue/cli-service": "^3.7.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^5.16.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-html": "^5.0.5",
diff --git a/src/components/filter/NbFilterDate.vue b/src/components/filter/NbFilterDate.vue
index f5660ee..f99e9da 100644
--- a/src/components/filter/NbFilterDate.vue
+++ b/src/components/filter/NbFilterDate.vue
@@ -1,17 +1,22 @@
 <template>
   <span class="nb-filter-datetime" v-show="filter.visible">
-    <el-date-picker
+    <DatePicker
 	    v-model="date"
 	    type="date"
 	    placeholder="选择日期">
-		</el-date-picker>
+		</DatePicker>
   </span>
 </template>
 
 <script>
+  import { DatePicker } from "element-ui";
 	import Filter from "../../model/base/Filter";
   import {simpleDate, simpleDateTime, str2Date} from "../../common/filter/time";
-	export default {
+
+  export default {
+    components: {
+      DatePicker
+    },
 		data(){
 			return {
 				//饿了么时间控件有重大bug，此处不能设置为null，只能是空字符串，否则出错。
diff --git a/src/components/filter/NbFilterDateTime.vue b/src/components/filter/NbFilterDateTime.vue
index 0eb5572..13e6782 100644
--- a/src/components/filter/NbFilterDateTime.vue
+++ b/src/components/filter/NbFilterDateTime.vue
@@ -1,17 +1,21 @@
 <template>
   <span class="nb-filter-datetime" v-show="filter.visible">
-    <el-date-picker
+    <DatePicker
 	    v-model="date"
 	    type="datetime"
 	    placeholder="选择日期时间">
-		</el-date-picker>
+		</DatePicker>
   </span>
 </template>
 
 <script>
+  import { DatePicker } from "element-ui";
 	import Filter from "../../model/base/Filter";
 	import {simpleDateTime, str2Date} from "../../common/filter/time";
 	export default {
+	  components: {
+      DatePicker
+    },
 		data(){
 			return {
 				//饿了么时间控件有重大bug，此处不能设置为null，只能是空字符串，否则出错。
diff --git a/src/main.js b/src/main.js
index 7c5e3d8..4358f27 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,13 +20,19 @@ import VueResource from 'vue-resource'
 import NProgress from 'vue-nprogress'
 import filters from './common/filter'
 import i18nMessage from "./common/i18n"
-
-//将整个eleme 都引进来了。
-import ElementUI from 'element-ui'
 import BrowserUtil from "./common/util/BrowserUtil";
 
+import { Tabs, TabPane, DatePicker, Dialog, Message, MessageBox } from 'element-ui';
 
-Vue.use(ElementUI)
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Dialog);
+Vue.use(DatePicker);
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$message = Message;
 
 //expose to global.
 Vue.store = store;
diff --git a/src/views/install/Index.vue b/src/views/install/Index.vue
index 8520012..8eee90f 100644
--- a/src/views/install/Index.vue
+++ b/src/views/install/Index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="backyard-install">
 
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane :label=" $t('install.configMysql')" name="first">
+    <Tabs v-model="activeName" @tab-click="handleClick">
+      <TabPane :label=" $t('install.configMysql')" name="first">
         <div class="install-block">
 
           <div class="row" v-validator="install.validatorSchema.mysqlHost.error">
@@ -71,8 +71,8 @@
             </div>
           </div>
         </div>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('install.createTable')" name="second" :disabled="!install.verified">
+      </TabPane>
+      <TabPane :label="$t('install.createTable')" name="second" :disabled="!install.verified">
         <div class="install-block">
 
           <div class="mb15 border-bottom" v-for="(tableInfo,index) in install.tableInfoList">
@@ -144,8 +144,8 @@
           </div>
 
         </div>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('install.setAdministrator')" name="third" :disabled="!install.tableCreated()">
+      </TabPane>
+      <TabPane :label="$t('install.setAdministrator')" name="third" :disabled="!install.tableCreated()">
         <div class="install-block">
 
           <div class="text-center" v-show="phase===-1">
@@ -292,8 +292,8 @@
           </NbExpanding>
 
         </div>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('finish') " name="forth" :disabled="!install.adminConfigured">
+      </TabPane>
+      <TabPane :label="$t('finish') " name="forth" :disabled="!install.adminConfigured">
         <div class="install-block">
 
           <div class="text-center">
@@ -311,15 +311,15 @@
           </div>
 
         </div>
-      </el-tab-pane>
+      </TabPane>
 
-    </el-tabs>
+    </Tabs>
 
 
   </div>
-</template>
-
+</template
 <script>
+  import { Tabs, TabPane } from "element-ui";
   import Install from "../../model/install/Install";
   import NbExpanding from "../../components/NbExpanding";
 
@@ -344,7 +344,9 @@
       }
     },
     components: {
-      NbExpanding
+      NbExpanding,
+      Tabs,
+      TabPane
     },
     methods: {
       mysqlPasswordChange(e) {
diff --git a/src/views/matter/List.vue b/src/views/matter/List.vue
index dfd85d6..31a9e89 100644
--- a/src/views/matter/List.vue
+++ b/src/views/matter/List.vue
@@ -38,7 +38,7 @@
           {{ $t("matter.share") }}
         </button>
 
-        <el-dialog
+        <Dialog
           :title="$t('matter.share')"
           :visible.sync="shareDialogVisible"
           :append-to-body="true">
@@ -46,7 +46,7 @@
           <SharePanel :matters="selectedMatters"
                       @close="shareDialogVisible = false"/>
 
-        </el-dialog>
+        </Dialog>
 
 
         <span class="btn btn-primary btn-sm btn-file mr5 mb5">
@@ -123,7 +123,7 @@
   import Matter from '../../model/matter/Matter'
   import Pager from '../../model/base/Pager'
   import Director from './widget/Director'
-  import {Message, MessageBox} from 'element-ui'
+  import {Dialog, Message, MessageBox} from 'element-ui'
   import {UserRole} from "../../model/user/UserRole";
   import {SortDirection} from "../../model/base/SortDirection";
   import {humanFileSize} from "../../common/filter/str";
@@ -165,7 +165,8 @@
       NbFilter,
       NbPager,
       NbSlidePanel,
-      NbExpanding
+      NbExpanding,
+      Dialog
     },
     methods: {
       reset() {
diff --git a/src/views/share/Detail.vue b/src/views/share/Detail.vue
index 018295c..d1a24b5 100644
--- a/src/views/share/Detail.vue
+++ b/src/views/share/Detail.vue
@@ -30,7 +30,7 @@
                 <i class="fa fa-link"></i>
                 {{$t('share.getLink')}}
               </button>
-              <el-dialog
+              <Dialog
                 :title="$t('share.shareDetail')"
                 :visible.sync="shareDialogVisible"
                 :append-to-body="true">
@@ -39,7 +39,7 @@
                 <button class="btn btn-primary btn-sm mr5" @click="share.copyLinkAndCode()">{{$t('share.copyLinkAndCode')}}</button>
                 <button class="btn btn-default btn-sm mr5" @click="shareDialogVisible = false">{{$t('close')}}</button>
               </span>
-              </el-dialog>
+              </Dialog>
 
             </div>
           </div>
@@ -101,7 +101,7 @@
 </template>
 
 <script>
-
+  import { Dialog } from "element-ui";
   import Share from "../../model/share/Share";
   import ShareMatterBar from "./widget/ShareMatterBar"
   import Matter from "../../model/matter/Matter";
@@ -287,7 +287,8 @@
       LoadingFrame,
       ShareDialogPanel,
       ShareMatterBar,
-      NbPager
+      NbPager,
+      Dialog
     },
     mounted() {
       let that = this;
diff --git a/src/views/share/widget/ShareBar.vue b/src/views/share/widget/ShareBar.vue
index 46ed039..b316d77 100644
--- a/src/views/share/widget/ShareBar.vue
+++ b/src/views/share/widget/ShareBar.vue
@@ -96,7 +96,7 @@
       </div>
     </NbExpanding>
 
-    <el-dialog
+    <Dialog
       :title="$t('share.shareDetail')"
       :visible.sync="shareDialogVisible"
       :append-to-body="true">
@@ -105,12 +105,13 @@
                 <button class="btn btn-primary btn-sm mr5" @click="share.copyLinkAndCode()">{{$t('share.copyLinkAndCode')}}</button>
                 <button class="btn btn-default btn-sm mr5" @click="shareDialogVisible = false">{{$t('close')}}</button>
               </span>
-    </el-dialog>
+    </Dialog>
 
   </div>
 
 </template>
 <script>
+  import { Dialog } from 'element-ui'
   import Share from '../../../model/share/Share'
   import NbCheckbox from '../../../components/NbCheckbox'
   import NbExpanding from '../../../components/NbExpanding'
@@ -128,7 +129,8 @@
     components: {
       NbExpanding,
       NbCheckbox,
-      ShareDialogPanel
+      ShareDialogPanel,
+      Dialog
     },
     props: {
       share: {