docs: update import doc

2025-04-18 16:50:38 +08:00 · 2020-11-23 16:28:06 +08:00 · 2020-11-23 16:28:06 +08:00 · fcc5ea27d3
commit fcc5ea27d3
parent 8a64310e3f
37 changed files with 1101 additions and 1016 deletions
--- a/packages/element-plus/index.ts
+++ b/packages/element-plus/index.ts
@ -165,6 +165,10 @@ const components = [
  ElTabPane,
  ElTable,
  ElTableColumn,
+  ElTabs,
+  ElTag,
+  ElTimePicker,
+  ElTimeSelect,
  ElTimeline,
  ElTimelineItem,
  ElTooltip,
@ -179,10 +183,6 @@ const plugins = [
  ElMessage,
  ElMessageBox,
  ElNotification,
-  ElTabs,
-  ElTag,
-  ElTimePicker,
-  ElTimeSelect,
 ]

 const install = (app: App, opt: InstallOptions): void => {
--- a/packages/theme-chalk/gulpfile.js
+++ b/packages/theme-chalk/gulpfile.js
@ -6,7 +6,7 @@ const autoprefixer = require('gulp-autoprefixer')
 const cssmin = require('gulp-cssmin')
 const rename = require('gulp-rename')

-const noElPrefixFile = /(index|base)/
+const noElPrefixFile = /(index|base|display)/

 function compile() {
  return src('./src/*.scss')
--- a/website/docs/en-US/i18n.md
+++ b/website/docs/en-US/i18n.md
@ -14,7 +14,7 @@ Or if you are importing Element Plus on demand:

 ```javascript
 import Vue from 'vue'
-import { Button, Select } from 'element-plus'
+import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import locale from 'element-plus/lib/locale'

@ -22,8 +22,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // import components
-Vue.component(Button.name, Button)
-Vue.component(Select.name, Select)
+Vue.component(ElButton.name, ElButton)
+Vue.component(ElSelect.name, ElSelect)
 ```

 The English language is imported by default, even if you're using another language. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:
--- a/website/docs/en-US/loading.md
+++ b/website/docs/en-US/loading.md
@ -173,28 +173,28 @@ Show a full screen animation while loading data.
 ### Service
 You can also invoke Loading with a service. Import Loading service:
 ```javascript
-import { Loading } from 'element-plus';
+import { ElLoading } from 'element-plus';
 ```
 Invoke it:
 ```javascript
-Loading.service(options);
+ElLoading.service(options);
 ```
 The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
 ```javascript
-let loadingInstance = Loading.service(options);
+let loadingInstance = ElLoading.service(options);
 this.$nextTick(() => { // Loading should be closed asynchronously
  loadingInstance.close();
 });
 ```
 Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
 ```javascript
-let loadingInstance1 = Loading.service({ fullscreen: true });
-let loadingInstance2 = Loading.service({ fullscreen: true });
+let loadingInstance1 = ElLoading.service({ fullscreen: true });
+let loadingInstance2 = ElLoading.service({ fullscreen: true });
 console.log(loadingInstance1 === loadingInstance2); // true
 ```
 Calling the `close` method on any one of them can close this full screen Loading.

-If Element Plus is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
+If Element Plus is imported entirely, a globally method `$loading` will be registered to `app.config.globalProperties`. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.

 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
--- a/website/docs/en-US/message-box.md
+++ b/website/docs/en-US/message-box.md
@ -278,7 +278,7 @@ Content of MessageBox can be centered.

 ### Global method

-If Element Plus is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
+If Element Plus is fully imported, it will add the following global methods for `app.config.globalProperties`: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
 - `$msgbox(options)`
 - `$alert(message, title, options)` or `$alert(message, options)`
 - `$confirm(message, title, options)` or `$confirm(message, options)`
@ -289,10 +289,10 @@ If Element Plus is fully imported, it will add the following global methods for
 If you prefer importing `MessageBox` on demand:

 ```javascript
-import { MessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 ```

-The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.
+The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageBox.confirm` and `ElMessageBox.prompt`. The parameters are the same as above.

 ### Options

--- a/website/docs/en-US/message.md
+++ b/website/docs/en-US/message.md
@ -187,17 +187,15 @@ Although `message` property supports HTML strings, dynamically rendering arbitra

 ### Global method

-Element Plus has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.
+Element Plus has added a global method `$message` for `app.config.globalProperties`. So in a vue instance you can call `Message` like what we did in this page.

 ### Local import

-Import `Message`:
-
 ```javascript
-import { Message } from 'element-plus';
+import { ElMessage } from 'element-plus';
 ```

-In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`. You can call `Message.closeAll()` to manually close all the instances.
+In this case you should call `ElMessage(options)`. We have also registered methods for different types, e.g. `ElMessage.success(options)`. You can call `ElMessage.closeAll()` to manually close all the instances.

 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
--- a/website/docs/en-US/notification.md
+++ b/website/docs/en-US/notification.md
@ -275,17 +275,15 @@ It is possible to hide the close button

 ### Global method

-Element Plus has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
+Element Plus has added a global method `$notify` for `app.config.globalProperties`. So in a vue instance you can call `Notification` like what we did in this page.

 ### Local import

-Import `Notification`:
-
 ```javascript
-import { Notification } from 'element-plus';
+import { ElNotification } from 'element-plus';
 ```

-In this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`. You can call `Notification.closeAll()` to manually close all the instances.
+In this case you should call `ElNotification(options)`. We have also registered methods for different types, e.g. `ElNotification.success(options)`. You can call `ElNotification.closeAll()` to manually close all the instances.

 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
--- a/website/docs/en-US/quickstart.md
+++ b/website/docs/en-US/quickstart.md
@ -21,7 +21,7 @@ You can import ElementPlus entirely, or just import what you need. Let's start w
 In main.js:

 ```javascript
-import { createApp, Vue } from 'vue'
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import App from './App.vue';
@ -47,7 +47,6 @@ Then edit .babelrc:

 ```json
 {
-  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
@ -63,190 +62,207 @@ Then edit .babelrc:
 Next, if you need Button and Select, edit main.js:

 ```javascript
-import Vue from 'vue';
-import { Button, Select } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';

-Vue.component(Button.name, Button);
-Vue.component(Select.name, Select);
+const app = createApp(App)
+app.component(ElButton.name, ElButton);
+app.component(ElSelect.name, ElSelect);
+
 /* or
- * Vue.use(Button)
- * Vue.use(Select)
+ * app.use(ElButton)
+ * app.use(ElSelect)
 */

-new Vue({
-  el: '#app',
-  render: h => h(App)
-});
+app.mount('#app')
 ```

-Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
+Full example (Component list [reference](https://github.com/element-plus/element-plus/tree/dev/packages))

 ```javascript
-import Vue from 'vue';
+import { createApp } from 'vue'
+import App from './App.vue';
 import {
-  Pagination,
-  Dialog,
-  Autocomplete,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Menu,
-  Submenu,
-  MenuItem,
-  MenuItemGroup,
-  Input,
-  InputNumber,
-  Radio,
-  RadioGroup,
-  RadioButton,
-  Checkbox,
-  CheckboxButton,
-  CheckboxGroup,
-  Switch,
-  Select,
-  Option,
-  OptionGroup,
-  Button,
-  ButtonGroup,
-  Table,
-  TableColumn,
-  DatePicker,
-  TimeSelect,
-  TimePicker,
-  Popover,
-  Tooltip,
-  Breadcrumb,
-  BreadcrumbItem,
-  Form,
-  FormItem,
-  Tabs,
-  TabPane,
-  Tag,
-  Tree,
-  Alert,
-  Slider,
-  Icon,
-  Row,
-  Col,
-  Upload,
-  Progress,
-  Spinner,
-  Badge,
-  Card,
-  Rate,
-  Steps,
-  Step,
-  Carousel,
-  CarouselItem,
-  Collapse,
-  CollapseItem,
-  Cascader,
-  ColorPicker,
-  Transfer,
-  Container,
-  Header,
-  Aside,
-  Main,
-  Footer,
-  Timeline,
-  TimelineItem,
-  Link,
-  Divider,
-  Image,
-  Calendar,
-  Backtop,
-  PageHeader,
-  CascaderPanel,
-  Loading,
-  MessageBox,
-  Message,
-  Notification
+  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,
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
 } from 'element-plus';

-Vue.use(Pagination);
-Vue.use(Dialog);
-Vue.use(Autocomplete);
-Vue.use(Dropdown);
-Vue.use(DropdownMenu);
-Vue.use(DropdownItem);
-Vue.use(Menu);
-Vue.use(Submenu);
-Vue.use(MenuItem);
-Vue.use(MenuItemGroup);
-Vue.use(Input);
-Vue.use(InputNumber);
-Vue.use(Radio);
-Vue.use(RadioGroup);
-Vue.use(RadioButton);
-Vue.use(Checkbox);
-Vue.use(CheckboxButton);
-Vue.use(CheckboxGroup);
-Vue.use(Switch);
-Vue.use(Select);
-Vue.use(Option);
-Vue.use(OptionGroup);
-Vue.use(Button);
-Vue.use(ButtonGroup);
-Vue.use(Table);
-Vue.use(TableColumn);
-Vue.use(DatePicker);
-Vue.use(TimeSelect);
-Vue.use(TimePicker);
-Vue.use(Popover);
-Vue.use(Tooltip);
-Vue.use(Breadcrumb);
-Vue.use(BreadcrumbItem);
-Vue.use(Form);
-Vue.use(FormItem);
-Vue.use(Tabs);
-Vue.use(TabPane);
-Vue.use(Tag);
-Vue.use(Tree);
-Vue.use(Alert);
-Vue.use(Slider);
-Vue.use(Icon);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Upload);
-Vue.use(Progress);
-Vue.use(Spinner);
-Vue.use(Badge);
-Vue.use(Card);
-Vue.use(Rate);
-Vue.use(Steps);
-Vue.use(Step);
-Vue.use(Carousel);
-Vue.use(CarouselItem);
-Vue.use(Collapse);
-Vue.use(CollapseItem);
-Vue.use(Cascader);
-Vue.use(ColorPicker);
-Vue.use(Transfer);
-Vue.use(Container);
-Vue.use(Header);
-Vue.use(Aside);
-Vue.use(Main);
-Vue.use(Footer);
-Vue.use(Timeline);
-Vue.use(TimelineItem);
-Vue.use(Link);
-Vue.use(Divider);
-Vue.use(Image);
-Vue.use(Calendar);
-Vue.use(Backtop);
-Vue.use(PageHeader);
-Vue.use(CascaderPanel);
+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,
+  ElTabs,
+  ElTag,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElUpload,
+]

-Vue.use(Loading.directive);
+const plugins = [
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+]

-Vue.prototype.$loading = Loading.service;
-Vue.prototype.$msgbox = MessageBox;
-Vue.prototype.$alert = MessageBox.alert;
-Vue.prototype.$confirm = MessageBox.confirm;
-Vue.prototype.$prompt = MessageBox.prompt;
-Vue.prototype.$notify = Notification;
-Vue.prototype.$message = Message;
+const app = createApp(App)
+
+components.forEach(component => {
+  app.component(component.name, component)
+})
+
+plugins.forEach(plugin => {
+  app.use(plugin)
+})
 ```

 ### Global config
@ -256,19 +272,24 @@ When importing Element, you can define a global config object. For now this obje
 Fully import Element：

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
-Vue.use(Element, { size: 'small', zIndex: 3000 });
+import App from './App.vue';
+
+const app = createApp(App)
+app.use(ElementPlus, { size: 'small', zIndex: 3000 });
 ```

 Partial import Element：

 ```js
-import Vue from 'vue';
-import { Button } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton } from 'element-plus';
+import App from './App.vue';

-Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
-Vue.use(Button);
+const app = createApp(App)
+app.config.globalProperties.$ELEMENT = option
+app.use(ElButton);
 ```

 With the above config, the default size of all components that have size attribute will be 'small', and the initial z-index of modal boxes is 3000.
--- a/website/docs/en-US/transition.md
+++ b/website/docs/en-US/transition.md
@ -148,8 +148,8 @@ For collapse effect, use the `el-collapse-transition` component.
 // fade/zoom
 import 'element-plus/lib/theme-chalk/base.css';
 // collapse
-import CollapseTransition from 'element-plus/lib/transitions/collapse-transition';
+import { ElCollapseTransition } from 'element-plus';
 import Vue from 'vue'

-Vue.component(CollapseTransition.name, CollapseTransition)
+Vue.component(ElCollapseTransition.name, ElCollapseTransition)
 ```
--- a/website/docs/es/i18n.md
+++ b/website/docs/es/i18n.md
@ -14,7 +14,7 @@ O si está importando Element Plus a petición:

 ```javascript
 import Vue from 'vue'
-import { Button, Select } from 'element-plus'
+import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/es'
 import locale from 'element-plus/lib/locale'

@ -22,8 +22,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // import components
-Vue.component(Button.name, Button)
-Vue.component(Select.name, Select)
+Vue.component(ElButton.name, ElButton)
+Vue.component(ElSelect.name, ElSelect)
 ```

 El paquete de idioma inglés se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada:
--- a/website/docs/es/loading.md
+++ b/website/docs/es/loading.md
@ -175,26 +175,26 @@ Muestra una animación de pantalla completa mientras se cargan los datos
 Puede invocar el componente con un servicio. Importe el servicio:

 ```javascript
-import { Loading } from 'element-plus';
+import { ElLoading } from 'element-plus';
 ```
 Invocar:
 ```javascript
-Loading.service(options);
+ElLoading.service(options);
 ```
 El parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y puede cerrarlo invocando el método `close`:
 ```javascript
-let loadingInstance = Loading.service(options);
+let loadingInstance = ElLoading.service(options);
 loadingInstance.close();
 ```
 Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:
 ```javascript
-let loadingInstance1 = Loading.service({ fullscreen: true });
-let loadingInstance2 = Loading.service({ fullscreen: true });
+let loadingInstance1 = ElLoading.service({ fullscreen: true });
+let loadingInstance2 = ElLoading.service({ fullscreen: true });
 console.log(loadingInstance1 === loadingInstance2); // true
 ```
 Llamar al método `close` en cualquiera de estas puede cerrarlo.

-Si Element Plus es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puede invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.
+Si Element Plus es importado completamente, un método global `$loading` puede ser registrado a `app.config.globalProperties`. Puede invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.

 ### Options
 | Atributo    | Descripción                              | Tipo          | Valores aceptados | Por defecto   |
--- a/website/docs/es/message-box.md
+++ b/website/docs/es/message-box.md
@ -282,7 +282,7 @@ El contenido del componente MessageBox puede ser centrado.

 ### Métodos Globales

-Si Element Plus fue importado completamente, agregara los siguientes métodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Así que en una instancia de Vue puedes llamar el método `MessageBox` como lo que hicimos en esta pagina. Los parámetros son:
+Si Element Plus fue importado completamente, agregara los siguientes métodos globales para `app.config.globalProperties`: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Así que en una instancia de Vue puedes llamar el método `MessageBox` como lo que hicimos en esta pagina. Los parámetros son:
 - `$msgbox(options)`
 - `$alert(message, title, options)` or `$alert(message, options)`
 - `$confirm(message, title, options)` or `$confirm(message, options)`
@ -293,10 +293,10 @@ Si Element Plus fue importado completamente, agregara los siguientes métodos gl
 Si prefieres importar `MessageBox` cuando lo necesites (on demand):

 ```javascript
-import { MessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 ```

-Los métodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parámetros son los mismos que los anteriores.
+Los métodos correspondientes: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageBox.confirm` y `ElMessageBox.prompt`. Los parámetros son los mismos que los anteriores.

 ### Opciones

--- a/website/docs/es/message.md
+++ b/website/docs/es/message.md
@ -187,17 +187,15 @@ Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente ren

 ### Métodos Globales

-Element Plus ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.
+Element Plus ha agregado un método global llamado `$message` para `app.config.globalProperties`. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.

 ### Importación local

-Import `Message`:
-
 ```javascript
-import { Message } from 'element-plus';
+import { ElMessage } from 'element-plus';
 ```

-En este caso debería llamar al método `Message(options)`. También se han registrado métodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al método `Message.closeAll()` para cerrar manualmente todas las instancias.
+En este caso debería llamar al método `ElMessage(options)`. También se han registrado métodos para los diferentes tipos, e.g. `ElMessage.success(options)`. Puede llamar al método `ElMessage.closeAll()` para cerrar manualmente todas las instancias.

 ### Options
 | Atributo                 | Descripcion                              | Tipo           | Valores permitidos         | Por defecto |
--- a/website/docs/es/notification.md
+++ b/website/docs/es/notification.md
@ -282,17 +282,15 @@ Es posible ocultar el botón de cerrar

 ### Método global

-Element Plus ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.
+Element Plus ha añadido un método global `$notify` para `app.config.globalProperties`. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.

 ### Importar localmente

-Importar `Notification`:
-
 ```javascript
-import { Notification } from 'element-plus';
+import { ElNotification } from 'element-plus';
 ```

-En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al método `Notification.closeAll()` para cerrar manualmente todas las instancias.
+En este caso, debe llamar a `ElNotification(options)`. También se han registrado métodos para diferentes tipos, e.j. `ElNotification.success(options)`. Puede llamar al método `ElNotification.closeAll()` para cerrar manualmente todas las instancias.

 ### Opciones
 | Atributo                 | Descripción                                                  | Tipo             | Valores aceptados                           | Por defecto |
--- a/website/docs/es/quickstart.md
+++ b/website/docs/es/quickstart.md
@ -21,7 +21,7 @@ Puede importar Element Plus completamente o solamente importar lo que necesite.
 En main.js:

 ```javascript
-import { createApp, Vue } from 'vue'
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import App from './App.vue';
@ -47,7 +47,6 @@ Luego edite .babelrc:

 ```json
 {
-  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
@ -63,190 +62,207 @@ Luego edite .babelrc:
 Luego, si necesita Button y Select, edite main.js:

 ```javascript
-import Vue from 'vue';
-import { Button, Select } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';

-Vue.component(Button.name, Button);
-Vue.component(Select.name, Select);
+const app = createApp(App)
+app.component(ElButton.name, ElButton);
+app.component(ElSelect.name, ElSelect);
+
 /* or
- * Vue.use(Button)
- * Vue.use(Select)
+ * app.use(ElButton)
+ * app.use(ElSelect)
 */

-new Vue({
-  el: '#app',
-  render: h => h(App)
-});
+app.mount('#app')
 ```

-Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
+Ejemplo completo (Referencia completa de componentes [reference](https://github.com/element-plus/element-plus/tree/dev/packages))

 ```javascript
-import Vue from 'vue';
+import { createApp } from 'vue'
+import App from './App.vue';
 import {
-  Pagination,
-  Dialog,
-  Autocomplete,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Menu,
-  Submenu,
-  MenuItem,
-  MenuItemGroup,
-  Input,
-  InputNumber,
-  Radio,
-  RadioGroup,
-  RadioButton,
-  Checkbox,
-  CheckboxButton,
-  CheckboxGroup,
-  Switch,
-  Select,
-  Option,
-  OptionGroup,
-  Button,
-  ButtonGroup,
-  Table,
-  TableColumn,
-  DatePicker,
-  TimeSelect,
-  TimePicker,
-  Popover,
-  Tooltip,
-  Breadcrumb,
-  BreadcrumbItem,
-  Form,
-  FormItem,
-  Tabs,
-  TabPane,
-  Tag,
-  Tree,
-  Alert,
-  Slider,
-  Icon,
-  Row,
-  Col,
-  Upload,
-  Progress,
-  Spinner,
-  Badge,
-  Card,
-  Rate,
-  Steps,
-  Step,
-  Carousel,
-  CarouselItem,
-  Collapse,
-  CollapseItem,
-  Cascader,
-  ColorPicker,
-  Transfer,
-  Container,
-  Header,
-  Aside,
-  Main,
-  Footer,
-  Timeline,
-  TimelineItem,
-  Link,
-  Divider,
-  Image,
-  Calendar,
-  Backtop,
-  PageHeader,
-  CascaderPanel,
-  Loading,
-  MessageBox,
-  Message,
-  Notification
+  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,
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
 } from 'element-plus';

-Vue.use(Pagination);
-Vue.use(Dialog);
-Vue.use(Autocomplete);
-Vue.use(Dropdown);
-Vue.use(DropdownMenu);
-Vue.use(DropdownItem);
-Vue.use(Menu);
-Vue.use(Submenu);
-Vue.use(MenuItem);
-Vue.use(MenuItemGroup);
-Vue.use(Input);
-Vue.use(InputNumber);
-Vue.use(Radio);
-Vue.use(RadioGroup);
-Vue.use(RadioButton);
-Vue.use(Checkbox);
-Vue.use(CheckboxButton);
-Vue.use(CheckboxGroup);
-Vue.use(Switch);
-Vue.use(Select);
-Vue.use(Option);
-Vue.use(OptionGroup);
-Vue.use(Button);
-Vue.use(ButtonGroup);
-Vue.use(Table);
-Vue.use(TableColumn);
-Vue.use(DatePicker);
-Vue.use(TimeSelect);
-Vue.use(TimePicker);
-Vue.use(Popover);
-Vue.use(Tooltip);
-Vue.use(Breadcrumb);
-Vue.use(BreadcrumbItem);
-Vue.use(Form);
-Vue.use(FormItem);
-Vue.use(Tabs);
-Vue.use(TabPane);
-Vue.use(Tag);
-Vue.use(Tree);
-Vue.use(Alert);
-Vue.use(Slider);
-Vue.use(Icon);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Upload);
-Vue.use(Progress);
-Vue.use(Spinner);
-Vue.use(Badge);
-Vue.use(Card);
-Vue.use(Rate);
-Vue.use(Steps);
-Vue.use(Step);
-Vue.use(Carousel);
-Vue.use(CarouselItem);
-Vue.use(Collapse);
-Vue.use(CollapseItem);
-Vue.use(Cascader);
-Vue.use(ColorPicker);
-Vue.use(Transfer);
-Vue.use(Container);
-Vue.use(Header);
-Vue.use(Aside);
-Vue.use(Main);
-Vue.use(Footer);
-Vue.use(Timeline);
-Vue.use(TimelineItem);
-Vue.use(Link);
-Vue.use(Divider);
-Vue.use(Image);
-Vue.use(Calendar);
-Vue.use(Backtop);
-Vue.use(PageHeader);
-Vue.use(CascaderPanel);
+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,
+  ElTabs,
+  ElTag,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElUpload,
+]

-Vue.use(Loading.directive);
+const plugins = [
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+]

-Vue.prototype.$loading = Loading.service;
-Vue.prototype.$msgbox = MessageBox;
-Vue.prototype.$alert = MessageBox.alert;
-Vue.prototype.$confirm = MessageBox.confirm;
-Vue.prototype.$prompt = MessageBox.prompt;
-Vue.prototype.$notify = Notification;
-Vue.prototype.$message = Message;
+const app = createApp(App)
+
+components.forEach(component => {
+  app.component(component.name, component)
+})
+
+plugins.forEach(plugin => {
+  app.use(plugin)
+})
 ```

 ### Configuración global
@ -258,19 +274,24 @@ La propiedad `zIndex` indica el z-index inicial (por defecto: 2000) para los mod
 Importando Element Plus completamente：

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
-Vue.use(Element, { size: 'small', zIndex: 3000 });
+import App from './App.vue';
+
+const app = createApp(App)
+app.use(ElementPlus, { size: 'small', zIndex: 3000 });
 ```

 Importando Element Plus parcialmente：

 ```js
-import Vue from 'vue';
-import { Button } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton } from 'element-plus';
+import App from './App.vue';

-Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
-Vue.use(Button);
+const app = createApp(App)
+app.config.globalProperties.$ELEMENT = option
+app.use(ElButton);
 ```

 Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. El valor inicial de z-index para los modals se ha establecido a 3000.
--- a/website/docs/es/transition.md
+++ b/website/docs/es/transition.md
@ -147,8 +147,8 @@ Para efectos de colapsado usar el componente `el-collapse-transition`.
 // fade/zoom
 import 'element-plus/lib/theme-chalk/base.css';
 // colapsar
-import CollapseTransition from 'element-plus/lib/transitions/collapse-transition';
+import { ElCollapseTransition } from 'element-plus';
 import Vue from 'vue'

-Vue.component(CollapseTransition.name, CollapseTransition)
+Vue.component(ElCollapseTransition.name, ElCollapseTransition)
 ```
--- a/website/docs/fr-FR/i18n.md
+++ b/website/docs/fr-FR/i18n.md
@ -14,7 +14,7 @@ Ou si vous importez Element Plus à la demande:

 ```javascript
 import Vue from 'vue'
-import { Button, Select } from 'element-plus'
+import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/fr'
 import locale from 'element-plus/lib/locale'

@ -22,8 +22,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // importe les composants
-Vue.component(Button.name, Button)
-Vue.component(Select.name, Select)
+Vue.component(ElButton.name, ElButton)
+Vue.component(ElSelect.name, ElSelect)
 ```

 La pack de la langue Anglais est importé par défaut, même si vous configurez une autre langue. En utilisant le `NormalModuleReplacementPlugin` fournit par webpack vous pouvez remplacer la locale par défaut:
--- a/website/docs/fr-FR/loading.md
+++ b/website/docs/fr-FR/loading.md
@ -175,18 +175,18 @@ Affichez une animation en plein écran quand vous charger des données.
 Vous pouvez invoquer Loading comme un service. Importez le service Loading:

 ```javascript
-import { Loading } from 'element-plus';
+import { ElLoading } from 'element-plus';
 ```
 Et invoquer-le:

 ```javascript
-Loading.service(options);
+ElLoading.service(options);
 ```

 Le paramètre `options` correspond à la configuration de Loading (voir table suivante). `LoadingService` retourne une instance de Loading, que vous pouvez fermer en appelant la méthode `close`:

 ```javascript
-let loadingInstance = Loading.service(options);
+let loadingInstance = ElLoading.service(options);
 this.$nextTick(() => { // Loading should be closed asynchronously
  loadingInstance.close();
 });
@ -195,14 +195,14 @@ this.$nextTick(() => { // Loading should be closed asynchronously
 Notez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:

 ```javascript
-let loadingInstance1 = Loading.service({ fullscreen: true });
-let loadingInstance2 = Loading.service({ fullscreen: true });
+let loadingInstance1 = ElLoading.service({ fullscreen: true });
+let loadingInstance2 = ElLoading.service({ fullscreen: true });
 console.log(loadingInstance1 === loadingInstance2); // true
 ```

 Appeler la méthode `close` sur n'importe lequel des deux fermera le Loading.

-Si Element Plus est importé en entier, une méthode globale `$loading` sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: `this.$loading(options)` et elle retournera une instance Loading.
+Si Element Plus est importé en entier, une méthode globale `$loading` sera ajoutée à `app.config.globalProperties`. Vous pourrez l'invoquer comme ceci: `this.$loading(options)` et elle retournera une instance Loading.

 ### Options

--- a/website/docs/fr-FR/message-box.md
+++ b/website/docs/fr-FR/message-box.md
@ -280,7 +280,7 @@ le contenu de MessageBox peut être centré.

 ### Méthode globale

-Si Element Plus est importé entièrement, il ajoutera les méthodes suivantes à Vue.prototype: `$msgbox`, `$alert`, `$confirm` et `$prompt`. Dans ce cas vous pouvez appeler `MessageBox` comme nous l'avons fait dans cette page. Les paramètres sont:
+Si Element Plus est importé entièrement, il ajoutera les méthodes suivantes à `app.config.globalProperties`: `$msgbox`, `$alert`, `$confirm` et `$prompt`. Dans ce cas vous pouvez appeler `MessageBox` comme nous l'avons fait dans cette page. Les paramètres sont:
 - `$msgbox(options)`
 - `$alert(message, title, options)` ou `$alert(message, options)`
 - `$confirm(message, title, options)` ou `$confirm(message, options)`
@ -291,10 +291,10 @@ Si Element Plus est importé entièrement, il ajoutera les méthodes suivantes
 Si vous préférer importer `MessageBox` à la demande:

 ```javascript
-import { MessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 ```

-Les méthodes correspondantes sont: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` et `MessageBox.prompt`. Les paramètres sont les mêmes que précédemment.
+Les méthodes correspondantes sont: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageBox.confirm` et `ElMessageBox.prompt`. Les paramètres sont les mêmes que précédemment.

 ### Options

--- a/website/docs/fr-FR/message.md
+++ b/website/docs/fr-FR/message.md
@ -189,17 +189,15 @@ Bien que la propriété `message` supporte le HTML, générer du contenu HTML dy

 ### Méthode globale

-Element Plus ajoute une méthode `$message` à Vue.prototype. Vous pouvez donc appeler `Message` dans l'instance de Vue comme dans cette page.
+Element Plus ajoute une méthode `$message` à `app.config.globalProperties`. Vous pouvez donc appeler `Message` dans l'instance de Vue comme dans cette page.

 ### Import à la demande

-Importez `Message`:
-
 ```javascript
-import { Message } from 'element-plus';
+import { ElMessage } from 'element-plus';
 ```

-Dans ce cas il faudra appeler `Message(options)`. Les méthodes des différents types sont aussi ajoutées, e.g. `Message.success(options)`. Vous pouvez appeler `Message.closeAll()` pour fermer manuellement toutes les instances.
+Dans ce cas il faudra appeler `ElMessage(options)`. Les méthodes des différents types sont aussi ajoutées, e.g. `ElMessage.success(options)`. Vous pouvez appeler `ElMessage.closeAll()` pour fermer manuellement toutes les instances.

 ### Options

--- a/website/docs/fr-FR/notification.md
+++ b/website/docs/fr-FR/notification.md
@ -278,17 +278,15 @@ Il est possible de cacher le bouton de fermeture.

 ### Méthode globale

-Element Plus ajoute la méthode `$notify` à Vue.prototype. Vous pouvez donc appeler `Notification` dans l'instance de Vue comme nous avons fait dans cette page.
+Element Plus ajoute la méthode `$notify` à `app.config.globalProperties`. Vous pouvez donc appeler `Notification` dans l'instance de Vue comme nous avons fait dans cette page.

 ### Import à la demande

-Importez `Notification`:
-
 ```javascript
-import { Notification } from 'element-plus';
+import { ElNotification } from 'element-plus';
 ```

-Dans ce cas vous devrez appeler `Notification(options)`. Il existe aussi des méthodes pour chaque type, e.g. `Notification.success(options)`. Vous pouvez appeler `Notification.closeAll()` pour fermer manuellement toutes les instances.
+Dans ce cas vous devrez appeler `ElNotification(options)`. Il existe aussi des méthodes pour chaque type, e.g. `ElNotification.success(options)`. Vous pouvez appeler `ElNotification.closeAll()` pour fermer manuellement toutes les instances.

 ### Options

--- a/website/docs/fr-FR/quickstart.md
+++ b/website/docs/fr-FR/quickstart.md
@ -21,7 +21,7 @@ Element Plus peut être importé entièrement ou à la demande. Commençons par
 Dans main.js:

 ```javascript
-import { createApp, Vue } from 'vue'
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import App from './App.vue';
@ -47,7 +47,6 @@ Puis éditez .babelrc:

 ```json
 {
-  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
@ -63,190 +62,207 @@ Puis éditez .babelrc:
 Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:

 ```javascript
-import Vue from 'vue';
-import { Button, Select } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';

-Vue.component(Button.name, Button);
-Vue.component(Select.name, Select);
-/* ou
- * Vue.use(Button)
- * Vue.use(Select)
+const app = createApp(App)
+app.component(ElButton.name, ElButton);
+app.component(ElSelect.name, ElSelect);
+
+/* or
+ * app.use(ElButton)
+ * app.use(ElSelect)
 */

-new Vue({
-  el: '#app',
-  render: h => h(App)
-});
+app.mount('#app')
 ```

-Exemple complet (liste complète des composants dans [components.json](https://github.com/ElemeFE/element/blob/master/components.json)):
+Exemple complet (liste complète des composants dans [reference](https://github.com/element-plus/element-plus/tree/dev/packages)):

 ```javascript
-import Vue from 'vue';
+import { createApp } from 'vue'
+import App from './App.vue';
 import {
-  Pagination,
-  Dialog,
-  Autocomplete,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Menu,
-  Submenu,
-  MenuItem,
-  MenuItemGroup,
-  Input,
-  InputNumber,
-  Radio,
-  RadioGroup,
-  RadioButton,
-  Checkbox,
-  CheckboxButton,
-  CheckboxGroup,
-  Switch,
-  Select,
-  Option,
-  OptionGroup,
-  Button,
-  ButtonGroup,
-  Table,
-  TableColumn,
-  DatePicker,
-  TimeSelect,
-  TimePicker,
-  Popover,
-  Tooltip,
-  Breadcrumb,
-  BreadcrumbItem,
-  Form,
-  FormItem,
-  Tabs,
-  TabPane,
-  Tag,
-  Tree,
-  Alert,
-  Slider,
-  Icon,
-  Row,
-  Col,
-  Upload,
-  Progress,
-  Spinner,
-  Badge,
-  Card,
-  Rate,
-  Steps,
-  Step,
-  Carousel,
-  CarouselItem,
-  Collapse,
-  CollapseItem,
-  Cascader,
-  ColorPicker,
-  Transfer,
-  Container,
-  Header,
-  Aside,
-  Main,
-  Footer,
-  Timeline,
-  TimelineItem,
-  Link,
-  Divider,
-  Image,
-  Calendar,
-  Backtop,
-  PageHeader,
-  CascaderPanel,
-  Loading,
-  MessageBox,
-  Message,
-  Notification
+  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,
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
 } from 'element-plus';

-Vue.use(Pagination);
-Vue.use(Dialog);
-Vue.use(Autocomplete);
-Vue.use(Dropdown);
-Vue.use(DropdownMenu);
-Vue.use(DropdownItem);
-Vue.use(Menu);
-Vue.use(Submenu);
-Vue.use(MenuItem);
-Vue.use(MenuItemGroup);
-Vue.use(Input);
-Vue.use(InputNumber);
-Vue.use(Radio);
-Vue.use(RadioGroup);
-Vue.use(RadioButton);
-Vue.use(Checkbox);
-Vue.use(CheckboxButton);
-Vue.use(CheckboxGroup);
-Vue.use(Switch);
-Vue.use(Select);
-Vue.use(Option);
-Vue.use(OptionGroup);
-Vue.use(Button);
-Vue.use(ButtonGroup);
-Vue.use(Table);
-Vue.use(TableColumn);
-Vue.use(DatePicker);
-Vue.use(TimeSelect);
-Vue.use(TimePicker);
-Vue.use(Popover);
-Vue.use(Tooltip);
-Vue.use(Breadcrumb);
-Vue.use(BreadcrumbItem);
-Vue.use(Form);
-Vue.use(FormItem);
-Vue.use(Tabs);
-Vue.use(TabPane);
-Vue.use(Tag);
-Vue.use(Tree);
-Vue.use(Alert);
-Vue.use(Slider);
-Vue.use(Icon);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Upload);
-Vue.use(Progress);
-Vue.use(Spinner);
-Vue.use(Badge);
-Vue.use(Card);
-Vue.use(Rate);
-Vue.use(Steps);
-Vue.use(Step);
-Vue.use(Carousel);
-Vue.use(CarouselItem);
-Vue.use(Collapse);
-Vue.use(CollapseItem);
-Vue.use(Cascader);
-Vue.use(ColorPicker);
-Vue.use(Transfer);
-Vue.use(Container);
-Vue.use(Header);
-Vue.use(Aside);
-Vue.use(Main);
-Vue.use(Footer);
-Vue.use(Timeline);
-Vue.use(TimelineItem);
-Vue.use(Link);
-Vue.use(Divider);
-Vue.use(Image);
-Vue.use(Calendar);
-Vue.use(Backtop);
-Vue.use(PageHeader);
-Vue.use(CascaderPanel);
+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,
+  ElTabs,
+  ElTag,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElUpload,
+]

-Vue.use(Loading.directive);
+const plugins = [
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+]

-Vue.prototype.$loading = Loading.service;
-Vue.prototype.$msgbox = MessageBox;
-Vue.prototype.$alert = MessageBox.alert;
-Vue.prototype.$confirm = MessageBox.confirm;
-Vue.prototype.$prompt = MessageBox.prompt;
-Vue.prototype.$notify = Notification;
-Vue.prototype.$message = Message;
+const app = createApp(App)
+
+components.forEach(component => {
+  app.component(component.name, component)
+})
+
+plugins.forEach(plugin => {
+  app.use(plugin)
+})
 ```

 ### Configuration globale
@ -256,19 +272,24 @@ Lors de l'import d'Element, vous pouvez définir un objet de configuration globa
 Import total d'Element：

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
-Vue.use(Element, { size: 'small', zIndex: 3000 });
+import App from './App.vue';
+
+const app = createApp(App)
+app.use(ElementPlus, { size: 'small', zIndex: 3000 });
 ```

 Import partiel d'Element：

 ```js
-import Vue from 'vue';
-import { Button } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton } from 'element-plus';
+import App from './App.vue';

-Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
-Vue.use(Button);
+const app = createApp(App)
+app.config.globalProperties.$ELEMENT = option
+app.use(ElButton);
 ```

 Avec la configuration ci-dessus, la taille par défaut des composants ayant l'attribut size sera 'small', et le z-index initial des fenêtres modales est 3000.
--- a/website/docs/fr-FR/transition.md
+++ b/website/docs/fr-FR/transition.md
@ -148,8 +148,8 @@ Pour l'effet collapse, utilisez le composant `el-collapse-transition`.
 // fade/zoom
 import 'element-plus/lib/theme-chalk/base.css';
 // collapse
-import CollapseTransition from 'element-plus/lib/transitions/collapse-transition';
+import { ElCollapseTransition } from 'element-plus';
 import Vue from 'vue'

-Vue.component(CollapseTransition.name, CollapseTransition)
+Vue.component(ElCollapseTransition.name, ElCollapseTransition)
 ```
--- a/website/docs/jp/i18n.md
+++ b/website/docs/jp/i18n.md
@ -14,7 +14,7 @@ createApp(App).use(ElementPlus, { locale })

 ```javascript
 import Vue from 'vue'
-import { Button, Select } from 'element-plus'
+import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/ja'
 import locale from 'element-plus/lib/locale'

@ -22,8 +22,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // import components
-Vue.component(Button.name, Button)
-Vue.component(Select.name, Select)
+Vue.component(ElButton.name, ElButton)
+Vue.component(ElSelect.name, ElSelect)
 ```

 たとえ、別の言語を使っていても、英語パックはデフォルトでインポートされます。 しかしながら、webpackで提供されている `NormalModuleReplacementPlugin` を使えばデフォルトlocaleを差し替えることが出来ます:
--- a/website/docs/jp/loading.md
+++ b/website/docs/jp/loading.md
@ -173,23 +173,23 @@
 ### サービス
 サービスで Loading を呼び出すこともできます。Loadingサービスをインポートします:
 ```javascript
-import { Loading } from 'element-plus';
+import { ElLoading } from 'element-plus';
 ```
 呼び出す:
 ```javascript
-Loading.service(options);
+ElLoading.service(options);
 ```
 パラメータ `options` はLoadingの設定であり、その詳細は以下の表にある。LoadingService` はLoadingのインスタンスを返し、その `close` メソッドを呼び出すことでインスタンスを閉じることができる。:
 ```javascript
-let loadingInstance = Loading.service(options);
+let loadingInstance = ElLoading.service(options);
 this.$nextTick(() => { // Loading should be closed asynchronously
  loadingInstance.close();
 });
 ```
 フルスクリーン Loading はシングルトンであることに注意してください。既存のフルスクリーン Loading がクローズされる前に新しいフルスクリーン Loading が呼び出された場合、実際に別の Loading インスタンスを作成するのではなく、既存のフルスクリーン Loading インスタンスが返されます。:
 ```javascript
-let loadingInstance1 = Loading.service({ fullscreen: true });
-let loadingInstance2 = Loading.service({ fullscreen: true });
+let loadingInstance1 = ElLoading.service({ fullscreen: true });
+let loadingInstance2 = ElLoading.service({ fullscreen: true });
 console.log(loadingInstance1 === loadingInstance2); // true
 ```
 これらのいずれかで`close` メソッドを呼び出すことで、このフルスクリーンの読み込みを閉じることができる。
--- a/website/docs/jp/message-box.md
+++ b/website/docs/jp/message-box.md
@ -288,10 +288,10 @@ Element Plusが完全にインポートされている場合、Vue.prototypeに
 オンデマンドで `MessageBox` をインポートしたい場合:

 ```javascript
-import { MessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 ```

-対応するメソッドは以下の通り: 対応するメソッドは `MessageBox`, `MessageBox.alert`, `MessageBox.confirm`, `MessageBox.prompt` である。パラメータは上記と同じである。
+対応するメソッドは以下の通り: 対応するメソッドは `ElMessageBox`, `ElMessageBox.alert`, `ElMessageBox.confirm`, `ElMessageBox.prompt` である。パラメータは上記と同じである。

 ### オプション

--- a/website/docs/jp/message.md
+++ b/website/docs/jp/message.md
@ -15,8 +15,8 @@
 </template>

 <script>
-  import { h } from 'vue';  
-  
+  import { h } from 'vue';
+
  export default {
    methods: {
      open() {
@ -192,13 +192,11 @@

 ### ローカルインポート

-Import `Message`:
-
 ```javascript
-import { Message } from 'element-plus';
+import { ElMessage } from 'element-plus';
 ```

-この場合は `Message(options)` を呼び出す必要があります。また、`Message.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`Message.closeAll()`を呼び出すことができます。
+この場合は `ElMessage(options)` を呼び出す必要があります。また、`ElMessage.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`ElMessage.closeAll()`を呼び出すことができます。

 ### オプション
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
--- a/website/docs/jp/notification.md
+++ b/website/docs/jp/notification.md
@ -21,7 +21,7 @@
 </template>

 <script>
-  import { h } from 'vue';  
+  import { h } from 'vue';

  export default {
    methods: {
@ -279,13 +279,11 @@ success, warning, info, errorの4種類を提供しています。

 ### ローカルインポート

-`Notification` をインポート:
-
 ```javascript
-import { Notification } from 'element-plus';
+import { ElNotification } from 'element-plus';
 ```

-この場合は `Notification(options)` を呼び出す必要があります。また、`Notification.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`Notification.closeAll()` を呼び出すことができます。
+この場合は `ElNotification(options)` を呼び出す必要があります。また、`ElNotification.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`ElNotification.closeAll()` を呼び出すことができます。

 ### オプション
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
--- a/website/docs/jp/quickstart.md
+++ b/website/docs/jp/quickstart.md
@ -21,7 +21,7 @@ Element Plusを完全にインポートすることも、必要なものだけ
 main.js:

 ```javascript
-import { createApp, Vue } from 'vue'
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import App from './App.vue';
@ -47,7 +47,6 @@ npm install babel-plugin-component -D

 ```json
 {
-  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
@ -63,190 +62,207 @@ npm install babel-plugin-component -D
 次に、ボタンとセレクトが必要な場合、main.jsを編集します:

 ```javascript
-import Vue from 'vue';
-import { Button, Select } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';

-Vue.component(Button.name, Button);
-Vue.component(Select.name, Select);
+const app = createApp(App)
+app.component(ElButton.name, ElButton);
+app.component(ElSelect.name, ElSelect);
+
 /* or
- * Vue.use(Button)
- * Vue.use(Select)
+ * app.use(ElButton)
+ * app.use(ElSelect)
 */

-new Vue({
-  el: '#app',
-  render: h => h(App)
-});
+app.mount('#app')
 ```

-全ての例 (コンポーネントリストのリファレンスは [components.json](https://github.com/ElemeFE/element/blob/master/components.json) を御覧ください)
+全ての例 (コンポーネントリストのリファレンスは [reference](https://github.com/element-plus/element-plus/tree/dev/packages) を御覧ください)

 ```javascript
-import Vue from 'vue';
+import { createApp } from 'vue'
+import App from './App.vue';
 import {
-  Pagination,
-  Dialog,
-  Autocomplete,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Menu,
-  Submenu,
-  MenuItem,
-  MenuItemGroup,
-  Input,
-  InputNumber,
-  Radio,
-  RadioGroup,
-  RadioButton,
-  Checkbox,
-  CheckboxButton,
-  CheckboxGroup,
-  Switch,
-  Select,
-  Option,
-  OptionGroup,
-  Button,
-  ButtonGroup,
-  Table,
-  TableColumn,
-  DatePicker,
-  TimeSelect,
-  TimePicker,
-  Popover,
-  Tooltip,
-  Breadcrumb,
-  BreadcrumbItem,
-  Form,
-  FormItem,
-  Tabs,
-  TabPane,
-  Tag,
-  Tree,
-  Alert,
-  Slider,
-  Icon,
-  Row,
-  Col,
-  Upload,
-  Progress,
-  Spinner,
-  Badge,
-  Card,
-  Rate,
-  Steps,
-  Step,
-  Carousel,
-  CarouselItem,
-  Collapse,
-  CollapseItem,
-  Cascader,
-  ColorPicker,
-  Transfer,
-  Container,
-  Header,
-  Aside,
-  Main,
-  Footer,
-  Timeline,
-  TimelineItem,
-  Link,
-  Divider,
-  Image,
-  Calendar,
-  Backtop,
-  PageHeader,
-  CascaderPanel,
-  Loading,
-  MessageBox,
-  Message,
-  Notification
+  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,
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
 } from 'element-plus';

-Vue.use(Pagination);
-Vue.use(Dialog);
-Vue.use(Autocomplete);
-Vue.use(Dropdown);
-Vue.use(DropdownMenu);
-Vue.use(DropdownItem);
-Vue.use(Menu);
-Vue.use(Submenu);
-Vue.use(MenuItem);
-Vue.use(MenuItemGroup);
-Vue.use(Input);
-Vue.use(InputNumber);
-Vue.use(Radio);
-Vue.use(RadioGroup);
-Vue.use(RadioButton);
-Vue.use(Checkbox);
-Vue.use(CheckboxButton);
-Vue.use(CheckboxGroup);
-Vue.use(Switch);
-Vue.use(Select);
-Vue.use(Option);
-Vue.use(OptionGroup);
-Vue.use(Button);
-Vue.use(ButtonGroup);
-Vue.use(Table);
-Vue.use(TableColumn);
-Vue.use(DatePicker);
-Vue.use(TimeSelect);
-Vue.use(TimePicker);
-Vue.use(Popover);
-Vue.use(Tooltip);
-Vue.use(Breadcrumb);
-Vue.use(BreadcrumbItem);
-Vue.use(Form);
-Vue.use(FormItem);
-Vue.use(Tabs);
-Vue.use(TabPane);
-Vue.use(Tag);
-Vue.use(Tree);
-Vue.use(Alert);
-Vue.use(Slider);
-Vue.use(Icon);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Upload);
-Vue.use(Progress);
-Vue.use(Spinner);
-Vue.use(Badge);
-Vue.use(Card);
-Vue.use(Rate);
-Vue.use(Steps);
-Vue.use(Step);
-Vue.use(Carousel);
-Vue.use(CarouselItem);
-Vue.use(Collapse);
-Vue.use(CollapseItem);
-Vue.use(Cascader);
-Vue.use(ColorPicker);
-Vue.use(Transfer);
-Vue.use(Container);
-Vue.use(Header);
-Vue.use(Aside);
-Vue.use(Main);
-Vue.use(Footer);
-Vue.use(Timeline);
-Vue.use(TimelineItem);
-Vue.use(Link);
-Vue.use(Divider);
-Vue.use(Image);
-Vue.use(Calendar);
-Vue.use(Backtop);
-Vue.use(PageHeader);
-Vue.use(CascaderPanel);
+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,
+  ElTabs,
+  ElTag,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElUpload,
+]

-Vue.use(Loading.directive);
+const plugins = [
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+]

-Vue.prototype.$loading = Loading.service;
-Vue.prototype.$msgbox = MessageBox;
-Vue.prototype.$alert = MessageBox.alert;
-Vue.prototype.$confirm = MessageBox.confirm;
-Vue.prototype.$prompt = MessageBox.prompt;
-Vue.prototype.$notify = Notification;
-Vue.prototype.$message = Message;
+const app = createApp(App)
+
+components.forEach(component => {
+  app.component(component.name, component)
+})
+
+plugins.forEach(plugin => {
+  app.use(plugin)
+})
 ```

 ### グローバルコンフィグ
@ -256,19 +272,24 @@ Elenentをインポートする際、グローバルコンフィグオブジェ
 Element Plusを完全にインポート：

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
-Vue.use(ElementPlus, { size: 'small', zIndex: 3000 });
+import App from './App.vue';
+
+const app = createApp(App)
+app.use(ElementPlus, { size: 'small', zIndex: 3000 });
 ```

 Element Plusを部分的にインポート：

 ```js
-import Vue from 'vue';
-import { Button } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton } from 'element-plus';
+import App from './App.vue';

-Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
-Vue.use(Button);
+const app = createApp(App)
+app.config.globalProperties.$ELEMENT = option
+app.use(ElButton);
 ```

 上記の設定では、size属性を持つすべてのコンポーネントのデフォルトのサイズは `small`、モーダルボックスのデフォルト値 `z-index` は3000となります。
--- a/website/docs/jp/transition.md
+++ b/website/docs/jp/transition.md
@ -148,8 +148,8 @@ Element Plusにビルトインされているトランジションをダイレ
 // fade/zoom
 import 'element-plus/lib/theme-chalk/base.css';
 // collapse
-import CollapseTransition from 'element-plus/lib/transitions/collapse-transition';
+import { ElCollapseTransition } from 'element-plus';
 import Vue from 'vue'

-Vue.component(CollapseTransition.name, CollapseTransition)
+Vue.component(ElCollapseTransition.name, ElCollapseTransition)
 ```
--- a/website/docs/zh-CN/i18n.md
+++ b/website/docs/zh-CN/i18n.md
@ -16,7 +16,7 @@ createApp(App).use(ElementPlus, { locale })
 ```javascript
 // 按需引入 Element
 import Vue from 'vue'
-import { Button, Select } from 'element-plus'
+import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import locale from 'element-plus/lib/locale'

@ -24,8 +24,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)

 // 引入组件
-Vue.component(Button.name, Button)
-Vue.component(Select.name, Select)
+Vue.component(ElButton.name, ElButton)
+Vue.component(ElSelect.name, ElSelect)
 ```

 如果使用其它语言，默认情况下英文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。
--- a/website/docs/zh-CN/loading.md
+++ b/website/docs/zh-CN/loading.md
@ -172,28 +172,28 @@
 ### 服务
 Loading 还可以以服务的方式调用。引入 Loading 服务：
 ```javascript
-import { Loading } from 'element-plus';
+import { ElLoading } from 'element-plus';
 ```
 在需要调用时：
 ```javascript
-Loading.service(options);
+ElLoading.service(options);
 ```
 其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
 ```javascript
-let loadingInstance = Loading.service(options);
+let loadingInstance = ElLoading.service(options);
 this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
  loadingInstance.close();
 });
 ```
 需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
 ```javascript
-let loadingInstance1 = Loading.service({ fullscreen: true });
-let loadingInstance2 = Loading.service({ fullscreen: true });
+let loadingInstance1 = ElLoading.service({ fullscreen: true });
+let loadingInstance2 = ElLoading.service({ fullscreen: true });
 console.log(loadingInstance1 === loadingInstance2); // true
 ```
 此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。

-如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。
+如果完整引入了 Element，那么 `app.config.globalProperties` 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。

 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
--- a/website/docs/zh-CN/message-box.md
+++ b/website/docs/zh-CN/message-box.md
@ -276,7 +276,7 @@

 ### 全局方法

-如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：
+如果你完整引入了 Element，它会为 `app.config.globalProperties` 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：
 - `$msgbox(options)`
 - `$alert(message, title, options)` 或 `$alert(message, options)`
 - `$confirm(message, title, options)` 或 `$confirm(message, options)`
@ -287,10 +287,10 @@
 如果单独引入 `MessageBox`：

 ```javascript
-import { MessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 ```

-那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。
+那么对应于上述四个全局方法的调用方法依次为：ElMessageBox, ElMessageBox.alert, ElMessageBox.confirm 和 ElMessageBox.prompt，调用参数与全局方法相同。

 ### Options

--- a/website/docs/zh-CN/message.md
+++ b/website/docs/zh-CN/message.md
@ -187,17 +187,15 @@

 ### 全局方法

-Element Plus 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
+Element Plus 为 `app.config.globalProperties` 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。

 ### 单独引用

-单独引入 `Message`：
-
 ```javascript
-import { Message } from 'element-plus';
+import { ElMessage } from 'element-plus';
 ```

-此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。并且可以调用 `Message.closeAll()` 手动关闭所有实例。
+此时调用方法为 `ElMessage(options)`。我们也为每个 type 定义了各自的方法，如 `ElMessage.success(options)`。并且可以调用 `ElMessage.closeAll()` 手动关闭所有实例。

 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
--- a/website/docs/zh-CN/notification.md
+++ b/website/docs/zh-CN/notification.md
@ -276,17 +276,15 @@

 ### 全局方法

-Element Plus 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
+Element Plus 为 ``app.config.globalProperties`` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。

 ### 单独引用

-单独引入 Notification：
-
 ```javascript
-import { Notification } from 'element-plus';
+import { ElNotification } from 'element-plus';
 ```

-此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。并且可以调用 `Notification.closeAll()` 手动关闭所有实例。
+此时调用方法为 `ElNotification(options)`。我们也为每个 type 定义了各自的方法，如 `ElNotification.success(options)`。并且可以调用 `ElNotification.closeAll()` 手动关闭所有实例。

 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
--- a/website/docs/zh-CN/quickstart.md
+++ b/website/docs/zh-CN/quickstart.md
@ -21,7 +21,7 @@
 在 main.js 中写入以下内容：

 ```javascript
-import { createApp, Vue } from 'vue'
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import App from './App.vue';
@ -47,7 +47,6 @@ npm install babel-plugin-component -D

 ```json
 {
-  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
@ -63,190 +62,207 @@ npm install babel-plugin-component -D
 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

 ```javascript
-import Vue from 'vue';
-import { Button, Select } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';

-Vue.component(Button.name, Button);
-Vue.component(Select.name, Select);
-/* 或写为
- * Vue.use(Button)
- * Vue.use(Select)
+const app = createApp(App)
+app.component(ElButton.name, ElButton);
+app.component(ElSelect.name, ElSelect);
+
+/* or
+ * app.use(ElButton)
+ * app.use(ElSelect)
 */

-new Vue({
-  el: '#app',
-  render: h => h(App)
-});
+app.mount('#app')
 ```

-完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准）
+完整组件列表和引入方式（完整组件列表以 [reference](https://github.com/element-plus/element-plus/tree/dev/packages) 为准）

 ```javascript
-import Vue from 'vue';
+import { createApp } from 'vue'
+import App from './App.vue';
 import {
-  Pagination,
-  Dialog,
-  Autocomplete,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Menu,
-  Submenu,
-  MenuItem,
-  MenuItemGroup,
-  Input,
-  InputNumber,
-  Radio,
-  RadioGroup,
-  RadioButton,
-  Checkbox,
-  CheckboxButton,
-  CheckboxGroup,
-  Switch,
-  Select,
-  Option,
-  OptionGroup,
-  Button,
-  ButtonGroup,
-  Table,
-  TableColumn,
-  DatePicker,
-  TimeSelect,
-  TimePicker,
-  Popover,
-  Tooltip,
-  Breadcrumb,
-  BreadcrumbItem,
-  Form,
-  FormItem,
-  Tabs,
-  TabPane,
-  Tag,
-  Tree,
-  Alert,
-  Slider,
-  Icon,
-  Row,
-  Col,
-  Upload,
-  Progress,
-  Spinner,
-  Badge,
-  Card,
-  Rate,
-  Steps,
-  Step,
-  Carousel,
-  CarouselItem,
-  Collapse,
-  CollapseItem,
-  Cascader,
-  ColorPicker,
-  Transfer,
-  Container,
-  Header,
-  Aside,
-  Main,
-  Footer,
-  Timeline,
-  TimelineItem,
-  Link,
-  Divider,
-  Image,
-  Calendar,
-  Backtop,
-  PageHeader,
-  CascaderPanel,
-  Loading,
-  MessageBox,
-  Message,
-  Notification
+  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,
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
 } from 'element-plus';

-Vue.use(Pagination);
-Vue.use(Dialog);
-Vue.use(Autocomplete);
-Vue.use(Dropdown);
-Vue.use(DropdownMenu);
-Vue.use(DropdownItem);
-Vue.use(Menu);
-Vue.use(Submenu);
-Vue.use(MenuItem);
-Vue.use(MenuItemGroup);
-Vue.use(Input);
-Vue.use(InputNumber);
-Vue.use(Radio);
-Vue.use(RadioGroup);
-Vue.use(RadioButton);
-Vue.use(Checkbox);
-Vue.use(CheckboxButton);
-Vue.use(CheckboxGroup);
-Vue.use(Switch);
-Vue.use(Select);
-Vue.use(Option);
-Vue.use(OptionGroup);
-Vue.use(Button);
-Vue.use(ButtonGroup);
-Vue.use(Table);
-Vue.use(TableColumn);
-Vue.use(DatePicker);
-Vue.use(TimeSelect);
-Vue.use(TimePicker);
-Vue.use(Popover);
-Vue.use(Tooltip);
-Vue.use(Breadcrumb);
-Vue.use(BreadcrumbItem);
-Vue.use(Form);
-Vue.use(FormItem);
-Vue.use(Tabs);
-Vue.use(TabPane);
-Vue.use(Tag);
-Vue.use(Tree);
-Vue.use(Alert);
-Vue.use(Slider);
-Vue.use(Icon);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Upload);
-Vue.use(Progress);
-Vue.use(Spinner);
-Vue.use(Badge);
-Vue.use(Card);
-Vue.use(Rate);
-Vue.use(Steps);
-Vue.use(Step);
-Vue.use(Carousel);
-Vue.use(CarouselItem);
-Vue.use(Collapse);
-Vue.use(CollapseItem);
-Vue.use(Cascader);
-Vue.use(ColorPicker);
-Vue.use(Transfer);
-Vue.use(Container);
-Vue.use(Header);
-Vue.use(Aside);
-Vue.use(Main);
-Vue.use(Footer);
-Vue.use(Timeline);
-Vue.use(TimelineItem);
-Vue.use(Link);
-Vue.use(Divider);
-Vue.use(Image);
-Vue.use(Calendar);
-Vue.use(Backtop);
-Vue.use(PageHeader);
-Vue.use(CascaderPanel);
+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,
+  ElTabs,
+  ElTag,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElUpload,
+]

-Vue.use(Loading.directive);
+const plugins = [
+  ElInfiniteScroll,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+]

-Vue.prototype.$loading = Loading.service;
-Vue.prototype.$msgbox = MessageBox;
-Vue.prototype.$alert = MessageBox.alert;
-Vue.prototype.$confirm = MessageBox.confirm;
-Vue.prototype.$prompt = MessageBox.prompt;
-Vue.prototype.$notify = Notification;
-Vue.prototype.$message = Message;
+const app = createApp(App)
+
+components.forEach(component => {
+  app.component(component.name, component)
+})
+
+plugins.forEach(plugin => {
+  app.use(plugin)
+})
 ```

 ### 全局配置
@ -256,19 +272,24 @@ Vue.prototype.$message = Message;
 完整引入 Element：

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
-Vue.use(Element, { size: 'small', zIndex: 3000 });
+import App from './App.vue';
+
+const app = createApp(App)
+app.use(ElementPlus, { size: 'small', zIndex: 3000 });
 ```

 按需引入 Element：

 ```js
-import Vue from 'vue';
-import { Button } from 'element-plus';
+import { createApp } from 'vue'
+import { ElButton } from 'element-plus';
+import App from './App.vue';

-Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
-Vue.use(Button);
+const app = createApp(App)
+app.config.globalProperties.$ELEMENT = option
+app.use(ElButton);
 ```

 按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
--- a/website/docs/zh-CN/transition.md
+++ b/website/docs/zh-CN/transition.md
@ -148,8 +148,8 @@ Element Plus 内应用在部分组件的过渡动画，你也可以直接使用
 // fade/zoom 等
 import 'element-plus/lib/theme-chalk/base.css';
 // collapse 展开折叠
-import CollapseTransition from 'element-plus/lib/transitions/collapse-transition';
+import { ElCollapseTransition } from 'element-plus';
 import Vue from 'vue'

-Vue.component(CollapseTransition.name, CollapseTransition)
+Vue.component(ElCollapseTransition.name, ElCollapseTransition)
 ```