diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts
index 1b4ea892..252d1e8c 100644
--- a/src/components/Application/index.ts
+++ b/src/components/Application/index.ts
@@ -1,7 +1,6 @@
-import AppLocalePicker from './src/AppLocalePicker.vue';
-import AppLogo from './src/AppLogo.vue';
+import AppLocalePickerLib from './src/AppLocalePicker.vue';
+import AppLogoLib from './src/AppLogo.vue';
 import { withInstall } from '../util';
 
-export { AppLocalePicker, AppLogo };
-
-export default withInstall(AppLocalePicker, AppLogo);
+export const AppLocalePicker = withInstall(AppLocalePickerLib);
+export const AppLogo = withInstall(AppLogoLib);
diff --git a/src/components/Authority/index.ts b/src/components/Authority/index.ts
index 0e1a2133..a67f6317 100644
--- a/src/components/Authority/index.ts
+++ b/src/components/Authority/index.ts
@@ -1,7 +1,5 @@
-import Authority from './src/index.vue';
+import AuthorityLib from './src/index.vue';
 
 import { withInstall } from '../util';
 
-export default withInstall(Authority);
-
-export { Authority };
+export const Authority = withInstall(AuthorityLib);
diff --git a/src/components/Basic/index.ts b/src/components/Basic/index.ts
index fd12ce0b..4f1294cd 100644
--- a/src/components/Basic/index.ts
+++ b/src/components/Basic/index.ts
@@ -1,9 +1,9 @@
-import BasicArrow from './src/BasicArrow.vue';
-import BasicHelp from './src/BasicHelp.vue';
-import BasicTitle from './src/BasicTitle.vue';
+import BasicArrowLib from './src/BasicArrow.vue';
+import BasicHelpLib from './src/BasicHelp.vue';
+import BasicTitleLib from './src/BasicTitle.vue';
 
 import { withInstall } from '../util';
 
-export { BasicArrow, BasicHelp, BasicTitle };
-
-export default withInstall(BasicArrow, BasicHelp, BasicTitle);
+export const BasicArrow = withInstall(BasicArrowLib);
+export const BasicHelp = withInstall(BasicHelpLib);
+export const BasicTitle = withInstall(BasicTitleLib);
diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts
index f167962d..7069a145 100644
--- a/src/components/Breadcrumb/index.ts
+++ b/src/components/Breadcrumb/index.ts
@@ -1,7 +1,6 @@
-import Breadcrumb from './src/Breadcrumb.vue';
-import BreadcrumbItem from './src/BreadcrumbItem.vue';
+import BreadcrumbLib from './src/Breadcrumb.vue';
+import BreadcrumbItemLib from './src/BreadcrumbItem.vue';
 import { withInstall } from '../util';
 
-export { Breadcrumb, BreadcrumbItem };
-
-export default withInstall(Breadcrumb, BreadcrumbItem);
+export const Breadcrumb = withInstall(BreadcrumbLib);
+export const BreadcrumbItem = withInstall(BreadcrumbItemLib);
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 6191855d..3abdf330 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,6 +1,4 @@
-import Button from './src/BasicButton.vue';
+import ButtonLib from './src/BasicButton.vue';
 import { withInstall } from '../util';
 
-export { Button };
-
-export default withInstall(Button);
+export const Button = withInstall(ButtonLib);
diff --git a/src/components/ClickOutSide/index.ts b/src/components/ClickOutSide/index.ts
index 927462a5..20e8d7bd 100644
--- a/src/components/ClickOutSide/index.ts
+++ b/src/components/ClickOutSide/index.ts
@@ -1,6 +1,4 @@
-import ClickOutSide from './src/index.vue';
+import ClickOutSideLib from './src/index.vue';
 import { withInstall } from '../util';
 
-export { ClickOutSide };
-
-export default withInstall(ClickOutSide);
+export const ClickOutSide = withInstall(ClickOutSideLib);
diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts
index 844a12d8..89fb0777 100644
--- a/src/components/Container/index.ts
+++ b/src/components/Container/index.ts
@@ -1,10 +1,10 @@
-import ScrollContainer from './src/ScrollContainer.vue';
-import CollapseContainer from './src/collapse/CollapseContainer.vue';
-import LazyContainer from './src/LazyContainer.vue';
+import ScrollContainerLib from './src/ScrollContainer.vue';
+import CollapseContainerLib from './src/collapse/CollapseContainer.vue';
+import LazyContainerLib from './src/LazyContainer.vue';
 import { withInstall } from '../util';
 
 export * from './src/types';
 
-export { ScrollContainer, CollapseContainer, LazyContainer };
-
-export default withInstall(ScrollContainer, CollapseContainer, LazyContainer);
+export const ScrollContainer = withInstall(ScrollContainerLib);
+export const CollapseContainer = withInstall(CollapseContainerLib);
+export const LazyContainer = withInstall(LazyContainerLib);
diff --git a/src/components/CountTo/index.ts b/src/components/CountTo/index.ts
index f8a0c2d8..c41e9cc7 100644
--- a/src/components/CountTo/index.ts
+++ b/src/components/CountTo/index.ts
@@ -1,8 +1,6 @@
 // Transform vue-count-to to support vue3 version
 
-import CountTo from './src/index.vue';
+import CountToLib from './src/index.vue';
 import { withInstall } from '../util';
 
-export { CountTo };
-
-export default withInstall(CountTo);
+export const CountTo = withInstall(CountToLib);
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
index e1d044f2..92b2970d 100644
--- a/src/components/Dropdown/index.ts
+++ b/src/components/Dropdown/index.ts
@@ -1,7 +1,6 @@
-import Dropdown from './src/Dropdown';
+import DropdownLib from './src/Dropdown';
 import { withInstall } from '../util';
 
 export * from './src/types';
 
