From b19d2fc374efa4556fff4664d405bab6c5b2495d Mon Sep 17 00:00:00 2001
From: zazzaz <izazzaz@hotmail.com>
Date: Fri, 20 Nov 2020 20:24:16 +0800
Subject: [PATCH] fix: correct bundle export (#630)

* fix: correct bundle export

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update
---
 .github/workflows/master-deploy.yml           |   2 +-
 packages/alert/index.ts                       |   5 +-
 packages/aside/index.ts                       |   9 +
 packages/{layout => aside}/package.json       |   2 +-
 packages/autocomplete/index.ts                |   4 +-
 packages/autocomplete/src/index.vue           |   6 +-
 packages/avatar/index.ts                      |   4 +-
 packages/backtop/index.ts                     |   4 +-
 packages/badge/index.ts                       |   4 +-
 packages/breadcrumb-item/index.ts             |   8 +
 packages/breadcrumb-item/package.json         |  12 +
 packages/breadcrumb/index.ts                  |   6 +-
 packages/button-group/index.ts                |   8 +
 packages/button-group/package.json            |  12 +
 packages/button/index.ts                      |   6 +-
 packages/calendar/index.ts                    |   4 +-
 packages/calendar/src/index.vue               |   3 +-
 packages/card/index.ts                        |   4 +-
 packages/carousel-item/index.ts               |   8 +
 packages/carousel-item/package.json           |  12 +
 packages/carousel/index.ts                    |   6 +-
 packages/cascader-panel/index.ts              |   5 +-
 packages/cascader-panel/src/menu.vue          |   2 +-
 packages/cascader-panel/src/node.vue          |   4 +-
 packages/cascader/index.ts                    |   5 +-
 packages/cascader/src/index.vue               |  10 +-
 packages/checkbox-button/index.ts             |   8 +
 packages/checkbox-button/package.json         |  12 +
 packages/checkbox-group/index.ts              |   8 +
 packages/checkbox-group/package.json          |  12 +
 packages/checkbox/index.ts                    |   6 +-
 .../{layout => col}/__tests__/layout.spec.ts  |   0
 packages/col/index.ts                         |   8 +
 packages/col/package.json                     |  12 +
 packages/{layout => col}/src/col.ts           |   0
 packages/{layout => col}/src/row.ts           |   0
 packages/collapse-item/index.ts               |   8 +
 packages/collapse-item/package.json           |  12 +
 packages/collapse-transition/index.ts         |   8 +
 packages/collapse-transition/package.json     |  12 +
 packages/collapse/index.ts                    |   6 +-
 packages/color-picker/index.ts                |   4 +-
 packages/color-picker/src/index.vue           |   6 +-
 packages/container/index.ts                   |  12 +-
 packages/date-picker/index.ts                 |   4 +-
 .../src/date-picker-com/panel-date-pick.vue   |   6 +-
 .../src/date-picker-com/panel-date-range.vue  |   6 +-
 packages/date-picker/src/date-picker.ts       |   1 +
 packages/dialog/index.ts                      |   4 +-
 packages/divider/index.ts                     |   4 +-
 packages/drawer/index.ts                      |   4 +-
 packages/dropdown-item/index.ts               |   8 +
 packages/dropdown-item/package.json           |  12 +
 packages/dropdown-menu/index.ts               |   8 +
 packages/dropdown-menu/package.json           |  12 +
 packages/dropdown/index.ts                    |   6 +-
 packages/dropdown/src/dropdown.vue            |   8 +-
 packages/element-plus/index.ts                | 443 +++++++++++-------
 packages/element-plus/package.json            |  87 +++-
 packages/footer/index.ts                      |   9 +
 packages/footer/package.json                  |  12 +
 packages/form-item/index.ts                   |   8 +
 packages/form-item/package.json               |  12 +
 packages/form/index.ts                        |  10 +-
 packages/header/index.ts                      |   9 +
 packages/header/package.json                  |  12 +
 packages/icon/index.ts                        |   4 +-
 packages/image/index.ts                       |   4 +-
 packages/infinite-scroll/index.ts             |   6 +-
 packages/input-number/index.ts                |   4 +-
 packages/input-number/src/index.vue           |   2 +-
 packages/input/index.ts                       |   4 +-
 packages/layout/index.ts                      |  10 -
 packages/link/index.ts                        |   4 +-
 packages/loading/index.ts                     |  12 +-
 packages/main/index.ts                        |   9 +
 packages/main/package.json                    |  12 +
 packages/menu-item-group/index.ts             |   9 +
 packages/menu-item-group/package.json         |  12 +
 packages/menu-item/index.ts                   |   9 +
 packages/menu-item/package.json               |  12 +
 packages/menu/index.ts                        |  12 +-
 packages/menu/src/menuItem.vue                |   2 +-
 packages/menu/src/submenu.vue                 |   2 +-
 packages/message-box/index.ts                 |   4 +-
 packages/message-box/src/index.vue            |   4 +-
 packages/message/index.ts                     |   4 +-
 packages/notification/index.ts                |   5 +-
 packages/option-group/index.ts                |   8 +
 packages/option-group/package.json            |  12 +
 packages/option/index.ts                      |   8 +
 packages/option/package.json                  |  12 +
 packages/page-header/index.ts                 |   4 +-
 packages/pagination/index.ts                  |   4 +-
 packages/pagination/src/jumper.vue            |   2 +-
 packages/pagination/src/sizes.vue             |   3 +-
 packages/popconfirm/index.ts                  |   4 +-
 packages/popconfirm/src/index.vue             |   4 +-
 packages/popover/index.ts                     |   6 +-
 packages/popover/src/index.vue                |   2 +-
 packages/popper/index.ts                      |   5 +-
 packages/progress/index.ts                    |   4 +-
 packages/radio-button/index.ts                |   8 +
 packages/radio-button/package.json            |  12 +
 packages/radio-group/index.ts                 |   8 +
 packages/radio-group/package.json             |  12 +
 packages/radio/index.ts                       |   8 +-
 packages/rate/index.ts                        |   4 +-
 packages/row/index.ts                         |   8 +
 packages/row/package.json                     |  12 +
 packages/scrollbar/index.ts                   |   4 +-
 packages/select/index.ts                      |  12 +-
 packages/select/src/select.vue                |   8 +-
 packages/slider/index.ts                      |   4 +-
 packages/slider/src/button.vue                |   2 +-
 packages/slider/src/index.vue                 |   2 +-
 packages/step/index.ts                        |   8 +
 packages/step/package.json                    |  12 +
 packages/steps/index.ts                       |   6 +-
 packages/submenu/index.ts                     |   8 +
 packages/submenu/package.json                 |  12 +
 packages/switch/index.ts                      |   4 +-
 packages/tab-pane/index.ts                    |   8 +
 packages/tab-pane/package.json                |  12 +
 packages/table-column/index.ts                |   8 +
 packages/table-column/package.json            |  12 +
 packages/table/index.ts                       |   6 +-
 packages/table/src/config.ts                  |   2 +-
 packages/table/src/filter-panel.vue           |   7 +-
 packages/table/src/table-body/index.ts        |   2 +-
 packages/table/src/table-column/index.ts      |   2 +-
 packages/table/src/table-header/index.ts      |   2 +-
 packages/tabs/index.ts                        |  10 +-
 packages/tag/index.ts                         |   4 +-
 packages/time-picker/index.ts                 |   5 +-
 packages/time-picker/src/common/picker.vue    |   4 +-
 .../time-picker-com/basic-time-spinner.vue    |   2 +-
 packages/time-picker/src/time-picker.ts       |   1 +
 packages/time-select/index.ts                 |   4 +-
 packages/time-select/src/time-select.vue      |   2 +-
 packages/timeline-item/index.ts               |   8 +
 packages/timeline-item/package.json           |  12 +
 packages/timeline/index.ts                    |   6 +-
 packages/tooltip/index.ts                     |   4 +-
 packages/tooltip/src/index.ts                 |   2 +-
 packages/transfer/index.ts                    |   4 +-
 packages/transfer/src/index.vue               |   2 +-
 packages/transfer/src/transfer-panel.vue      |   5 +-
 packages/tree/index.ts                        |   4 +-
 packages/tree/src/tree-node.vue               |   2 +-
 packages/upload/index.ts                      |   4 +-
 packages/upload/src/upload-list.vue           |   4 +-
 scripts/gc.sh                                 |   5 +-
 153 files changed, 1068 insertions(+), 439 deletions(-)
 create mode 100644 packages/aside/index.ts
 rename packages/{layout => aside}/package.json (84%)
 create mode 100644 packages/breadcrumb-item/index.ts
 create mode 100644 packages/breadcrumb-item/package.json
 create mode 100644 packages/button-group/index.ts
 create mode 100644 packages/button-group/package.json
 create mode 100644 packages/carousel-item/index.ts
 create mode 100644 packages/carousel-item/package.json
 create mode 100644 packages/checkbox-button/index.ts
 create mode 100644 packages/checkbox-button/package.json
 create mode 100644 packages/checkbox-group/index.ts
 create mode 100644 packages/checkbox-group/package.json
 rename packages/{layout => col}/__tests__/layout.spec.ts (100%)
 create mode 100644 packages/col/index.ts
 create mode 100644 packages/col/package.json
 rename packages/{layout => col}/src/col.ts (100%)
 rename packages/{layout => col}/src/row.ts (100%)
 create mode 100644 packages/collapse-item/index.ts
 create mode 100644 packages/collapse-item/package.json
 create mode 100644 packages/collapse-transition/index.ts
 create mode 100644 packages/collapse-transition/package.json
 create mode 100644 packages/dropdown-item/index.ts
 create mode 100644 packages/dropdown-item/package.json
 create mode 100644 packages/dropdown-menu/index.ts
 create mode 100644 packages/dropdown-menu/package.json
 create mode 100644 packages/footer/index.ts
 create mode 100644 packages/footer/package.json
 create mode 100644 packages/form-item/index.ts
 create mode 100644 packages/form-item/package.json
 create mode 100644 packages/header/index.ts
 create mode 100644 packages/header/package.json
 delete mode 100644 packages/layout/index.ts
 create mode 100644 packages/main/index.ts
 create mode 100644 packages/main/package.json
 create mode 100644 packages/menu-item-group/index.ts
 create mode 100644 packages/menu-item-group/package.json
 create mode 100644 packages/menu-item/index.ts
 create mode 100644 packages/menu-item/package.json
 create mode 100644 packages/option-group/index.ts
 create mode 100644 packages/option-group/package.json
 create mode 100644 packages/option/index.ts
 create mode 100644 packages/option/package.json
 create mode 100644 packages/radio-button/index.ts
 create mode 100644 packages/radio-button/package.json
 create mode 100644 packages/radio-group/index.ts
 create mode 100644 packages/radio-group/package.json
 create mode 100644 packages/row/index.ts
 create mode 100644 packages/row/package.json
 create mode 100644 packages/step/index.ts
 create mode 100644 packages/step/package.json
 create mode 100644 packages/submenu/index.ts
 create mode 100644 packages/submenu/package.json
 create mode 100644 packages/tab-pane/index.ts
 create mode 100644 packages/tab-pane/package.json
 create mode 100644 packages/table-column/index.ts
 create mode 100644 packages/table-column/package.json
 create mode 100644 packages/timeline-item/index.ts
 create mode 100644 packages/timeline-item/package.json

diff --git a/.github/workflows/master-deploy.yml b/.github/workflows/master-deploy.yml
index 47280ac97a..b933a6e9a6 100644
--- a/.github/workflows/master-deploy.yml
+++ b/.github/workflows/master-deploy.yml
@@ -5,7 +5,7 @@ on:
       - master
 
 jobs:
-  check-bats-version:
+  master-deploy:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
diff --git a/packages/alert/index.ts b/packages/alert/index.ts
index a9b6406f62..9ddca450eb 100644
--- a/packages/alert/index.ts
+++ b/packages/alert/index.ts
@@ -1,8 +1,9 @@
 import { App } from 'vue'
 import Alert from './src/index.vue'
 
-export default (app: App): void => {
+Alert.install = (app: App): void => {
   app.component(Alert.name, Alert)
 }
 
-export { Alert }
+export default Alert
+
diff --git a/packages/aside/index.ts b/packages/aside/index.ts
new file mode 100644
index 0000000000..157aaa67f2
--- /dev/null
+++ b/packages/aside/index.ts
@@ -0,0 +1,9 @@
+import { App } from 'vue'
+import Aside from '../container/src/aside.vue'
+
+Aside.install = (app: App): void => {
+  app.component(Aside.name, Aside)
+}
+
+export default Aside
+
diff --git a/packages/layout/package.json b/packages/aside/package.json
similarity index 84%
rename from packages/layout/package.json
rename to packages/aside/package.json
index b10b0a7c70..28a58b2cb7 100644
--- a/packages/layout/package.json
+++ b/packages/aside/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@element-plus/layout",
+  "name": "@element-plus/aside",
   "version": "0.0.0",
   "main": "dist/index.js",
   "license": "MIT",
diff --git a/packages/autocomplete/index.ts b/packages/autocomplete/index.ts
index 8102757577..54ea47e633 100644
--- a/packages/autocomplete/index.ts
+++ b/packages/autocomplete/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Autocomplete from './src/index.vue'
 
-export default (app: App): void => {
+Autocomplete.install = (app: App): void => {
   app.component(Autocomplete.name, Autocomplete)
 }
 
-export { Autocomplete }
+export default Autocomplete
diff --git a/packages/autocomplete/src/index.vue b/packages/autocomplete/src/index.vue
index 15ee2335fa..584486455a 100644
--- a/packages/autocomplete/src/index.vue
+++ b/packages/autocomplete/src/index.vue
@@ -96,9 +96,9 @@ import { ClickOutside } from '@element-plus/directives'
 import { generateId, isArray } from '@element-plus/utils/util'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import throwError from '@element-plus/utils/error'
-import { Input as ElInput } from '@element-plus/input'
-import { Scrollbar as ElScrollbar } from '@element-plus/scrollbar'
-import { Popper as ElPopper } from '@element-plus/popper'
+import ElInput from '@element-plus/input'
+import ElScrollbar from '@element-plus/scrollbar'
+import ElPopper from '@element-plus/popper'
 
 export default defineComponent({
   name: 'ElAutocomplete',
diff --git a/packages/avatar/index.ts b/packages/avatar/index.ts
index 545fc3403d..d2f2bdd277 100644
--- a/packages/avatar/index.ts
+++ b/packages/avatar/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Avatar from './src/index.vue'
 
-export default (app: App): void => {
+Avatar.install = (app: App): void => {
   app.component(Avatar.name, Avatar)
 }
 
-export { Avatar }
+export default Avatar
diff --git a/packages/backtop/index.ts b/packages/backtop/index.ts
index 22a2d1241d..0ebf3bec9f 100644
--- a/packages/backtop/index.ts
+++ b/packages/backtop/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Backtop from './src/index.vue'
 
-export default (app: App): void => {
+Backtop.install = (app: App): void => {
   app.component(Backtop.name, Backtop)
 }
 
-export { Backtop }
+export default Backtop
diff --git a/packages/badge/index.ts b/packages/badge/index.ts
index 0b47e28b57..76a0c636e3 100644
--- a/packages/badge/index.ts
+++ b/packages/badge/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Badge from './src/index.vue'
 
-export default (app: App): void => {
+Badge.install = (app: App): void => {
   app.component(Badge.name, Badge)
 }
 
-export { Badge }
+export default Badge
diff --git a/packages/breadcrumb-item/index.ts b/packages/breadcrumb-item/index.ts
new file mode 100644
index 0000000000..d436e11190
--- /dev/null
+++ b/packages/breadcrumb-item/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import BreadcrumbItem from '../breadcrumb/src/item.vue'
+
+BreadcrumbItem.install = (app: App): void => {
+  app.component(BreadcrumbItem.name, BreadcrumbItem)
+}
+
+export default BreadcrumbItem
diff --git a/packages/breadcrumb-item/package.json b/packages/breadcrumb-item/package.json
new file mode 100644
index 0000000000..ed30b0104a
--- /dev/null
+++ b/packages/breadcrumb-item/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/breadcrumb-item",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/breadcrumb/index.ts b/packages/breadcrumb/index.ts
index 28f3f7d56a..b8e7b14068 100644
--- a/packages/breadcrumb/index.ts
+++ b/packages/breadcrumb/index.ts
@@ -1,10 +1,8 @@
 import { App } from 'vue'
 import Breadcrumb from './src/index.vue'
-import BreadcrumbItem from './src/item.vue'
 
-export default (app: App): void => {
+Breadcrumb.install = (app: App): void => {
   app.component(Breadcrumb.name, Breadcrumb)
-  app.component(BreadcrumbItem.name, BreadcrumbItem)
 }
 
-export { Breadcrumb, BreadcrumbItem }
+export default Breadcrumb
diff --git a/packages/button-group/index.ts b/packages/button-group/index.ts
new file mode 100644
index 0000000000..358388e223
--- /dev/null
+++ b/packages/button-group/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import ButtonGroup from '../button/src/button-group.vue'
+
+ButtonGroup.install = (app: App): void => {
+  app.component(ButtonGroup.name, ButtonGroup)
+}
+
+export default ButtonGroup
diff --git a/packages/button-group/package.json b/packages/button-group/package.json
new file mode 100644
index 0000000000..508016033a
--- /dev/null
+++ b/packages/button-group/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/button-group",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/button/index.ts b/packages/button/index.ts
index f8faf3f38b..bca7185894 100644
--- a/packages/button/index.ts
+++ b/packages/button/index.ts
@@ -1,10 +1,8 @@
 import { App } from 'vue'
 import Button from './src/button.vue'
-import ButtonGroup from './src/button-group.vue'
 
-export default (app: App): void => {
+Button.install = (app: App): void => {
   app.component(Button.name, Button)
-  app.component(ButtonGroup.name, ButtonGroup)
 }
 
-export { Button, ButtonGroup }
+export default Button
diff --git a/packages/calendar/index.ts b/packages/calendar/index.ts
index 750c2b7eaf..66770ed4b3 100644
--- a/packages/calendar/index.ts
+++ b/packages/calendar/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Calendar from './src/index.vue'
 
-export default (app: App): void => {
+Calendar.install = (app: App): void => {
   app.component(Calendar.name, Calendar)
 }
 
-export { Calendar }
+export default Calendar
diff --git a/packages/calendar/src/index.vue b/packages/calendar/src/index.vue
index dfce04baed..a92e38a0b9 100644
--- a/packages/calendar/src/index.vue
+++ b/packages/calendar/src/index.vue
@@ -55,7 +55,8 @@
 
 <script lang="ts">
 import { t } from '@element-plus/locale'
-import { Button as ElButton,  ButtonGroup as ElButtonGroup } from '@element-plus/button'
+import ElButton from '@element-plus/button'
+import ElButtonGroup from '@element-plus/button-group'
 import DateTable from './date-table.vue'
 import {
   ref,
diff --git a/packages/card/index.ts b/packages/card/index.ts
index f6740f7dbd..c3078ee272 100644
--- a/packages/card/index.ts
+++ b/packages/card/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Card from './src/index.vue'
 
-export default (app: App): void => {
+Card.install = (app: App): void => {
   app.component(Card.name, Card)
 }
 
-export { Card }
+export default Card
diff --git a/packages/carousel-item/index.ts b/packages/carousel-item/index.ts
new file mode 100644
index 0000000000..ef0b07d145
--- /dev/null
+++ b/packages/carousel-item/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import CarouselItem from '../carousel/src/item.vue'
+
+CarouselItem.install = (app: App): void => {
+  app.component(CarouselItem.name, CarouselItem)
+}
+
+export default CarouselItem
diff --git a/packages/carousel-item/package.json b/packages/carousel-item/package.json
new file mode 100644
index 0000000000..7efd349d0e
--- /dev/null
+++ b/packages/carousel-item/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/carousel-item",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/carousel/index.ts b/packages/carousel/index.ts
index 1f93ad30db..724066c589 100644
--- a/packages/carousel/index.ts
+++ b/packages/carousel/index.ts
@@ -1,10 +1,8 @@
 import { App } from 'vue'
 import Carousel from './src/main.vue'
-import CarouselItem from './src/item.vue'
 
-export default (app: App): void => {
+Carousel.install = (app: App): void => {
   app.component(Carousel.name, Carousel)
-  app.component(CarouselItem.name, CarouselItem)
 }
 
-export { Carousel, CarouselItem }
+export default Carousel
diff --git a/packages/cascader-panel/index.ts b/packages/cascader-panel/index.ts
index 8cceda8e14..af7a8f0232 100644
--- a/packages/cascader-panel/index.ts
+++ b/packages/cascader-panel/index.ts
@@ -1,10 +1,11 @@
 import { App } from 'vue'
 import CascaderPanel from './src/index.vue'
 
-export default (app: App): void => {
+
+CascaderPanel.install = (app: App): void => {
   app.component(CascaderPanel.name, CascaderPanel)
 }
 
-export { CascaderPanel }
+export default CascaderPanel
 export * from './src/types'
 export * from './src/config'
diff --git a/packages/cascader-panel/src/menu.vue b/packages/cascader-panel/src/menu.vue
index 1a0cceb4f8..fb654ded6c 100644
--- a/packages/cascader-panel/src/menu.vue
+++ b/packages/cascader-panel/src/menu.vue
@@ -38,7 +38,7 @@ import {
   computed, defineComponent, getCurrentInstance,
   inject, ref,
 } from 'vue'
-import { Scrollbar as ElScrollbar } from '@element-plus/scrollbar'
+import ElScrollbar from '@element-plus/scrollbar'
 import ElCascaderNode from './node.vue'
 import { t } from '@element-plus/locale'
 import { generateId } from '@element-plus/utils/util'
diff --git a/packages/cascader-panel/src/node.vue b/packages/cascader-panel/src/node.vue
index 7cb4f53510..b7843e5f35 100644
--- a/packages/cascader-panel/src/node.vue
+++ b/packages/cascader-panel/src/node.vue
@@ -53,8 +53,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, h } from 'vue'
-import { Checkbox as ElCheckbox } from '@element-plus/checkbox'
-import { Radio as ElRadio } from '@element-plus/radio'
+import ElCheckbox from '@element-plus/checkbox'
+import ElRadio from '@element-plus/radio'
 import {
   CascaderNode,
   CASCADER_PANEL_INJECTION_KEY,
diff --git a/packages/cascader/index.ts b/packages/cascader/index.ts
index 0c3fdf9336..ecf630c522 100644
--- a/packages/cascader/index.ts
+++ b/packages/cascader/index.ts
@@ -1,5 +1,8 @@
 import { App } from 'vue'
 import Cascader from './src/index.vue'
-export default (app: App): void => {
+
+Cascader.install = (app: App): void => {
   app.component(Cascader.name, Cascader)
 }
+
+export default Cascader
diff --git a/packages/cascader/src/index.vue b/packages/cascader/src/index.vue
index 4eceefda71..2f64aad28a 100644
--- a/packages/cascader/src/index.vue
+++ b/packages/cascader/src/index.vue
@@ -134,11 +134,11 @@ import {
   onMounted, onBeforeUnmount,
   Ref, ref, watch,
 } from 'vue'
-import { CascaderPanel as ElCascaderPanel } from '@element-plus/cascader-panel'
-import { Input as ElInput } from '@element-plus/input'
-import { Popper as ElPopper } from '@element-plus/popper'
-import { Scrollbar as ElScrollbar } from '@element-plus/scrollbar'
-import { Tag as ElTag } from '@element-plus/tag'
+import ElCascaderPanel from '@element-plus/cascader-panel'
+import ElInput from '@element-plus/input'
+import ElPopper from '@element-plus/popper'
+import ElScrollbar from '@element-plus/scrollbar'
+import ElTag from '@element-plus/tag'
 import { ClickOutside as Clickoutside } from '@element-plus/directives'
 import { t } from '@element-plus/locale'
 import { isPromise } from '@vue/shared'
diff --git a/packages/checkbox-button/index.ts b/packages/checkbox-button/index.ts
new file mode 100644
index 0000000000..fd69b3fd30
--- /dev/null
+++ b/packages/checkbox-button/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import CheckboxButton from '../checkbox/src/checkbox-button.vue'
+
+CheckboxButton.install = (app: App): void => {
+  app.component(CheckboxButton.name, CheckboxButton)
+}
+
+export default CheckboxButton
diff --git a/packages/checkbox-button/package.json b/packages/checkbox-button/package.json
new file mode 100644
index 0000000000..439af31d49
--- /dev/null
+++ b/packages/checkbox-button/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/checkbox-button",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/checkbox-group/index.ts b/packages/checkbox-group/index.ts
new file mode 100644
index 0000000000..f1acd627fc
--- /dev/null
+++ b/packages/checkbox-group/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import CheckboxGroup from '../checkbox/src/checkbox-group.vue'
+
+CheckboxGroup.install = (app: App): void => {
+  app.component(CheckboxGroup.name, CheckboxGroup)
+}
+
+export default CheckboxGroup
diff --git a/packages/checkbox-group/package.json b/packages/checkbox-group/package.json
new file mode 100644
index 0000000000..f1465becb3
--- /dev/null
+++ b/packages/checkbox-group/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/checkbox-group",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/checkbox/index.ts b/packages/checkbox/index.ts
index e8339a6b8a..f97fdb7954 100644
--- a/packages/checkbox/index.ts
+++ b/packages/checkbox/index.ts
@@ -3,10 +3,8 @@ import Checkbox from './src/checkbox.vue'
 import CheckboxButton from './src/checkbox-button.vue'
 import CheckboxGroup from './src/checkbox-group.vue'
 
-export default (app: App): void => {
+Checkbox.install = (app: App): void => {
   app.component(Checkbox.name, Checkbox)
-  app.component(CheckboxButton.name, CheckboxButton)
-  app.component(CheckboxGroup.name, CheckboxGroup)
 }
 
-export { Checkbox, CheckboxButton, CheckboxGroup }
+export default Checkbox
diff --git a/packages/layout/__tests__/layout.spec.ts b/packages/col/__tests__/layout.spec.ts
similarity index 100%
rename from packages/layout/__tests__/layout.spec.ts
rename to packages/col/__tests__/layout.spec.ts
diff --git a/packages/col/index.ts b/packages/col/index.ts
new file mode 100644
index 0000000000..e839abd1d7
--- /dev/null
+++ b/packages/col/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Col from './src/col'
+
+Col.install = (app: App): void => {
+  app.component(Col.name, Col)
+}
+
+export default Col
diff --git a/packages/col/package.json b/packages/col/package.json
new file mode 100644
index 0000000000..1dfed33067
--- /dev/null
+++ b/packages/col/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/col",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/layout/src/col.ts b/packages/col/src/col.ts
similarity index 100%
rename from packages/layout/src/col.ts
rename to packages/col/src/col.ts
diff --git a/packages/layout/src/row.ts b/packages/col/src/row.ts
similarity index 100%
rename from packages/layout/src/row.ts
rename to packages/col/src/row.ts
diff --git a/packages/collapse-item/index.ts b/packages/collapse-item/index.ts
new file mode 100644
index 0000000000..9eaf992164
--- /dev/null
+++ b/packages/collapse-item/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import CollapseItem from '../collapse/src/collapse-item.vue'
+
+CollapseItem.install = (app: App): void => {
+  app.component(CollapseItem.name, CollapseItem)
+}
+
+export default CollapseItem
diff --git a/packages/collapse-item/package.json b/packages/collapse-item/package.json
new file mode 100644
index 0000000000..03e889d2e9
--- /dev/null
+++ b/packages/collapse-item/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/collapse-item",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/collapse-transition/index.ts b/packages/collapse-transition/index.ts
new file mode 100644
index 0000000000..26012e9e33
--- /dev/null
+++ b/packages/collapse-transition/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import CollapseTransition from '../transition/collapse-transition/index.vue'
+
+CollapseTransition.install = (app: App): void => {
+  app.component(CollapseTransition.name, CollapseTransition)
+}
+
+export default CollapseTransition
diff --git a/packages/collapse-transition/package.json b/packages/collapse-transition/package.json
new file mode 100644
index 0000000000..49d824d46d
--- /dev/null
+++ b/packages/collapse-transition/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/collapse-transition",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/collapse/index.ts b/packages/collapse/index.ts
index 64a98e7920..00ee2b46c3 100644
--- a/packages/collapse/index.ts
+++ b/packages/collapse/index.ts
@@ -1,10 +1,8 @@
 import { App } from 'vue'
 import Collapse from './src/collapse.vue'
-import CollapseItem from './src/collapse-item.vue'
 
-export default (app: App): void => {
+Collapse.install = (app: App): void => {
   app.component(Collapse.name, Collapse)
-  app.component(CollapseItem.name, CollapseItem)
 }
 
-export { Collapse, CollapseItem }
+export default Collapse
diff --git a/packages/color-picker/index.ts b/packages/color-picker/index.ts
index 7ade15b1c5..cf41e4b366 100644
--- a/packages/color-picker/index.ts
+++ b/packages/color-picker/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import ColorPicker from './src/index.vue'
 
-export default (app: App): void => {
+ColorPicker.install = (app: App): void => {
   app.component(ColorPicker.name, ColorPicker)
 }
 
-export { ColorPicker }
+export default ColorPicker
diff --git a/packages/color-picker/src/index.vue b/packages/color-picker/src/index.vue
index 2c705e82e7..a36890b90a 100644
--- a/packages/color-picker/src/index.vue
+++ b/packages/color-picker/src/index.vue
@@ -95,9 +95,9 @@ import SvPanel from './components/sv-panel.vue'
 import HueSlider from './components/hue-slider.vue'
 import AlphaSlider from './components/alpha-slider.vue'
 import Predefine from './components/predefine.vue'
-import { Popper as ElPopper } from '@element-plus/popper'
-import { Button as ElButton } from '@element-plus/button'
-import { Input as ElInput } from '@element-plus/input'
+import ElPopper from '@element-plus/popper'
+import ElButton from '@element-plus/button'
+import ElInput from '@element-plus/input'
 import { t } from '@element-plus/locale'
 import { UPDATE_MODEL_EVENT }  from '@element-plus/utils/constants'
 import { useGlobalConfig } from '@element-plus/utils/util'
diff --git a/packages/container/index.ts b/packages/container/index.ts
index e593b32736..36e930e515 100644
--- a/packages/container/index.ts
+++ b/packages/container/index.ts
@@ -1,16 +1,8 @@
 import { App } from 'vue'
 import Container from './src/container.vue'
-import Aside from './src/aside.vue'
-import Main from './src/main.vue'
-import Footer from './src/footer.vue'
-import Header from './src/header.vue'
 
-export default (app: App): void => {
+Container.install = (app: App): void => {
   app.component(Container.name, Container)
-  app.component(Aside.name, Aside)
-  app.component(Main.name, Main)
-  app.component(Footer.name, Footer)
-  app.component(Header.name, Header)
 }
 
-export { Container, Aside, Main, Footer, Header }
+export default Container
diff --git a/packages/date-picker/index.ts b/packages/date-picker/index.ts
index cf97be07d9..d91e4e03ee 100644
--- a/packages/date-picker/index.ts
+++ b/packages/date-picker/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import DatePicker from './src/date-picker'
 
-export default (app: App): void => {
+DatePicker.install = (app: App): void => {
   app.component(DatePicker.name, DatePicker)
 }
 
-export { DatePicker }
+export default DatePicker
diff --git a/packages/date-picker/src/date-picker-com/panel-date-pick.vue b/packages/date-picker/src/date-picker-com/panel-date-pick.vue
index ad0bb550f5..ee2063042f 100644
--- a/packages/date-picker/src/date-picker-com/panel-date-pick.vue
+++ b/packages/date-picker/src/date-picker-com/panel-date-pick.vue
@@ -161,15 +161,15 @@ import {
   extractTimeFormat,
 } from '@element-plus/time-picker'
 import { t } from '@element-plus/locale'
-import { Input as ElInput } from '@element-plus/input'
+import ElInput from '@element-plus/input'
 import { ClickOutside } from '@element-plus/directives'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { Button as ElButton } from '@element-plus/button'
+import ElButton from '@element-plus/button'
 import dayjs, { Dayjs } from 'dayjs'
 import DateTable from './basic-date-table.vue'
 import MonthTable from './basic-month-table.vue'
 import YearTable from './basic-year-table.vue'
-import { TimePickPanel } from '@element-plus/time-picker'
+import TimePickPanel from '@element-plus/time-picker/src/time-picker-com/panel-time-pick.vue'
 import {
   defineComponent,
   computed,
diff --git a/packages/date-picker/src/date-picker-com/panel-date-range.vue b/packages/date-picker/src/date-picker-com/panel-date-range.vue
index 41ca370bcb..673fdb7c1b 100644
--- a/packages/date-picker/src/date-picker-com/panel-date-range.vue
+++ b/packages/date-picker/src/date-picker-com/panel-date-range.vue
@@ -216,13 +216,13 @@ import { t } from '@element-plus/locale'
 import {
   extractDateFormat,
   extractTimeFormat,
-  TimePickPanel,
 } from '@element-plus/time-picker'
+import TimePickPanel from '@element-plus/time-picker/src/time-picker-com/panel-time-pick.vue'
 import { ClickOutside } from '@element-plus/directives'
 import dayjs, { Dayjs } from 'dayjs'
 import DateTable from './basic-date-table.vue'
-import { Input as ElInput } from '@element-plus/input'
-import { Button as ElButton } from '@element-plus/button'
+import ElInput from '@element-plus/input'
+import ElButton from '@element-plus/button'
 
 export default defineComponent({
 
diff --git a/packages/date-picker/src/date-picker.ts b/packages/date-picker/src/date-picker.ts
index 6295c241bd..4e99a08717 100644
--- a/packages/date-picker/src/date-picker.ts
+++ b/packages/date-picker/src/date-picker.ts
@@ -33,6 +33,7 @@ const getPanel = function(type) {
 
 export default {
   name: 'ElDatePicker',
+  install: null,
   props: {
     type: {
       type: String,
diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts
index 4778cc817e..d98027c24b 100644
--- a/packages/dialog/index.ts
+++ b/packages/dialog/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Dialog from './src/index'
 
-export default (app: App): void => {
+Dialog.install = (app: App): void => {
   app.component(Dialog.name, Dialog)
 }
 
-export { Dialog }
+export default Dialog
diff --git a/packages/divider/index.ts b/packages/divider/index.ts
index 544a953d55..5b5cc7fa02 100644
--- a/packages/divider/index.ts
+++ b/packages/divider/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Divider from './src/index.vue'
 
-export default (app: App): void => {
+Divider.install = (app: App): void => {
   app.component(Divider.name, Divider)
 }
 
-export { Divider }
+export default Divider
diff --git a/packages/drawer/index.ts b/packages/drawer/index.ts
index 4af4b27703..6a0c00618c 100644
--- a/packages/drawer/index.ts
+++ b/packages/drawer/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Drawer from './src/index.vue'
 
-export default (app: App): void => {
+Drawer.install = (app: App): void => {
   app.component(Drawer.name, Drawer)
 }
 
-export { Drawer }
+export default Drawer
diff --git a/packages/dropdown-item/index.ts b/packages/dropdown-item/index.ts
new file mode 100644
index 0000000000..1a3be01345
--- /dev/null
+++ b/packages/dropdown-item/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import DropdownItem from '../dropdown/src/dropdown-item.vue'
+
+DropdownItem.install = (app: App): void => {
+  app.component(DropdownItem.name, DropdownItem)
+}
+
+export default DropdownItem
diff --git a/packages/dropdown-item/package.json b/packages/dropdown-item/package.json
new file mode 100644
index 0000000000..37f4dde9fa
--- /dev/null
+++ b/packages/dropdown-item/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/dropdown-item",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/dropdown-menu/index.ts b/packages/dropdown-menu/index.ts
new file mode 100644
index 0000000000..a8f905192c
--- /dev/null
+++ b/packages/dropdown-menu/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import DropdownMenu from '../dropdown/src/dropdown-menu.vue'
+
+DropdownMenu.install = (app: App): void => {
+  app.component(DropdownMenu.name, DropdownMenu)
+}
+
+export default DropdownMenu
diff --git a/packages/dropdown-menu/package.json b/packages/dropdown-menu/package.json
new file mode 100644
index 0000000000..d113d6a1ba
--- /dev/null
+++ b/packages/dropdown-menu/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/dropdown-menu",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/dropdown/index.ts b/packages/dropdown/index.ts
index a9fd105058..666de99364 100644
--- a/packages/dropdown/index.ts
+++ b/packages/dropdown/index.ts
@@ -3,10 +3,8 @@ import Dropdown from './src/dropdown.vue'
 import DropdownItem from './src/dropdown-item.vue'
 import DropdownMenu from './src/dropdown-menu.vue'
 
-export default (app: App): void => {
+Dropdown.install = (app: App): void => {
   app.component(Dropdown.name, Dropdown)
-  app.component(DropdownItem.name, DropdownItem)
-  app.component(DropdownMenu.name, DropdownMenu)
 }
 
-export { Dropdown, DropdownItem, DropdownMenu }
+export default Dropdown
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index d78e3ae372..56b414cde9 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -48,11 +48,9 @@ import {
   ComponentPublicInstance,
 } from 'vue'
 import { on, addClass, removeClass } from '@element-plus/utils/dom'
-import {
-  Button as ElButton,
-  ButtonGroup as ElButtonGroup,
-} from '@element-plus/button'
-import { Popper as ElPopper } from '@element-plus/popper'
+import ElButton from '@element-plus/button'
+import ElButtonGroup from '@element-plus/button-group'
+import ElPopper from '@element-plus/popper'
 import { useDropdown } from './useDropdown'
 
 export default defineComponent({
diff --git a/packages/element-plus/index.ts b/packages/element-plus/index.ts
index 46270cd47c..422fa71d20 100644
--- a/packages/element-plus/index.ts
+++ b/packages/element-plus/index.ts
@@ -1,127 +1,89 @@
 import type { App } from 'vue'
 import ElAlert from '@element-plus/alert'
-import ElAvatar from '@element-plus/avatar'
+import ElAside from '@element-plus/aside'
 import ElAutocomplete from '@element-plus/autocomplete'
+import ElAvatar from '@element-plus/avatar'
 import ElBacktop from '@element-plus/backtop'
-import ElButton from '@element-plus/button'
 import ElBadge from '@element-plus/badge'
-import ElCard from '@element-plus/card'
-import ElCheckbox from '@element-plus/checkbox'
-import ElDropdown from '@element-plus/dropdown'
-import ElTag from '@element-plus/tag'
-import ElLayout from '@element-plus/layout'
-import ElDivider from '@element-plus/divider'
-import ElCarousel from '@element-plus/carousel'
-import ElTimeline from '@element-plus/timeline'
-import ElProgress from '@element-plus/progress'
 import ElBreadcrumb from '@element-plus/breadcrumb'
-import ElIcon from '@element-plus/icon'
-import ElImage from '@element-plus/image'
-import ElLink from '@element-plus/link'
-import ElRate from '@element-plus/rate'
-import ElSwitch from '@element-plus/switch'
-import ElContainer from '@element-plus/container'
-import ElNotification from '@element-plus/notification'
-import ElPageHeader from '@element-plus/page-header'
-import ElRadio from '@element-plus/radio'
-import ElScrollBar from '@element-plus/scrollbar'
-import ElSteps from '@element-plus/steps'
-import ElCollapse from '@element-plus/collapse'
-import ElPopper from '@element-plus/popper'
-import ElTimePicker from '@element-plus/time-picker'
-import ElDatePicker from '@element-plus/date-picker'
-import ElTabs from '@element-plus/tabs'
-import ElTooltip from '@element-plus/tooltip'
-import ElSlider from '@element-plus/slider'
-import ElInput from '@element-plus/input'
-import ElLoading from '@element-plus/loading'
-import ElTransfer from '@element-plus/transfer'
-import ElDialog from '@element-plus/dialog'
+import ElBreadcrumbItem from '@element-plus/breadcrumb-item'
+import ElButton from '@element-plus/button'
+import ElButtonGroup from '@element-plus/button-group'
 import ElCalendar from '@element-plus/calendar'
-import ElInfiniteScroll from '@element-plus/infinite-scroll'
-import ElMessage from '@element-plus/message'
-import ElDrawer from '@element-plus/drawer'
-import ElTableInstall, {
-  Table as ElTable,
-  TableColumn as ElTableColumn,
-} from '@element-plus/table'
-import ElPopconfirm from '@element-plus/popconfirm'
-import ElForm from '@element-plus/form'
-import ElUpload from '@element-plus/upload'
-import ElTree from '@element-plus/tree'
-import ElColorPicker from '@element-plus/color-picker'
-import ElSelect from '@element-plus/select'
-import ElTimeSelect from '@element-plus/time-select'
-import ElPagination from '@element-plus/pagination'
-import ElMessageBox from '@element-plus/message-box'
-import ElInputNumber from '@element-plus/input-number'
-import ElPopover from '@element-plus/popover'
+import ElCard from '@element-plus/card'
+import ElCarousel from '@element-plus/carousel'
+import ElCarouselItem from '@element-plus/carousel-item'
 import ElCascader from '@element-plus/cascader'
 import ElCascaderPanel from '@element-plus/cascader-panel'
+import ElCheckbox from '@element-plus/checkbox'
+import ElCheckboxButton from '@element-plus/checkbox-button'
+import ElCheckboxGroup from '@element-plus/checkbox-group'
+import ElCol from '@element-plus/col'
+import ElCollapse from '@element-plus/collapse'
+import ElCollapseItem from '@element-plus/collapse-item'
+import ElCollapseTransition from '@element-plus/collapse-transition'
+import ElColorPicker from '@element-plus/color-picker'
+import ElContainer from '@element-plus/container'
+import ElDatePicker from '@element-plus/date-picker'
+import ElDialog from '@element-plus/dialog'
+import ElDivider from '@element-plus/divider'
+import ElDrawer from '@element-plus/drawer'
+import ElDropdown from '@element-plus/dropdown'
+import ElDropdownItem from '@element-plus/dropdown-item'
+import ElDropdownMenu from '@element-plus/dropdown-menu'
+import ElFooter from '@element-plus/footer'
+import ElForm from '@element-plus/form'
+import ElFormItem from '@element-plus/form-item'
+import ElHeader from '@element-plus/header'
+import ElIcon from '@element-plus/icon'
+import ElImage from '@element-plus/image'
+import ElInfiniteScroll from '@element-plus/infinite-scroll'
+import ElInput from '@element-plus/input'
+import ElInputNumber from '@element-plus/input-number'
+import ElLink from '@element-plus/link'
+import ElLoading from '@element-plus/loading'
+import ElMain from '@element-plus/main'
 import ElMenu from '@element-plus/menu'
-import ElCollapseTransition from '@element-plus/transition'
+import ElMenuItem from '@element-plus/menu-item'
+import ElMenuItemGroup from '@element-plus/menu-item-group'
+import ElMessage from '@element-plus/message'
+import ElMessageBox from '@element-plus/message-box'
+import ElNotification from '@element-plus/notification'
+import ElOption from '@element-plus/option'
+import ElOptionGroup from '@element-plus/option-group'
+import ElPageHeader from '@element-plus/page-header'
+import ElPagination from '@element-plus/pagination'
+import ElPopconfirm from '@element-plus/popconfirm'
+import ElPopover from '@element-plus/popover'
+import ElPopper from '@element-plus/popper'
+import ElProgress from '@element-plus/progress'
+import ElRadio from '@element-plus/radio'
+import ElRadioButton from '@element-plus/radio-button'
+import ElRadioGroup from '@element-plus/radio-group'
+import ElRate from '@element-plus/rate'
+import ElRow from '@element-plus/row'
+import ElScrollBar from '@element-plus/scrollbar'
+import ElSelect from '@element-plus/select'
+import ElSlider from '@element-plus/slider'
+import ElStep from '@element-plus/step'
+import ElSteps from '@element-plus/steps'
+import ElSubmenu from '@element-plus/submenu'
+import ElSwitch from '@element-plus/switch'
+import ElTabPane from '@element-plus/tab-pane'
+import ElTable from '@element-plus/table'
+import ElTableColumn from '@element-plus/table-column'
+import ElTabs from '@element-plus/tabs'
+import ElTag from '@element-plus/tag'
+import ElTimePicker from '@element-plus/time-picker'
+import ElTimeSelect from '@element-plus/time-select'
+import ElTimeline from '@element-plus/timeline'
+import ElTimelineItem from '@element-plus/timeline-item'
+import ElTooltip from '@element-plus/tooltip'
+import ElTransfer from '@element-plus/transfer'
+import ElTree from '@element-plus/tree'
+import ElUpload from '@element-plus/upload'
 import { use } from '@element-plus/locale'
-
-export {
-  ElAlert,
-  ElAvatar,
-  ElAutocomplete,
-  ElBacktop,
-  ElLayout,
-  ElButton,
-  ElBadge,
-  ElCard,
-  ElCheckbox,
-  ElDivider,
-  ElDropdown,
-  ElTag,
-  ElCarousel,
-  ElTimeline,
-  ElProgress,
-  ElBreadcrumb,
-  ElIcon,
-  ElImage,
-  ElLink,
-  ElRate,
-  ElSwitch,
-  ElContainer,
-  ElNotification,
-  ElPageHeader,
-  ElScrollBar,
-  ElSteps,
-  ElRadio,
-  ElCollapse,
-  ElTimePicker,
-  ElDatePicker,
-  ElTabs,
-  ElTooltip,
-  ElSlider,
-  ElInput,
-  ElLoading,
-  ElTransfer,
-  ElDialog,
-  ElCalendar,
-  ElInfiniteScroll,
-  ElMessage,
-  ElDrawer,
-  ElTable,
-  ElTableColumn,
-  ElPopconfirm,
-  ElForm,
-  ElUpload,
-  ElTree,
-  ElColorPicker,
-  ElSelect,
-  ElTimeSelect,
-  ElPagination,
-  ElMessageBox,
-  ElInputNumber,
-  ElPopover,
-  ElCascader,
-  ElCascaderPanel,
-  ElMenu,
-  ElCollapseTransition,
-}
+import { version } from '../../package.json'
 
 interface InstallOptions {
   size: ComponentSize
@@ -129,77 +91,202 @@ interface InstallOptions {
   locale?: any
 }
 
-const defaultInstallOpt =  {
+const defaultInstallOpt: InstallOptions =  {
   size: '' as ComponentSize,
   zIndex: 2000,
 }
 
-const install = (app: App, opt: InstallOptions = defaultInstallOpt): void => {
-  ElAlert(app)
-  ElAvatar(app)
-  ElAutocomplete(app)
-  ElBacktop(app)
-  ElButton(app)
-  ElBadge(app)
-  ElCard(app)
-  ElCheckbox(app)
-  ElDropdown(app)
-  ElTag(app)
-  ElLayout(app)
-  ElDivider(app)
-  ElCarousel(app)
-  ElTimeline(app)
-  ElProgress(app)
-  ElBreadcrumb(app)
-  ElIcon(app)
-  ElImage(app)
-  ElLink(app)
-  ElRate(app)
-  ElSwitch(app)
-  ElContainer(app)
-  ElNotification(app)
-  ElPageHeader(app)
-  ElScrollBar(app)
-  ElSteps(app)
-  ElRadio(app)
-  ElCollapse(app)
-  ElPopper(app)
-  ElTimePicker(app)
-  ElDatePicker(app)
-  ElTabs(app)
-  ElTooltip(app)
-  ElSlider(app)
-  ElInput(app)
-  ElLoading(app)
-  ElTransfer(app)
-  ElDialog(app)
-  ElCalendar(app)
-  ElInfiniteScroll(app)
-  ElMessage(app)
-  ElMessageBox(app)
-  ElDrawer(app)
-  ElTableInstall(app)
-  ElPopconfirm(app)
-  ElForm(app)
-  ElUpload(app)
-  ElTree(app)
-  ElColorPicker(app)
-  ElSelect(app)
-  ElTimeSelect(app)
-  ElPagination(app)
-  ElInputNumber(app)
-  ElPopover(app)
-  ElCascader(app)
-  ElCascaderPanel(app)
-  ElMenu(app)
-  ElCollapseTransition(app)
+const components = [
+  ElAlert,
+  ElAside,
+  ElAutocomplete,
+  ElAvatar,
+  ElBacktop,
+  ElBadge,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElButtonGroup,
+  ElCalendar,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  ElCascader,
+  ElCascaderPanel,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElCol,
+  ElCollapse,
+  ElCollapseItem,
+  ElCollapseTransition,
+  ElColorPicker,
+  ElContainer,
+  ElDatePicker,
+  ElDialog,
+  ElDivider,
+  ElDrawer,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElFooter,
+  ElForm,
+  ElFormItem,
+  ElHeader,
+  ElIcon,
+  ElImage,
+  ElInput,
+  ElInputNumber,
+  ElLink,
+  ElMain,
+  ElMenu,
+  ElMenuItem,
+  ElMenuItemGroup,
+  ElOption,
+  ElOptionGroup,
+  ElPageHeader,
+  ElPagination,
+  ElPopconfirm,
+  ElPopover,
+  ElPopper,
+  ElProgress,
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRate,
+  ElRow,
+  ElScrollBar,
+  ElSelect,
+  ElSlider,
+  ElStep,
+  ElSteps,
+  ElSubmenu,
+  ElSwitch,
+  ElTabPane,
+  ElTable,
+  ElTableColumn,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElUpload,
+]
 
-  app.config.globalProperties.$ELEMENT = opt
-  use(opt.locale)
+const plugins = [
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+  ElTabs,
+  ElTag,
+  ElTimePicker,
+  ElTimeSelect,
+]
+
+const install = (app: App, opt: InstallOptions): void => {
+  const option = Object.assign(defaultInstallOpt, opt)
+
+  use(option.locale)
+  app.config.globalProperties.$ELEMENT = option
+
+  components.forEach(component => {
+    app.component(component.name, component)
+  })
+
+  plugins.forEach(plugin => {
+    app.use(plugin as any)
+  })
 }
 
-const elementUI = {
+export {
+  ElAlert,
+  ElAside,
+  ElAutocomplete,
+  ElAvatar,
+  ElBacktop,
+  ElBadge,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElButtonGroup,
+  ElCalendar,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  ElCascader,
+  ElCascaderPanel,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElCol,
+  ElCollapse,
+  ElCollapseItem,
+  ElCollapseTransition,
+  ElColorPicker,
+  ElContainer,
+  ElDatePicker,
+  ElDialog,
+  ElDivider,
+  ElDrawer,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElFooter,
+  ElForm,
+  ElFormItem,
+  ElHeader,
+  ElIcon,
+  ElImage,
+  ElInfiniteScroll,
+  ElInput,
+  ElInputNumber,
+  ElLink,
+  ElLoading,
+  ElMain,
+  ElMenu,
+  ElMenuItem,
+  ElMenuItemGroup,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+  ElOption,
+  ElOptionGroup,
+  ElPageHeader,
+  ElPagination,
+  ElPopconfirm,
+  ElPopover,
+  ElPopper,
+  ElProgress,
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRate,
+  ElRow,
+  ElScrollBar,
+  ElSelect,
+  ElSlider,
+  ElStep,
+  ElSteps,
+  ElSubmenu,
+  ElSwitch,
+  ElTabPane,
+  ElTable,
+  ElTableColumn,
+  ElTabs,
+  ElTag,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElUpload,
+}
+
+export default {
+  version,
   install,
 }
-
-export default elementUI
diff --git a/packages/element-plus/package.json b/packages/element-plus/package.json
index f918f575fc..b34f877a4c 100644
--- a/packages/element-plus/package.json
+++ b/packages/element-plus/package.json
@@ -15,37 +15,86 @@
   },
   "dependencies": {
     "@element-plus/alert": "^0.0.0",
-    "@element-plus/avatar": "^0.0.0",
+    "@element-plus/aside": "^0.0.0",
     "@element-plus/autocomplete": "^0.0.0",
-    "@element-plus/badge": "^0.0.0",
+    "@element-plus/avatar": "^0.0.0",
     "@element-plus/backtop": "^0.0.0",
-    "@element-plus/button": "^0.0.0",
+    "@element-plus/badge": "^0.0.0",
     "@element-plus/breadcrumb": "^0.0.0",
+    "@element-plus/breadcrumb-item": "^0.0.0",
+    "@element-plus/button": "^0.0.0",
+    "@element-plus/button-group": "^0.0.0",
+    "@element-plus/calendar": "^0.0.0",
     "@element-plus/card": "^0.0.0",
-    "@element-plus/timeline": "^0.0.0",
+    "@element-plus/carousel": "^0.0.0",
+    "@element-plus/carousel-item": "^0.0.0",
+    "@element-plus/cascader": "^0.0.0",
+    "@element-plus/cascader-panel": "^0.0.0",
+    "@element-plus/checkbox": "^0.0.0",
+    "@element-plus/checkbox-button": "^0.0.0",
+    "@element-plus/checkbox-group": "^0.0.0",
+    "@element-plus/col": "^0.0.0",
+    "@element-plus/collapse": "^0.0.0",
+    "@element-plus/collapse-item": "^0.0.0",
+    "@element-plus/collapse-transition": "^0.0.0",
+    "@element-plus/color-picker": "^0.0.0",
+    "@element-plus/container": "^0.0.0",
+    "@element-plus/date-picker": "^0.0.0",
+    "@element-plus/dialog": "^0.0.0",
     "@element-plus/divider": "^0.0.0",
+    "@element-plus/drawer": "^0.0.0",
+    "@element-plus/dropdown": "^0.0.0",
+    "@element-plus/dropdown-item": "^0.0.0",
+    "@element-plus/dropdown-menu": "^0.0.0",
+    "@element-plus/footer": "^0.0.0",
+    "@element-plus/form": "^0.0.0",
+    "@element-plus/form-item": "^0.0.0",
+    "@element-plus/header": "^0.0.0",
     "@element-plus/icon": "^0.0.0",
+    "@element-plus/image": "^0.0.0",
+    "@element-plus/infinite-scroll": "^0.0.0",
     "@element-plus/input": "^0.0.0",
     "@element-plus/input-number": "^0.0.0",
-    "@element-plus/layout": "^0.0.0",
     "@element-plus/link": "^0.0.0",
-    "@element-plus/progress": "^0.0.0",
+    "@element-plus/loading": "^0.0.0",
+    "@element-plus/main": "^0.0.0",
+    "@element-plus/menu": "^0.0.0",
+    "@element-plus/menu-item": "^0.0.0",
+    "@element-plus/menu-item-group": "^0.0.0",
     "@element-plus/message": "^0.0.0",
-    "@element-plus/rate": "^0.0.0",
-    "@element-plus/image": "^0.0.0",
-    "@element-plus/switch": "^0.0.0",
-    "@element-plus/radio": "^0.0.0",
-    "@element-plus/page-header": "^0.0.0",
-    "@element-plus/scrollbar": "^0.0.0",
-    "@element-plus/steps": "^0.0.0",
+    "@element-plus/message-box": "^0.0.0",
     "@element-plus/notification": "^0.0.0",
-    "@element-plus/collapse": "^0.0.0",
-    "@element-plus/time-picker": "^0.0.0",
-    "@element-plus/tabs": "^0.0.0",
+    "@element-plus/option": "^0.0.0",
+    "@element-plus/option-group": "^0.0.0",
+    "@element-plus/page-header": "^0.0.0",
+    "@element-plus/pagination": "^0.0.0",
     "@element-plus/popconfirm": "^0.0.0",
-    "@element-plus/form": "^0.0.0",
-    "@element-plus/tree": "^0.0.0",
+    "@element-plus/popover": "^0.0.0",
+    "@element-plus/progress": "^0.0.0",
+    "@element-plus/radio": "^0.0.0",
+    "@element-plus/radio-button": "^0.0.0",
+    "@element-plus/radio-group": "^0.0.0",
+    "@element-plus/rate": "^0.0.0",
+    "@element-plus/row": "^0.0.0",
+    "@element-plus/scrollbar": "^0.0.0",
     "@element-plus/select": "^0.0.0",
-    "@element-plus/menu": "^0.0.0"
+    "@element-plus/slider": "^0.0.0",
+    "@element-plus/step": "^0.0.0",
+    "@element-plus/steps": "^0.0.0",
+    "@element-plus/submenu": "^0.0.0",
+    "@element-plus/switch": "^0.0.0",
+    "@element-plus/tab-pane": "^0.0.0",
+    "@element-plus/table": "^0.0.0",
+    "@element-plus/table-column": "^0.0.0",
+    "@element-plus/tabs": "^0.0.0",
+    "@element-plus/tag": "^0.0.0",
+    "@element-plus/time-picker": "^0.0.0",
+    "@element-plus/time-select": "^0.0.0",
+    "@element-plus/timeline": "^0.0.0",
+    "@element-plus/timeline-item": "^0.0.0",
+    "@element-plus/tooltip": "^0.0.0",
+    "@element-plus/transfer": "^0.0.0",
+    "@element-plus/tree": "^0.0.0",
+    "@element-plus/upload": "^0.0.0"
   }
 }
diff --git a/packages/footer/index.ts b/packages/footer/index.ts
new file mode 100644
index 0000000000..c863758880
--- /dev/null
+++ b/packages/footer/index.ts
@@ -0,0 +1,9 @@
+import { App } from 'vue'
+import Footer from '../container/src/footer.vue'
+
+Footer.install = (app: App): void => {
+  app.component(Footer.name, Footer)
+}
+
+export default Footer
+
diff --git a/packages/footer/package.json b/packages/footer/package.json
new file mode 100644
index 0000000000..0bf996fd82
--- /dev/null
+++ b/packages/footer/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/footer",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/form-item/index.ts b/packages/form-item/index.ts
new file mode 100644
index 0000000000..c6d377b65f
--- /dev/null
+++ b/packages/form-item/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import FormItem from '../form/src/form-item.vue'
+
+FormItem.install = (app: App): void => {
+  app.component(FormItem.name, FormItem)
+}
+
+export default FormItem
diff --git a/packages/form-item/package.json b/packages/form-item/package.json
new file mode 100644
index 0000000000..0938627a86
--- /dev/null
+++ b/packages/form-item/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/form-item",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/form/index.ts b/packages/form/index.ts
index 66af79b847..f0e3305215 100644
--- a/packages/form/index.ts
+++ b/packages/form/index.ts
@@ -1,13 +1,11 @@
 import { App } from 'vue'
 import Form from './src/form.vue'
-import FormItem from './src/form-item.vue'
-import LabelWrap from './src/label-wrap'
 
-export default (app: App): void => {
+Form.install = (app: App): void => {
   app.component(Form.name, Form)
-  app.component(FormItem.name, FormItem)
-  app.component(LabelWrap.name, LabelWrap)
 }
 
-export { Form, FormItem, LabelWrap }
+export default Form
+
+
 export * from './src/token'
diff --git a/packages/header/index.ts b/packages/header/index.ts
new file mode 100644
index 0000000000..110a3d83a1
--- /dev/null
+++ b/packages/header/index.ts
@@ -0,0 +1,9 @@
+import { App } from 'vue'
+import Header from '../container/src/header.vue'
+
+Header.install = (app: App): void => {
+  app.component(Header.name, Header)
+}
+
+export default Header
+
diff --git a/packages/header/package.json b/packages/header/package.json
new file mode 100644
index 0000000000..55231286e2
--- /dev/null
+++ b/packages/header/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/header",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/icon/index.ts b/packages/icon/index.ts
index ef84fda21e..183c987884 100644
--- a/packages/icon/index.ts
+++ b/packages/icon/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Icon from './src/index.vue'
 
-export default (app: App): void => {
+Icon.install = (app: App): void => {
   app.component(Icon.name, Icon)
 }
 
-export { Icon }
+export default Icon
diff --git a/packages/image/index.ts b/packages/image/index.ts
index 64d73a1a89..578336056c 100644
--- a/packages/image/index.ts
+++ b/packages/image/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Image from './src/index.vue'
 
-export default (app: App): void => {
+Image.install = (app: App): void => {
   app.component(Image.name, Image)
 }
 
-export { Image }
+export default Image
diff --git a/packages/infinite-scroll/index.ts b/packages/infinite-scroll/index.ts
index 9b7c92f107..6ea4f1e1fc 100644
--- a/packages/infinite-scroll/index.ts
+++ b/packages/infinite-scroll/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import InfiniteScroll from './src/index'
 
-export default (app: App): void => {
-  app.directive('infinite-scroll', InfiniteScroll)
+(InfiniteScroll as any).install = (app: App): void => {
+  app.directive('InfiniteScroll', InfiniteScroll)
 }
 
-export { InfiniteScroll }
+export default InfiniteScroll
diff --git a/packages/input-number/index.ts b/packages/input-number/index.ts
index a13ee79f05..76d5ec67d9 100644
--- a/packages/input-number/index.ts
+++ b/packages/input-number/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import InputNumber from './src/index.vue'
 
-export default (app: App): void => {
+InputNumber.install = (app: App): void => {
   app.component(InputNumber.name, InputNumber)
 }
 
-export { InputNumber }
+export default InputNumber
diff --git a/packages/input-number/src/index.vue b/packages/input-number/src/index.vue
index efebcbcddf..99d729699f 100644
--- a/packages/input-number/src/index.vue
+++ b/packages/input-number/src/index.vue
@@ -60,7 +60,7 @@ import {
   onUpdated,
 } from 'vue'
 import { RepeatClick } from '@element-plus/directives'
-import { Input as ElInput } from '@element-plus/input'
+import ElInput from '@element-plus/input'
 import { useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import { elFormKey, elFormItemKey } from '@element-plus/form'
diff --git a/packages/input/index.ts b/packages/input/index.ts
index 49e30bcf49..3a21b5d346 100644
--- a/packages/input/index.ts
+++ b/packages/input/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Input from './src/index.vue'
 
-export default (app: App): void => {
+Input.install = (app: App): void => {
   app.component(Input.name, Input)
 }
 
-export { Input }
+export default Input
diff --git a/packages/layout/index.ts b/packages/layout/index.ts
deleted file mode 100644
index 7d28426b36..0000000000
--- a/packages/layout/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { App } from 'vue'
-import Row from './src/row'
-import Col from './src/col'
-
-export default (app: App) => {
-  app.component(Row.name, Row)
-  app.component(Col.name, Col)
-}
-
-export { Row, Col }
diff --git a/packages/link/index.ts b/packages/link/index.ts
index 54de9e38f1..dfcb21d1a4 100644
--- a/packages/link/index.ts
+++ b/packages/link/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Link from './src/index.vue'
 
-export default (app: App): void => {
+Link.install = (app: App): void => {
   app.component(Link.name, Link)
 }
 
-export { Link }
+export default Link
diff --git a/packages/loading/index.ts b/packages/loading/index.ts
index f3c381326d..8499a66ed4 100644
--- a/packages/loading/index.ts
+++ b/packages/loading/index.ts
@@ -2,9 +2,11 @@ import { App } from 'vue'
 import Loading from './src/index'
 import vLoading from './src/directive'
 
-export default (app: App): void => {
-  app.directive('loading', vLoading)
-  app.config.globalProperties.$loading = Loading
+export default {
+  install(app: App) {
+    app.directive('loading', vLoading)
+    app.config.globalProperties.$loading = Loading
+  },
+  directive: vLoading,
+  service: Loading,
 }
-
-export { Loading, vLoading }
diff --git a/packages/main/index.ts b/packages/main/index.ts
new file mode 100644
index 0000000000..39216e7686
--- /dev/null
+++ b/packages/main/index.ts
@@ -0,0 +1,9 @@
+import { App } from 'vue'
+import Main from '../container/src/main.vue'
+
+Main.install = (app: App): void => {
+  app.component(Main.name, Main)
+}
+
+export default Main
+
diff --git a/packages/main/package.json b/packages/main/package.json
new file mode 100644
index 0000000000..0d43eb32ff
--- /dev/null
+++ b/packages/main/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/main",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/menu-item-group/index.ts b/packages/menu-item-group/index.ts
new file mode 100644
index 0000000000..9756178c1c
--- /dev/null
+++ b/packages/menu-item-group/index.ts
@@ -0,0 +1,9 @@
+import { App } from 'vue'
+import MenuItemGroup from '../menu/src/menuItemGroup.vue'
+
+MenuItemGroup.install = (app: App): void => {
+  app.component(MenuItemGroup.name, MenuItemGroup)
+}
+
+export default MenuItemGroup
+
diff --git a/packages/menu-item-group/package.json b/packages/menu-item-group/package.json
new file mode 100644
index 0000000000..cae3c791b7
--- /dev/null
+++ b/packages/menu-item-group/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/menu-item-group",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/menu-item/index.ts b/packages/menu-item/index.ts
new file mode 100644
index 0000000000..b57d54a6f2
--- /dev/null
+++ b/packages/menu-item/index.ts
@@ -0,0 +1,9 @@
+import { App } from 'vue'
+import MenuItem from '../menu/src/menuItem.vue'
+
+MenuItem.install = (app: App): void => {
+  app.component(MenuItem.name, MenuItem)
+}
+
+export default MenuItem
+
diff --git a/packages/menu-item/package.json b/packages/menu-item/package.json
new file mode 100644
index 0000000000..b7e85f8f0d
--- /dev/null
+++ b/packages/menu-item/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/menu-item",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/menu/index.ts b/packages/menu/index.ts
index 6350134f7a..234dfea604 100644
--- a/packages/menu/index.ts
+++ b/packages/menu/index.ts
@@ -1,13 +1,9 @@
 import { App } from 'vue'
 import Menu from './src/menu.vue'
-import Submenu from './src/submenu.vue'
-import MenuItem from './src/menuItem.vue'
-import MenuItemGroup from './src/menuItemGroup.vue'
-export default (app: App): void => {
+
+Menu.install = (app: App): void => {
   app.component(Menu.name, Menu)
-  app.component(Submenu.name, Submenu)
-  app.component(MenuItem.name, MenuItem)
-  app.component(MenuItemGroup.name, MenuItemGroup)
 }
 
-export { Menu, Submenu, MenuItem, MenuItemGroup }
+export default Menu
+
diff --git a/packages/menu/src/menuItem.vue b/packages/menu/src/menuItem.vue
index 30d9f7f06e..2c8cb461d7 100644
--- a/packages/menu/src/menuItem.vue
+++ b/packages/menu/src/menuItem.vue
@@ -48,7 +48,7 @@ import {
 } from 'vue'
 import { IMenuItemProps, RootMenuProvider, SubMenuProvider } from './menu'
 import useMenu from './useMenu'
-import { Tooltip as ElTooltip } from '@element-plus/tooltip'
+import ElTooltip from '@element-plus/tooltip'
 
 export default {
   name: 'ElMenuItem',
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index 2bf101e74d..338002fc04 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -103,7 +103,7 @@ import {
 import ElCollapseTransition from '@element-plus/transition/collapse-transition/index.vue'
 import { ISubmenuProps, RootMenuProvider, SubMenuProvider } from './menu'
 import useMenu from './useMenu'
-import { Popper as ElPopper } from '@element-plus/popper'
+import ElPopper from '@element-plus/popper'
 
 export default {
   name: 'ElSubmenu',
diff --git a/packages/message-box/index.ts b/packages/message-box/index.ts
index a853c4ff07..8d6d36606e 100644
--- a/packages/message-box/index.ts
+++ b/packages/message-box/index.ts
@@ -1,7 +1,7 @@
 import { App } from 'vue'
 import MessageBox from './src/messageBox'
 
-export default (app: App): void => {
+(MessageBox as any).install = (app: App): void => {
   app.config.globalProperties.$msgbox = MessageBox
   app.config.globalProperties.$messageBox = MessageBox
   app.config.globalProperties.$alert = MessageBox.alert
@@ -9,4 +9,4 @@ export default (app: App): void => {
   app.config.globalProperties.$prompt = MessageBox.prompt
 }
 
-export { MessageBox }
+export default MessageBox
diff --git a/packages/message-box/src/index.vue b/packages/message-box/src/index.vue
index fb5441e846..ae7279b779 100644
--- a/packages/message-box/src/index.vue
+++ b/packages/message-box/src/index.vue
@@ -100,8 +100,8 @@ import {
   reactive,
   toRefs,
 } from 'vue'
-import { Button as ElButton } from '@element-plus/button'
-import { Input as ElInput } from '@element-plus/input'
+import ElButton from '@element-plus/button'
+import ElInput from '@element-plus/input'
 import { t } from '@element-plus/locale'
 import Dialog  from '@element-plus/utils/aria-dialog'
 import usePopup from '@element-plus/utils/popup/usePopup'
diff --git a/packages/message/index.ts b/packages/message/index.ts
index 926235e961..4756e4aee2 100644
--- a/packages/message/index.ts
+++ b/packages/message/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Message from './src/message'
 
-export default (app: App): void => {
+(Message as any).install = (app: App): void => {
   app.config.globalProperties.$message = Message
 }
 
-export { Message }
+export default Message
diff --git a/packages/notification/index.ts b/packages/notification/index.ts
index e9f8e9803a..efcbe3c90f 100644
--- a/packages/notification/index.ts
+++ b/packages/notification/index.ts
@@ -1,7 +1,8 @@
 import { App } from 'vue'
 import Notify from './src/notify'
-export default (app: App): void => {
+
+(Notify as any).install = (app: App): void => {
   app.config.globalProperties.$notify = Notify
 }
 
-export { Notify }
+export default Notify
diff --git a/packages/option-group/index.ts b/packages/option-group/index.ts
new file mode 100644
index 0000000000..e6ae94ff91
--- /dev/null
+++ b/packages/option-group/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import OptionGroup from '../select/src/option-group.vue'
+
+OptionGroup.install = (app: App): void => {
+  app.component(OptionGroup.name, OptionGroup)
+}
+
+export default OptionGroup
diff --git a/packages/option-group/package.json b/packages/option-group/package.json
new file mode 100644
index 0000000000..5d597d2b07
--- /dev/null
+++ b/packages/option-group/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/option-group",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/option/index.ts b/packages/option/index.ts
new file mode 100644
index 0000000000..82a8acf30c
--- /dev/null
+++ b/packages/option/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Option from '../select/src/option.vue'
+
+Option.install = (app: App): void => {
+  app.component(Option.name, Option)
+}
+
+export default Option
diff --git a/packages/option/package.json b/packages/option/package.json
new file mode 100644
index 0000000000..9f7c444511
--- /dev/null
+++ b/packages/option/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/option",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/page-header/index.ts b/packages/page-header/index.ts
index 2eeb377d1d..c06bb9c52c 100644
--- a/packages/page-header/index.ts
+++ b/packages/page-header/index.ts
@@ -1,9 +1,9 @@
 import { App } from 'vue'
 import PageHeader from './src/index.vue'
 
-export default (app: App): void => {
+PageHeader.install = (app: App): void => {
   app.component(PageHeader.name, PageHeader)
 }
 
-export { PageHeader }
+export default PageHeader
 
diff --git a/packages/pagination/index.ts b/packages/pagination/index.ts
index 4897d1c9f5..536d39a19d 100644
--- a/packages/pagination/index.ts
+++ b/packages/pagination/index.ts
@@ -1,9 +1,9 @@
 import { App } from 'vue'
 import Pagination from './src/index'
 
-export default (app: App): void => {
+Pagination.install = (app: App): void => {
   app.component(Pagination.name, Pagination)
 }
 
-export { Pagination }
+export default Pagination
 
diff --git a/packages/pagination/src/jumper.vue b/packages/pagination/src/jumper.vue
index 6f35088e74..29d4d9dcc0 100644
--- a/packages/pagination/src/jumper.vue
+++ b/packages/pagination/src/jumper.vue
@@ -22,7 +22,7 @@ import {
   ref,
 } from 'vue'
 import { t } from '@element-plus/locale'
-import { Input as ElInput } from '@element-plus/input'
+import ElInput from '@element-plus/input'
 import { usePagination } from './usePagination'
 
 export default defineComponent({
diff --git a/packages/pagination/src/sizes.vue b/packages/pagination/src/sizes.vue
index 5cc03ae954..f5c166f81d 100644
--- a/packages/pagination/src/sizes.vue
+++ b/packages/pagination/src/sizes.vue
@@ -19,7 +19,8 @@
 
 <script lang="ts">
 import { defineComponent, watch, computed, ref } from 'vue'
-import { select as ElSelect, option as ElOption } from '@element-plus/select'
+import ElSelect from '@element-plus/select'
+import ElOption from '@element-plus/option'
 import { t } from '@element-plus/locale'
 import isEqual from 'lodash/isEqual'
 import { usePagination } from './usePagination'
diff --git a/packages/popconfirm/index.ts b/packages/popconfirm/index.ts
index 8f916d2d64..54eca884b6 100644
--- a/packages/popconfirm/index.ts
+++ b/packages/popconfirm/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Popconfirm from './src/index.vue'
 
-export default (app: App): void => {
+Popconfirm.install = (app: App): void => {
   app.component(Popconfirm.name, Popconfirm)
 }
 
-export { Popconfirm }
+export default Popconfirm
diff --git a/packages/popconfirm/src/index.vue b/packages/popconfirm/src/index.vue
index de50d5cbcd..4d01ece9ff 100644
--- a/packages/popconfirm/src/index.vue
+++ b/packages/popconfirm/src/index.vue
@@ -40,8 +40,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue'
-import { Button as ElButton } from '@element-plus/button'
-import { Popper as ElPopper } from '@element-plus/popper'
+import ElButton from '@element-plus/button'
+import ElPopper from '@element-plus/popper'
 import { t } from '../../locale'
 
 export default defineComponent({
diff --git a/packages/popover/index.ts b/packages/popover/index.ts
index 0142749d52..954f4338a7 100644
--- a/packages/popover/index.ts
+++ b/packages/popover/index.ts
@@ -2,9 +2,9 @@ import { App } from 'vue'
 import Popover from './src/index.vue'
 import PopoverDirective, { VPopover } from './src/directive'
 
-export default (app: App): void => {
+Popover.install = (app: App): void => {
   app.component(Popover.name, Popover)
   app.directive(VPopover, PopoverDirective)
 }
-
-export { Popover, PopoverDirective, VPopover }
+Popover.directive = PopoverDirective
+export default Popover
diff --git a/packages/popover/src/index.vue b/packages/popover/src/index.vue
index 26b888b18a..f62577213b 100644
--- a/packages/popover/src/index.vue
+++ b/packages/popover/src/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, Fragment, createTextVNode, renderSlot, toDisplayString, createCommentVNode, withDirectives } from 'vue'
-import { Popper as ElPopper } from '@element-plus/popper'
+import ElPopper from '@element-plus/popper'
 import { defaultProps, Effect } from '@element-plus/popper'
 import { renderPopper, renderTrigger, renderArrow } from '@element-plus/popper'
 import { ClickOutside } from '@element-plus/directives'
diff --git a/packages/popper/index.ts b/packages/popper/index.ts
index 7ebaee2328..63e03fe3b8 100644
--- a/packages/popper/index.ts
+++ b/packages/popper/index.ts
@@ -1,11 +1,12 @@
 import type { App } from 'vue'
 import Popper from './src/index.vue'
 
-export default (app: App) => {
+Popper.install = (app: App): void => {
   app.component(Popper.name, Popper)
 }
 
-export { Popper }
+export default Popper
+
 export { default as defaultProps, Effect } from './src/use-popper/defaults'
 export type { TriggerType, IPopperOptions } from './src/use-popper/defaults'
 export { default as usePopper } from './src/use-popper/index'
diff --git a/packages/progress/index.ts b/packages/progress/index.ts
index a64037a173..58ac4bac60 100644
--- a/packages/progress/index.ts
+++ b/packages/progress/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Progress from './src/index.vue'
 
-export default (app: App): void => {
+Progress.install = (app: App): void => {
   app.component(Progress.name, Progress)
 }
 
-export { Progress }
+export default Progress
diff --git a/packages/radio-button/index.ts b/packages/radio-button/index.ts
new file mode 100644
index 0000000000..34018015fa
--- /dev/null
+++ b/packages/radio-button/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import RadioButton from '../radio/src/radio-button.vue'
+
+RadioButton.install = (app: App): void => {
+  app.component(RadioButton.name, RadioButton)
+}
+
+export default RadioButton
diff --git a/packages/radio-button/package.json b/packages/radio-button/package.json
new file mode 100644
index 0000000000..0e19899e5d
--- /dev/null
+++ b/packages/radio-button/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/radio-button",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/radio-group/index.ts b/packages/radio-group/index.ts
new file mode 100644
index 0000000000..d47e4e11f6
--- /dev/null
+++ b/packages/radio-group/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import RadioGroup from '../radio/src/radio-group.vue'
+
+RadioGroup.install = (app: App): void => {
+  app.component(RadioGroup.name, RadioGroup)
+}
+
+export default RadioGroup
diff --git a/packages/radio-group/package.json b/packages/radio-group/package.json
new file mode 100644
index 0000000000..9e914feb4f
--- /dev/null
+++ b/packages/radio-group/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/radio-group",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/radio/index.ts b/packages/radio/index.ts
index e9758c6fe3..1b6067bf2a 100644
--- a/packages/radio/index.ts
+++ b/packages/radio/index.ts
@@ -1,12 +1,8 @@
 import { App } from 'vue'
 import Radio from './src/radio.vue'
-import RadioGroup from './src/radio-group.vue'
-import RadioButton from './src/radio-button.vue'
 
-export default (app: App): void => {
+Radio.install = (app: App): void => {
   app.component(Radio.name, Radio)
-  app.component(RadioGroup.name, RadioGroup)
-  app.component(RadioButton.name, RadioButton)
 }
 
-export { Radio, RadioGroup, RadioButton }
+export default Radio
diff --git a/packages/rate/index.ts b/packages/rate/index.ts
index 3b0479b7f1..c3715cb86a 100644
--- a/packages/rate/index.ts
+++ b/packages/rate/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Rate from './src/index.vue'
 
-export default (app: App): void => {
+Rate.install = (app: App): void => {
   app.component(Rate.name, Rate)
 }
 
-export { Rate }
+export default Rate
diff --git a/packages/row/index.ts b/packages/row/index.ts
new file mode 100644
index 0000000000..d7f4e0f525
--- /dev/null
+++ b/packages/row/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Row from '../col/src/row'
+
+Row.install = (app: App): void => {
+  app.component(Row.name, Row)
+}
+
+export default Row
diff --git a/packages/row/package.json b/packages/row/package.json
new file mode 100644
index 0000000000..c7419eebf5
--- /dev/null
+++ b/packages/row/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/row",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/scrollbar/index.ts b/packages/scrollbar/index.ts
index 434e788a21..4c57c6c114 100644
--- a/packages/scrollbar/index.ts
+++ b/packages/scrollbar/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Scrollbar from './src/index.vue'
 
-export default (app: App): void => {
+Scrollbar.install = (app: App): void => {
   app.component(Scrollbar.name, Scrollbar)
 }
 
-export { Scrollbar }
+export default Scrollbar
diff --git a/packages/select/index.ts b/packages/select/index.ts
index 2f53d7fe4a..5da034f048 100644
--- a/packages/select/index.ts
+++ b/packages/select/index.ts
@@ -1,12 +1,8 @@
 import { App } from 'vue'
-import select from './src/select.vue'
-import optionGroup from './src/option-group.vue'
-import option from './src/option.vue'
+import Select from './src/select.vue'
 
-export default (app: App): void => {
-  app.component(select.name, select)
-  app.component(optionGroup.name, optionGroup)
-  app.component(option.name, option)
+Select.install = (app: App): void => {
+  app.component(Select.name, Select)
 }
 
-export { select, optionGroup, option }
+export default Select
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 0e3615f18c..78d864a144 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -179,12 +179,12 @@ import {
   reactive,
   provide,
 } from 'vue'
-import { Input as ElInput } from '@element-plus/input'
+import ElInput from '@element-plus/input'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
-import { Tag as ElTag } from '@element-plus/tag'
-import { Popper as ElPopper } from '@element-plus/popper'
-import { Scrollbar as ElScrollbar } from '@element-plus/scrollbar'
+import ElTag from '@element-plus/tag'
+import ElPopper from '@element-plus/popper'
+import ElScrollbar from '@element-plus/scrollbar'
 import { ClickOutside } from '@element-plus/directives'
 import { addResizeListener, removeResizeListener } from '@element-plus/utils/resize-event'
 import { t } from '@element-plus/locale'
diff --git a/packages/slider/index.ts b/packages/slider/index.ts
index eb1784df62..49ad0a8a30 100644
--- a/packages/slider/index.ts
+++ b/packages/slider/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Slider from './src/index.vue'
 
-export default (app: App): void => {
+Slider.install = (app: App): void => {
   app.component(Slider.name, Slider)
 }
 
-export { Slider }
+export default Slider
diff --git a/packages/slider/src/button.vue b/packages/slider/src/button.vue
index 4968436469..67b9db0f78 100644
--- a/packages/slider/src/button.vue
+++ b/packages/slider/src/button.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { Tooltip as ElTooltip } from '@element-plus/tooltip'
+import ElTooltip from '@element-plus/tooltip'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { defineComponent, reactive, toRefs } from 'vue'
 import { useSliderButton } from './useSliderButton'
diff --git a/packages/slider/src/index.vue b/packages/slider/src/index.vue
index 51d3238223..9a9ada406c 100644
--- a/packages/slider/src/index.vue
+++ b/packages/slider/src/index.vue
@@ -96,7 +96,7 @@ import {
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
 import { off, on } from '@element-plus/utils/dom'
 import throwError from '@element-plus/utils/error'
-import { InputNumber as ElInputNumber } from '@element-plus/input-number'
+import ElInputNumber from '@element-plus/input-number'
 import SliderButton from './button.vue'
 import SliderMarker from './marker.vue'
 import { useMarks } from './useMarks'
diff --git a/packages/step/index.ts b/packages/step/index.ts
new file mode 100644
index 0000000000..1b652b45c2
--- /dev/null
+++ b/packages/step/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Step from '../steps/src/item.vue'
+
+Step.install = (app: App): void => {
+  app.component(Step.name, Step)
+}
+
+export default Step
diff --git a/packages/step/package.json b/packages/step/package.json
new file mode 100644
index 0000000000..62f406ecd5
--- /dev/null
+++ b/packages/step/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/step",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/steps/index.ts b/packages/steps/index.ts
index 42ccbdcbeb..157589ca87 100644
--- a/packages/steps/index.ts
+++ b/packages/steps/index.ts
@@ -1,10 +1,8 @@
 import { App } from 'vue'
 import Steps from './src/index.vue'
-import Step from './src/item.vue'
 
-export default (app: App): void => {
+Steps.install = (app: App): void => {
   app.component(Steps.name, Steps)
-  app.component(Step.name, Step)
 }
 
-export { Steps, Step }
+export default Steps
diff --git a/packages/submenu/index.ts b/packages/submenu/index.ts
new file mode 100644
index 0000000000..3cae1f7cda
--- /dev/null
+++ b/packages/submenu/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Submenu from '../menu/src/submenu.vue'
+
+Submenu.install = (app: App): void => {
+  app.component(Submenu.name, Submenu)
+}
+
+export default Submenu
diff --git a/packages/submenu/package.json b/packages/submenu/package.json
new file mode 100644
index 0000000000..a273a9a7c5
--- /dev/null
+++ b/packages/submenu/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/submenu",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/switch/index.ts b/packages/switch/index.ts
index 6be211da31..a8a65be4d7 100644
--- a/packages/switch/index.ts
+++ b/packages/switch/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Switch from './src/index.vue'
 
-export default (app: App): void => {
+Switch.install = (app: App): void => {
   app.component(Switch.name, Switch)
 }
 
-export { Switch }
+export default Switch
diff --git a/packages/tab-pane/index.ts b/packages/tab-pane/index.ts
new file mode 100644
index 0000000000..300e640269
--- /dev/null
+++ b/packages/tab-pane/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import TabPane from '../tabs/src/tab-pane.vue'
+
+TabPane.install = (app: App): void => {
+  app.component(TabPane.name, TabPane)
+}
+
+export default TabPane
diff --git a/packages/tab-pane/package.json b/packages/tab-pane/package.json
new file mode 100644
index 0000000000..32de729c1d
--- /dev/null
+++ b/packages/tab-pane/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/tab-pane",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/table-column/index.ts b/packages/table-column/index.ts
new file mode 100644
index 0000000000..c10125e23d
--- /dev/null
+++ b/packages/table-column/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import TableColumn from '../table/src/tableColumn'
+
+TableColumn.install = (app: App): void => {
+  app.component(TableColumn.name, TableColumn)
+}
+
+export default TableColumn
diff --git a/packages/table-column/package.json b/packages/table-column/package.json
new file mode 100644
index 0000000000..3656cec936
--- /dev/null
+++ b/packages/table-column/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/table-column",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/table/index.ts b/packages/table/index.ts
index ebca268c0d..811d807b27 100644
--- a/packages/table/index.ts
+++ b/packages/table/index.ts
@@ -1,10 +1,8 @@
 import { App } from 'vue'
 import Table from './src/table.vue'
-import TableColumn from './src/tableColumn'
 
-export default (app: App): void => {
+Table.install = (app: App): void => {
   app.component(Table.name, Table)
-  app.component(TableColumn.name, TableColumn)
 }
 
-export { Table, TableColumn }
+export default Table
diff --git a/packages/table/src/config.ts b/packages/table/src/config.ts
index fce1596543..f9485e962c 100644
--- a/packages/table/src/config.ts
+++ b/packages/table/src/config.ts
@@ -1,5 +1,5 @@
 import { getPropByPath } from '@element-plus/utils/util'
-import { Checkbox as ElCheckbox } from '@element-plus/checkbox'
+import ElCheckbox from '@element-plus/checkbox'
 import { h } from 'vue'
 import { Store, TreeNode, AnyObject, TableColumnCtx } from './table'
 
diff --git a/packages/table/src/filter-panel.vue b/packages/table/src/filter-panel.vue
index d4cc4c7b37..fe33ce4bf0 100644
--- a/packages/table/src/filter-panel.vue
+++ b/packages/table/src/filter-panel.vue
@@ -84,10 +84,11 @@
 </template>
 
 <script lang='ts'>
-import { Popper as ElPopper } from '@element-plus/popper'
+import ElPopper from '@element-plus/popper'
 import { t } from '@element-plus/locale'
-import { Checkbox as ElCheckbox, CheckboxGroup as ElCheckboxGroup } from '@element-plus/checkbox'
-import { Scrollbar as ElScrollbar } from '@element-plus/scrollbar'
+import ElCheckbox from '@element-plus/checkbox'
+import ElCheckboxGroup from '@element-plus/checkbox-group'
+import ElScrollbar from '@element-plus/scrollbar'
 import {
   ref,
   computed,
diff --git a/packages/table/src/table-body/index.ts b/packages/table/src/table-body/index.ts
index 800e39deaa..d1a3ec9f4d 100644
--- a/packages/table/src/table-body/index.ts
+++ b/packages/table/src/table-body/index.ts
@@ -1,4 +1,4 @@
-import { Tooltip as ElTooltip } from '@element-plus/tooltip'
+import ElTooltip from '@element-plus/tooltip'
 import { addClass, removeClass } from '@element-plus/utils/dom'
 import isServer from '@element-plus/utils/isServer'
 import { defineComponent, getCurrentInstance, h, PropType, watch } from 'vue'
diff --git a/packages/table/src/table-column/index.ts b/packages/table/src/table-column/index.ts
index 12ae2a0283..adaf245824 100644
--- a/packages/table/src/table-column/index.ts
+++ b/packages/table/src/table-column/index.ts
@@ -9,7 +9,7 @@ import {
 } from 'vue'
 import { cellStarts } from '../config'
 import { mergeOptions, compose } from '../util'
-import { Checkbox as ElCheckbox } from '@element-plus/checkbox'
+import ElCheckbox from '@element-plus/checkbox'
 import { TableColumnCtx, TableColumn } from '../table'
 import useWatcher from './watcher-helper'
 import useRender from './render-helper'
diff --git a/packages/table/src/table-header/index.ts b/packages/table/src/table-header/index.ts
index a414975cc0..1af3cc0930 100644
--- a/packages/table/src/table-header/index.ts
+++ b/packages/table/src/table-header/index.ts
@@ -7,7 +7,7 @@ import {
   ref,
   h,
 } from 'vue'
-import { Checkbox as ElCheckbox } from '@element-plus/checkbox'
+import ElCheckbox from '@element-plus/checkbox'
 import FilterPanel from '../filter-panel.vue'
 import useLayoutObserver from '../layout-observer'
 import useEvent from './event-helper'
diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts
index 181361543e..b7cf3d7948 100644
--- a/packages/tabs/index.ts
+++ b/packages/tabs/index.ts
@@ -1,14 +1,8 @@
 import { App } from 'vue'
 import Tabs from './src/tabs.vue'
-import TabBar from './src/tab-bar.vue'
-import TabNav from './src/tab-nav.vue'
-import TabPane from './src/tab-pane.vue'
 
-export default (app: App): void => {
+Tabs.install = (app: App): void => {
   app.component(Tabs.name, Tabs)
-  app.component(TabBar.name, TabBar)
-  app.component(TabNav.name, TabNav)
-  app.component(TabPane.name, TabPane)
 }
 
-export { Tabs, TabBar, TabNav, TabPane }
+export default Tabs
diff --git a/packages/tag/index.ts b/packages/tag/index.ts
index 93682d7615..c338bb5dd0 100644
--- a/packages/tag/index.ts
+++ b/packages/tag/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Tag from './src/index.vue'
 
-export default (app: App): void => {
+Tag.install = (app: App): void => {
   app.component(Tag.name, Tag)
 }
 
-export { Tag }
+export default Tag
diff --git a/packages/time-picker/index.ts b/packages/time-picker/index.ts
index aeac9d2504..d2efa97489 100644
--- a/packages/time-picker/index.ts
+++ b/packages/time-picker/index.ts
@@ -1,10 +1,9 @@
 import { App } from 'vue'
 import TimePicker from './src/time-picker'
-import TimePickPanel from './src/time-picker-com/panel-time-pick.vue'
 export * from './src/common/date-utils'
 
-export default (app: App): void => {
+TimePicker.install = (app: App): void => {
   app.component(TimePicker.name, TimePicker)
 }
 
-export { TimePicker, TimePickPanel }
+export default TimePicker
diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue
index d3e40d1ecc..bbb1ea7a70 100644
--- a/packages/time-picker/src/common/picker.vue
+++ b/packages/time-picker/src/common/picker.vue
@@ -126,8 +126,8 @@ import {
 } from 'vue'
 import dayjs from 'dayjs'
 import { ClickOutside } from '@element-plus/directives'
-import { Input as ElInput } from '@element-plus/input'
-import { Popper as ElPopper } from '@element-plus/popper'
+import ElInput from '@element-plus/input'
+import ElPopper from '@element-plus/popper'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
diff --git a/packages/time-picker/src/time-picker-com/basic-time-spinner.vue b/packages/time-picker/src/time-picker-com/basic-time-spinner.vue
index 6e309146bb..079a32be4a 100644
--- a/packages/time-picker/src/time-picker-com/basic-time-spinner.vue
+++ b/packages/time-picker/src/time-picker-com/basic-time-spinner.vue
@@ -64,7 +64,7 @@ import {
 } from 'vue'
 import { Dayjs } from 'dayjs'
 import { RepeatClick } from '@element-plus/directives'
-import { Scrollbar as ElScrollbar } from '@element-plus/scrollbar'
+import ElScrollbar from '@element-plus/scrollbar'
 import { getTimeLists } from './useTimePicker'
 
 export default defineComponent({
diff --git a/packages/time-picker/src/time-picker.ts b/packages/time-picker/src/time-picker.ts
index aac1fae872..40bfc23003 100644
--- a/packages/time-picker/src/time-picker.ts
+++ b/packages/time-picker/src/time-picker.ts
@@ -10,6 +10,7 @@ dayjs.extend(customParseFormat)
 
 export default {
   name: 'ElTimePicker',
+  install: null,
   props: {
     isRange: {
       type: Boolean,
diff --git a/packages/time-select/index.ts b/packages/time-select/index.ts
index d9823ce289..35106c337c 100644
--- a/packages/time-select/index.ts
+++ b/packages/time-select/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import TimeSelect from './src/time-select.vue'
 
-export default (app: App): void => {
+TimeSelect.install = (app: App): void => {
   app.component(TimeSelect.name, TimeSelect)
 }
 
-export { TimeSelect }
+export default TimeSelect
diff --git a/packages/time-select/src/time-select.vue b/packages/time-select/src/time-select.vue
index 82758c5898..996fa2a1f5 100644
--- a/packages/time-select/src/time-select.vue
+++ b/packages/time-select/src/time-select.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue'
-import { select as ElSelect } from '@element-plus/select'
+import ElSelect from '@element-plus/select'
 interface Time {
   hours: number
   minutes: number
diff --git a/packages/timeline-item/index.ts b/packages/timeline-item/index.ts
new file mode 100644
index 0000000000..0916c35701
--- /dev/null
+++ b/packages/timeline-item/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import TimelineItem from '../timeline/src/item.vue'
+
+TimelineItem.install = (app: App): void => {
+  app.component(TimelineItem.name, TimelineItem)
+}
+
+export default TimelineItem
diff --git a/packages/timeline-item/package.json b/packages/timeline-item/package.json
new file mode 100644
index 0000000000..13f0dac9f8
--- /dev/null
+++ b/packages/timeline-item/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/timeline-item",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}
diff --git a/packages/timeline/index.ts b/packages/timeline/index.ts
index 71f7e17485..da063b2013 100644
--- a/packages/timeline/index.ts
+++ b/packages/timeline/index.ts
@@ -1,10 +1,8 @@
 import { App } from 'vue'
 import Timeline from './src/index.vue'
-import TimelineItem from './src/item.vue'
 
-export default (app: App): void => {
+Timeline.install = (app: App): void => {
   app.component(Timeline.name, Timeline)
-  app.component(TimelineItem.name, TimelineItem)
 }
 
-export { Timeline, TimelineItem }
+export default Timeline
diff --git a/packages/tooltip/index.ts b/packages/tooltip/index.ts
index b52f0049c9..8c639109b0 100644
--- a/packages/tooltip/index.ts
+++ b/packages/tooltip/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Tooltip from './src/index'
 
-export default (app: App): void => {
+Tooltip.install = (app: App): void => {
   app.component(Tooltip.name, Tooltip)
 }
 
-export { Tooltip }
+export default Tooltip
diff --git a/packages/tooltip/src/index.ts b/packages/tooltip/src/index.ts
index 3e3535c5b9..f4c1e8b478 100644
--- a/packages/tooltip/src/index.ts
+++ b/packages/tooltip/src/index.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, ref } from 'vue'
-import { Popper as ElPopper } from '@element-plus/popper'
+import ElPopper from '@element-plus/popper'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import throwError from '@element-plus/utils/error'
 
diff --git a/packages/transfer/index.ts b/packages/transfer/index.ts
index 001d7ce02d..63e187ada0 100644
--- a/packages/transfer/index.ts
+++ b/packages/transfer/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Transfer from './src/index.vue'
 
-export default (app: App): void => {
+Transfer.install = (app: App): void => {
   app.component(Transfer.name, Transfer)
 }
 
-export { Transfer }
+export default Transfer
diff --git a/packages/transfer/src/index.vue b/packages/transfer/src/index.vue
index c5521056bc..5920be38c9 100644
--- a/packages/transfer/src/index.vue
+++ b/packages/transfer/src/index.vue
@@ -59,7 +59,7 @@ import {
   reactive, ref, toRefs, watch,
 } from 'vue'
 import { t } from '@element-plus/locale'
-import { Button as ElButton } from '@element-plus/button'
+import ElButton from '@element-plus/button'
 import TransferPanel from './transfer-panel.vue'
 import { useComputedData } from './useComputedData'
 import { useCheckedChange } from './useCheckedChange'
diff --git a/packages/transfer/src/transfer-panel.vue b/packages/transfer/src/transfer-panel.vue
index f7f8798783..6a12e0daef 100644
--- a/packages/transfer/src/transfer-panel.vue
+++ b/packages/transfer/src/transfer-panel.vue
@@ -61,8 +61,9 @@
 <script lang="ts">
 import { computed, defineComponent, reactive, toRefs } from 'vue'
 import { t } from '@element-plus/locale'
-import { CheckboxGroup as ElCheckboxGroup, Checkbox as ElCheckbox } from '@element-plus/checkbox'
-import { Input as ElInput } from '@element-plus/input'
+import ElCheckbox from '@element-plus/checkbox'
+import ElCheckboxGroup from '@element-plus/checkbox-group'
+import ElInput from '@element-plus/input'
 import { useCheck } from './useCheck'
 
 export const CHECKED_CHANGE_EVENT = 'checked-change'
diff --git a/packages/tree/index.ts b/packages/tree/index.ts
index 26b85a96f3..1c11a7d484 100644
--- a/packages/tree/index.ts
+++ b/packages/tree/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Tree from './src/tree.vue'
 
-export default (app: App): void => {
+Tree.install = (app: App): void => {
   app.component(Tree.name, Tree)
 }
 
-export { Tree }
+export default Tree
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index 244864b0a8..d85b161efb 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -78,7 +78,7 @@
 <script lang='ts'>
 import { defineComponent, getCurrentInstance, ref, watch, nextTick, inject, provide, PropType, ComponentInternalInstance } from 'vue'
 import ElCollapseTransition from '@element-plus/transition/collapse-transition/index.vue'
-import { Checkbox as ElCheckbox } from '@element-plus/checkbox'
+import ElCheckbox from '@element-plus/checkbox'
 import NodeContent from './tree-node-content.vue'
 import { getNodeKey as getNodeKeyUtil } from './model/util'
 import { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'
diff --git a/packages/upload/index.ts b/packages/upload/index.ts
index f12d334e2c..7d253ddfbe 100644
--- a/packages/upload/index.ts
+++ b/packages/upload/index.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue'
 import Upload from './src/index.vue'
 
-export default (app: App): void => {
+Upload.install = (app: App): void => {
   app.component(Upload.name, Upload)
 }
 
-export { Upload }
+export default Upload
diff --git a/packages/upload/src/upload-list.vue b/packages/upload/src/upload-list.vue
index 393242e3e6..bfda7b9eb6 100644
--- a/packages/upload/src/upload-list.vue
+++ b/packages/upload/src/upload-list.vue
@@ -72,13 +72,13 @@ import { defineComponent, ref } from 'vue'
 import { NOOP } from '@vue/shared'
 
 import { t } from '@element-plus/locale'
-import { Progress } from '@element-plus/progress'
+import ElProgress from '@element-plus/progress'
 
 import type { PropType } from 'vue'
 
 export default defineComponent({
   name: 'ElUploadList',
-  components: { ElProgress: Progress },
+  components: { ElProgress },
   props: {
     files: {
       type: Array as PropType<File[]>,
diff --git a/scripts/gc.sh b/scripts/gc.sh
index 9fe196dc0b..b915c15b92 100755
--- a/scripts/gc.sh
+++ b/scripts/gc.sh
@@ -52,9 +52,12 @@ EOF
 cat <<EOF >"$DIRNAME/index.ts"
 import { App } from 'vue'
 import ${NAME} from './src/index.vue'
-export default (app: App): void => {
+
+${NAME}.install = (app: App): void => {
   app.component(${NAME}.name, ${NAME})
 }
+
+export default ${NAME}
 EOF
 
 cat > $DIRNAME/package.json <<EOF