-export { Dropdown };
-export default withInstall(Dropdown);
+export const Dropdown = withInstall(DropdownLib);
diff --git a/src/components/Excel/index.ts b/src/components/Excel/index.ts
index 98d1528b..f2ddfd72 100644
--- a/src/components/Excel/index.ts
+++ b/src/components/Excel/index.ts
@@ -1,5 +1,5 @@
-import ImportExcel from './src/ImportExcel.vue';
-import ExportExcelModel from './src/ExportExcelModel.vue';
+import ImportExcelLib from './src/ImportExcel.vue';
+import ExportExcelModelLib from './src/ExportExcelModel.vue';
 
 import { withInstall } from '../util';
 
@@ -7,6 +7,5 @@ export * from './src/types';
 
 export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
 
-export { ImportExcel, ExportExcelModel };
-
-export default withInstall(ImportExcel, ExportExcelModel);
+export const ImportExcel = withInstall(ImportExcelLib);
+export const ExportExcelModel = withInstall(ExportExcelModelLib);
diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts
index 249924f2..e18d7b0d 100644
--- a/src/components/Markdown/index.ts
+++ b/src/components/Markdown/index.ts
@@ -1,7 +1,7 @@
-import MarkDown from './src/index.vue';
+import MarkDownLib from './src/index.vue';
 
 import { withInstall } from '../util';
 
 export * from './src/types';
-export { MarkDown };
-export default withInstall(MarkDown);
+
+export const MarkDown = withInstall(MarkDownLib);
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index 9c380eee..ff3e1c27 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -1,5 +1,4 @@
-import BasicMenu from './src/BasicMenu';
+import BasicMenuLib from './src/BasicMenu';
 import { withInstall } from '../util';
 
-export default withInstall(BasicMenu);
-export { BasicMenu };
+export const BasicMenu = withInstall(BasicMenuLib);
diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
index c15b6124..3a3a1e0d 100644
--- a/src/components/Page/index.ts
+++ b/src/components/Page/index.ts
@@ -1,6 +1,4 @@
-import PageFooter from './src/PageFooter.vue';
+import PageFooterLib from './src/PageFooter.vue';
 import { withInstall } from '../util';
 
-export { PageFooter };
-
-export default withInstall(PageFooter);
+export const PageFooter = withInstall(PageFooterLib);
diff --git a/src/components/StrengthMeter/index.tsx b/src/components/StrengthMeter/index.tsx
index 64cd2a07..93703be4 100644
--- a/src/components/StrengthMeter/index.tsx
+++ b/src/components/StrengthMeter/index.tsx
@@ -1,6 +1,4 @@
-import StrengthMeter from './src/index';
+import StrengthMeterLib from './src/index';
 import { withInstall } from '../util';
 
-export { StrengthMeter };
-
-export default withInstall(StrengthMeter);
+export const StrengthMeter = withInstall(StrengthMeterLib);
diff --git a/src/components/Tinymce/index.ts b/src/components/Tinymce/index.ts
index 14baed5c..110cc60e 100644
--- a/src/components/Tinymce/index.ts
+++ b/src/components/Tinymce/index.ts
@@ -1,5 +1,4 @@
-import Tinymce from './src/Editor.vue';
+import TinymceLib from './src/Editor.vue';
 import { withInstall } from '../util';
 
-export { Tinymce };
-export default withInstall(Tinymce);
+export const Tinymce = withInstall(TinymceLib);
diff --git a/src/components/Verify/index.ts b/src/components/Verify/index.ts
index a9762925..8a46c57a 100644
--- a/src/components/Verify/index.ts
+++ b/src/components/Verify/index.ts
@@ -1,9 +1,8 @@
-import BasicDragVerify from './src/DragVerify';
-import RotateDragVerify from './src/ImgRotate';
+import BasicDragVerifyLib from './src/DragVerify';
+import RotateDragVerifyLib from './src/ImgRotate';
 import { withInstall } from '../util';
 
 export * from './src/types';
 
-export { RotateDragVerify, BasicDragVerify };
-
-export default withInstall(RotateDragVerify, BasicDragVerify);
+export const RotateDragVerify = withInstall(RotateDragVerifyLib);
+export const BasicDragVerify = withInstall(BasicDragVerifyLib);
diff --git a/src/components/VirtualScroll/index.ts b/src/components/VirtualScroll/index.ts
index 6ccd6196..0ab61fd2 100644
--- a/src/components/VirtualScroll/index.ts
+++ b/src/components/VirtualScroll/index.ts
@@ -1,6 +1,4 @@
-import VirtualScroll from './src/index';
+import VirtualScrollLib from './src/index';
 import { withInstall } from '../util';
 
-export { VirtualScroll };
-
-export default withInstall(VirtualScroll);
+export const VirtualScroll = withInstall(VirtualScrollLib);
diff --git a/src/components/util.ts b/src/components/util.ts
index f4196140..1cd5aeb1 100644
--- a/src/components/util.ts
+++ b/src/components/util.ts
@@ -1,13 +1,12 @@
-import type { VNodeChild } from 'vue';
-import type { App, Component } from 'vue';
+import type { VNodeChild, Plugin } from 'vue';
+import type { App } from 'vue';
 
-export function withInstall(...components: Component[]) {
-  return (app: App) => {
-    components.forEach((comp) => {
-      comp.name && app.component(comp.name, comp);
-    });
-    return app;
+export function withInstall<T>(component: T) {
+  const comp = component as any;
+  comp.install = (app: App) => {
+    app.component(comp.displayName || comp.name, comp);
   };
+  return comp as T & Plugin;
 }
 
 export function convertToUnit(