diff --git a/src/action-bar-button/ActionBarButton.tsx b/src/action-bar-button/ActionBarButton.tsx
index 1ea9c26a8..ffa3edbcf 100644
--- a/src/action-bar-button/ActionBarButton.tsx
+++ b/src/action-bar-button/ActionBarButton.tsx
@@ -8,7 +8,7 @@ import { useExpose } from '../composables/use-expose';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Button, { ButtonType } from '../button';
+import { Button, ButtonType } from '../button';
 
 const [name, bem] = createNamespace('action-bar-button');
 
diff --git a/src/action-bar-button/test/index.spec.ts b/src/action-bar-button/test/index.spec.ts
index 2a0a20fc0..e6f76ddfa 100644
--- a/src/action-bar-button/test/index.spec.ts
+++ b/src/action-bar-button/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import ActionBarButton from '..';
+import { ActionBarButton } from '..';
 
 test('should render default slot correctly', () => {
   const wrapper = mount(ActionBarButton, {
diff --git a/src/action-bar-icon/ActionBarIcon.tsx b/src/action-bar-icon/ActionBarIcon.tsx
index ae035671c..17f3cef19 100644
--- a/src/action-bar-icon/ActionBarIcon.tsx
+++ b/src/action-bar-icon/ActionBarIcon.tsx
@@ -7,8 +7,8 @@ import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
-import Badge from '../badge';
+import { Icon } from '../icon';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('action-bar-icon');
 
diff --git a/src/action-bar-icon/test/index.spec.ts b/src/action-bar-icon/test/index.spec.ts
index b7695bba5..75c1c7fb5 100644
--- a/src/action-bar-icon/test/index.spec.ts
+++ b/src/action-bar-icon/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import ActionBarIcon from '..';
+import { ActionBarIcon } from '..';
 
 test('should render default slot correctly', () => {
   const wrapper = mount(ActionBarIcon, {
diff --git a/src/action-bar/demo/index.vue b/src/action-bar/demo/index.vue
index e4f6c0c06..fd7809732 100644
--- a/src/action-bar/demo/index.vue
+++ b/src/action-bar/demo/index.vue
@@ -64,7 +64,7 @@
 
 <script lang="ts">
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/action-bar/test/index.spec.ts b/src/action-bar/test/index.spec.ts
index dce48e5a2..b494fb8c6 100644
--- a/src/action-bar/test/index.spec.ts
+++ b/src/action-bar/test/index.spec.ts
@@ -1,4 +1,4 @@
-import ActionBar from '..';
+import { ActionBar } from '..';
 import { mount } from '../../../test';
 
 test('should allow to disable safe-area-inset-bottom prop', () => {
diff --git a/src/action-sheet/ActionSheet.tsx b/src/action-sheet/ActionSheet.tsx
index 4703631b6..69c37e552 100644
--- a/src/action-sheet/ActionSheet.tsx
+++ b/src/action-sheet/ActionSheet.tsx
@@ -4,9 +4,9 @@ import { nextTick, PropType, defineComponent } from 'vue';
 import { createNamespace, pick } from '../utils';
 
 // Components
-import Icon from '../icon';
-import Popup from '../popup';
-import Loading from '../loading';
+import { Icon } from '../icon';
+import { Popup } from '../popup';
+import { Loading } from '../loading';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 const [name, bem] = createNamespace('action-sheet');
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index 9cd704800..c78cccf66 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -55,7 +55,7 @@
 import { computed, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ActionSheetAction } from '..';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/action-sheet/test/index.spec.ts b/src/action-sheet/test/index.spec.ts
index 7507de8d8..5be48adb0 100644
--- a/src/action-sheet/test/index.spec.ts
+++ b/src/action-sheet/test/index.spec.ts
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { mount } from '../../../test';
-import ActionSheet from '..';
+import { ActionSheet } from '..';
 
 test('should emit select event after clicking option', async () => {
   const wrapper = mount(ActionSheet, {
diff --git a/src/address-edit/AddressEdit.tsx b/src/address-edit/AddressEdit.tsx
index 6d8399f31..5327e8a0a 100644
--- a/src/address-edit/AddressEdit.tsx
+++ b/src/address-edit/AddressEdit.tsx
@@ -16,14 +16,14 @@ import { isMobile } from '../utils/validate/mobile';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Area, { AreaList, AreaColumnOption } from '../area';
-import Cell from '../cell';
-import Field from '../field';
-import Popup from '../popup';
-import Toast from '../toast';
-import Button from '../button';
-import Dialog from '../dialog';
-import Switch from '../switch';
+import { Area, AreaList, AreaColumnOption } from '../area';
+import { Cell } from '../cell';
+import { Field } from '../field';
+import { Popup } from '../popup';
+import { Toast } from '../toast';
+import { Button } from '../button';
+import { Dialog } from '../dialog';
+import { Switch } from '../switch';
 import AddressEditDetail, { AddressEditSearchItem } from './AddressEditDetail';
 
 const [name, bem, t] = createNamespace('address-edit');
diff --git a/src/address-edit/AddressEditDetail.tsx b/src/address-edit/AddressEditDetail.tsx
index a01da8443..a936d5816 100644
--- a/src/address-edit/AddressEditDetail.tsx
+++ b/src/address-edit/AddressEditDetail.tsx
@@ -5,8 +5,8 @@ import { ComponentInstance, createNamespace } from '../utils';
 import { isAndroid } from '../utils/validate/system';
 
 // Components
-import Cell from '../cell';
-import Field from '../field';
+import { Cell } from '../cell';
+import { Field } from '../field';
 
 const [name, bem, t] = createNamespace('address-edit-detail');
 const android = isAndroid();
diff --git a/src/address-edit/demo/index.vue b/src/address-edit/demo/index.vue
index 5370aa81a..f6ba07bb9 100644
--- a/src/address-edit/demo/index.vue
+++ b/src/address-edit/demo/index.vue
@@ -18,8 +18,8 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
-import areaList from '../../area/demo/area';
+import { Toast } from '../../toast';
+import { areaList } from '../../area/demo/area';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/address-edit/test/index.spec.js b/src/address-edit/test/index.spec.js
index cc288d76c..f3d89f604 100644
--- a/src/address-edit/test/index.spec.js
+++ b/src/address-edit/test/index.spec.js
@@ -1,5 +1,5 @@
-import AddressEdit from '..';
-import areaList from '../../area/demo/area-simple';
+import { AddressEdit } from '..';
+import { areaList } from '../../area/demo/area-simple';
 import { mount, later, trigger } from '../../../test';
 
 const defaultAddressInfo = {
diff --git a/src/address-list/AddressList.tsx b/src/address-list/AddressList.tsx
index 3d4aa0332..b094fe043 100644
--- a/src/address-list/AddressList.tsx
+++ b/src/address-list/AddressList.tsx
@@ -4,8 +4,8 @@ import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
 // Components
-import Button from '../button';
-import RadioGroup from '../radio-group';
+import { Button } from '../button';
+import { RadioGroup } from '../radio-group';
 import AddressListItem, { AddressListAddress } from './AddressListItem';
 
 const [name, bem, t] = createNamespace('address-list');
@@ -68,7 +68,7 @@ export default defineComponent({
         <AddressListItem
           v-slots={{
             bottom: slots['item-bottom'],
-            tag: slots['tag'],
+            tag: slots.tag,
           }}
           key={item.id}
           address={item}
diff --git a/src/address-list/AddressListItem.tsx b/src/address-list/AddressListItem.tsx
index c2003019c..6d00fcb5c 100644
--- a/src/address-list/AddressListItem.tsx
+++ b/src/address-list/AddressListItem.tsx
@@ -4,10 +4,10 @@ import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
 // Components
-import Tag from '../tag';
-import Icon from '../icon';
-import Cell from '../cell';
-import Radio from '../radio';
+import { Tag } from '../tag';
+import { Icon } from '../icon';
+import { Cell } from '../cell';
+import { Radio } from '../radio';
 
 const [name, bem] = createNamespace('address-item');
 
diff --git a/src/address-list/demo/index.vue b/src/address-list/demo/index.vue
index 6293e0545..83ac7f767 100644
--- a/src/address-list/demo/index.vue
+++ b/src/address-list/demo/index.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/address-list/test/index.spec.ts b/src/address-list/test/index.spec.ts
index ea66a1fb5..83542b383 100644
--- a/src/address-list/test/index.spec.ts
+++ b/src/address-list/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import AddressList from '..';
+import { AddressList } from '..';
 
 const list = [
   {
diff --git a/src/area/Area.tsx b/src/area/Area.tsx
index d06d50265..0be1b61e8 100644
--- a/src/area/Area.tsx
+++ b/src/area/Area.tsx
@@ -19,7 +19,7 @@ import { pickerProps } from '../picker/Picker';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Picker from '../picker';
+import { Picker } from '../picker';
 
 const [name, bem] = createNamespace('area');
 
diff --git a/src/area/demo/area-en.ts b/src/area/demo/area-en.ts
index 666aa2b35..392f695ac 100644
--- a/src/area/demo/area-en.ts
+++ b/src/area/demo/area-en.ts
@@ -1,4 +1,4 @@
-export default {
+export const areaListEn = {
   province_list: {
     110000: 'Beijing',
     330000: 'Zhejiang',
diff --git a/src/area/demo/area-simple.ts b/src/area/demo/area-simple.ts
index 248a9be0e..dbfe7c5c8 100644
--- a/src/area/demo/area-simple.ts
+++ b/src/area/demo/area-simple.ts
@@ -1,4 +1,4 @@
-export default {
+export const areaList = {
   province_list: {
     110000: '北京市',
     120000: '天津市',
diff --git a/src/area/demo/area.ts b/src/area/demo/area.ts
index 61a091e4c..08240ba3e 100644
--- a/src/area/demo/area.ts
+++ b/src/area/demo/area.ts
@@ -1,4 +1,4 @@
-export default {
+export const areaList = {
   province_list: {
     110000: '北京市',
     120000: '天津市',
diff --git a/src/area/demo/index.vue b/src/area/demo/index.vue
index 90afa895e..d005aea42 100644
--- a/src/area/demo/index.vue
+++ b/src/area/demo/index.vue
@@ -22,8 +22,8 @@
 
 <script lang="ts">
 import { ref } from 'vue';
-import AreaList from './area';
-import AreaListEn from './area-en';
+import { areaList } from './area';
+import { areaListEn } from './area-en';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -32,14 +32,14 @@ const i18n = {
     title3: '配置显示列',
     title4: '配置列占位提示文字',
     columnsPlaceholder: ['请选择', '请选择', '请选择'],
-    areaList: AreaList,
+    areaList,
   },
   'en-US': {
     title2: 'Initial Value',
     title3: 'Columns Number',
     title4: 'Columns Placeholder',
     columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
-    areaList: AreaListEn,
+    areaList: areaListEn,
   },
 };
 
diff --git a/src/area/test/index.spec.js b/src/area/test/index.spec.js
index bf1a78cf0..44b510316 100644
--- a/src/area/test/index.spec.js
+++ b/src/area/test/index.spec.js
@@ -1,5 +1,5 @@
-import Area from '..';
-import areaList from '../demo/area-simple';
+import { Area } from '..';
+import { areaList } from '../demo/area-simple';
 import { mount, later, triggerDrag } from '../../../test';
 
 const firstOption = [
diff --git a/src/badge/test/index.spec.ts b/src/badge/test/index.spec.ts
index e21272f0a..6c4dab364 100644
--- a/src/badge/test/index.spec.ts
+++ b/src/badge/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Badge from '..';
+import { Badge } from '..';
 import { mount } from '../../../test';
 
 test('should render nothing when content is empty string', () => {
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 2ad21ac69..51c22f521 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -11,8 +11,8 @@ import { BORDER_SURROUND } from '../utils/constant';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
-import Loading, { LoadingType } from '../loading';
+import { Icon } from '../icon';
+import { Loading, LoadingType } from '../loading';
 
 const [name, bem] = createNamespace('button');
 
diff --git a/src/button/test/index.spec.ts b/src/button/test/index.spec.ts
index b3df19119..36accd42e 100644
--- a/src/button/test/index.spec.ts
+++ b/src/button/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import Button from '..';
+import { Button } from '..';
 
 test('should emit click event', () => {
   const wrapper = mount(Button);
diff --git a/src/calendar/Calendar.tsx b/src/calendar/Calendar.tsx
index a93a5c8c0..407b7cda6 100644
--- a/src/calendar/Calendar.tsx
+++ b/src/calendar/Calendar.tsx
@@ -31,9 +31,9 @@ import { useRefs } from '../composables/use-refs';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Popup, { PopupPosition } from '../popup';
-import Button from '../button';
-import Toast from '../toast';
+import { Popup, PopupPosition } from '../popup';
+import { Button } from '../button';
+import { Toast } from '../toast';
 import CalendarMonth, { CalendarType } from './CalendarMonth';
 import CalendarHeader from './CalendarHeader';
 
diff --git a/src/calendar/test/index.legacy.js b/src/calendar/test/index.legacy.js
index 9cf0dddf2..e0f472017 100644
--- a/src/calendar/test/index.legacy.js
+++ b/src/calendar/test/index.legacy.js
@@ -1,4 +1,4 @@
-import Calendar from '..';
+import { Calendar } from '..';
 import { mount, later } from '../../../test';
 import { getNextDay } from '../utils';
 import {
diff --git a/src/calendar/test/index.spec.js b/src/calendar/test/index.spec.js
index 4ee865418..2b02b5855 100644
--- a/src/calendar/test/index.spec.js
+++ b/src/calendar/test/index.spec.js
@@ -1,4 +1,4 @@
-import Calendar from '..';
+import { Calendar } from '..';
 import { mount } from '../../../test';
 import { getNextDay, getPrevDay } from '../utils';
 import { minDate, maxDate } from './utils';
diff --git a/src/calendar/test/prop.legacy.js b/src/calendar/test/prop.legacy.js
index b1b420da3..e4ce255bd 100644
--- a/src/calendar/test/prop.legacy.js
+++ b/src/calendar/test/prop.legacy.js
@@ -1,4 +1,4 @@
-import Calendar from '..';
+import { Calendar } from '..';
 import { mount, later } from '../../../test';
 import { minDate, maxDate, formatRange, formatDate } from './utils';
 
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
index e716e8c8a..5b19e6c9c 100644
--- a/src/card/Card.tsx
+++ b/src/card/Card.tsx
@@ -4,8 +4,8 @@ import { defineComponent } from 'vue';
 import { createNamespace, isDef } from '../utils';
 
 // Components
-import Tag from '../tag';
-import Image from '../image';
+import { Tag } from '../tag';
+import { Image } from '../image';
 
 const [name, bem] = createNamespace('card');
 
diff --git a/src/card/test/index.spec.ts b/src/card/test/index.spec.ts
index 1e9af9c79..31d55d844 100644
--- a/src/card/test/index.spec.ts
+++ b/src/card/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Card from '..';
+import { Card } from '..';
 import { mount } from '../../../test';
 
 test('should emit click event after clicked', () => {
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index 49bca8ce0..7fbac371d 100644
--- a/src/cascader/Cascader.tsx
+++ b/src/cascader/Cascader.tsx
@@ -2,9 +2,9 @@ import { nextTick, PropType, reactive, watch, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
 // Components
-import Tab from '../tab';
-import Tabs from '../tabs';
-import Icon from '../icon';
+import { Tab } from '../tab';
+import { Tabs } from '../tabs';
+import { Icon } from '../icon';
 
 const [name, bem, t] = createNamespace('cascader');
 
diff --git a/src/cascader/test/index.spec.ts b/src/cascader/test/index.spec.ts
index aac7b8fd0..1944f7330 100644
--- a/src/cascader/test/index.spec.ts
+++ b/src/cascader/test/index.spec.ts
@@ -1,6 +1,5 @@
-import Cascader from '..';
+import { Cascader } from '..';
 import { mount, later } from '../../../test';
-
 import options from '../demo/area-en-US';
 
 test('should emit change event when active option changed', async () => {
diff --git a/src/cell-group/test/index.spec.ts b/src/cell-group/test/index.spec.ts
index 62f278c3e..5e098775f 100644
--- a/src/cell-group/test/index.spec.ts
+++ b/src/cell-group/test/index.spec.ts
@@ -1,4 +1,4 @@
-import CellGroup from '..';
+import { CellGroup } from '..';
 import { mount } from '../../../test';
 
 test('should render title slot correctly', () => {
diff --git a/src/cell/Cell.tsx b/src/cell/Cell.tsx
index ec328aef0..8da2f6d28 100644
--- a/src/cell/Cell.tsx
+++ b/src/cell/Cell.tsx
@@ -7,7 +7,7 @@ import { createNamespace, isDef, UnknownProp } from '../utils';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('cell');
 
diff --git a/src/cell/test/index.spec.ts b/src/cell/test/index.spec.ts
index 898f02426..85843977c 100644
--- a/src/cell/test/index.spec.ts
+++ b/src/cell/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Cell from '..';
+import { Cell } from '..';
 import { mount } from '../../../test';
 
 test('should render default slot correctly', () => {
diff --git a/src/checkbox-group/test/index.spec.tsx b/src/checkbox-group/test/index.spec.tsx
index 3ea95e245..76cf8b1a8 100644
--- a/src/checkbox-group/test/index.spec.tsx
+++ b/src/checkbox-group/test/index.spec.tsx
@@ -1,7 +1,7 @@
 import { ref, nextTick } from 'vue';
 import { mount } from '../../../test';
-import Checkbox from '../../checkbox';
-import CheckboxGroup, { CheckboxGroupToggleAllOptions } from '..';
+import { Checkbox } from '../../checkbox';
+import { CheckboxGroup, CheckboxGroupToggleAllOptions } from '..';
 
 test('should emit "update:modelValue" event when checkbox is clicked', async () => {
   const wrapper = mount({
diff --git a/src/checkbox/Checker.tsx b/src/checkbox/Checker.tsx
index 805f5ee25..b30b55996 100644
--- a/src/checkbox/Checker.tsx
+++ b/src/checkbox/Checker.tsx
@@ -1,6 +1,6 @@
 import { ref, computed, PropType, defineComponent } from 'vue';
 import { addUnit, UnknownProp } from '../utils';
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 export type CheckerShape = 'square' | 'round';
 export type CheckerDirection = 'horizontal' | 'vertical';
diff --git a/src/checkbox/test/index.spec.ts b/src/checkbox/test/index.spec.ts
index f709f147d..c486f30fa 100644
--- a/src/checkbox/test/index.spec.ts
+++ b/src/checkbox/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Checkbox from '..';
+import { Checkbox } from '..';
 import { mount } from '../../../test';
 
 test('should emit "update:modelValue" event when checkbox icon is clicked', async () => {
diff --git a/src/circle/test/index.spec.ts b/src/circle/test/index.spec.ts
index bfc9def70..9fcb0aeab 100644
--- a/src/circle/test/index.spec.ts
+++ b/src/circle/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Circle from '..';
+import { Circle } from '..';
 import { mount, later } from '../../../test';
 
 // TODO
diff --git a/src/col/test/index.spec.tsx b/src/col/test/index.spec.tsx
index 3ac2ef5f4..008a3658f 100644
--- a/src/col/test/index.spec.tsx
+++ b/src/col/test/index.spec.tsx
@@ -1,5 +1,5 @@
-import Col from '..';
-import Row from '../../row';
+import { Col } from '..';
+import { Row } from '../../row';
 import { mount } from '../../../test';
 
 test('should render Col correcly', () => {
diff --git a/src/collapse-item/CollapseItem.tsx b/src/collapse-item/CollapseItem.tsx
index f309edec9..fa0ed7b1d 100644
--- a/src/collapse-item/CollapseItem.tsx
+++ b/src/collapse-item/CollapseItem.tsx
@@ -11,7 +11,7 @@ import { useExpose } from '../composables/use-expose';
 import { useLazyRender } from '../composables/use-lazy-render';
 
 // Components
-import Cell from '../cell';
+import { Cell } from '../cell';
 
 const [name, bem] = createNamespace('collapse-item');
 
diff --git a/src/collapse/test/index.spec.tsx b/src/collapse/test/index.spec.tsx
index 5eb41412b..e441caa0c 100644
--- a/src/collapse/test/index.spec.tsx
+++ b/src/collapse/test/index.spec.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, ref } from 'vue';
-import Collapse from '..';
-import CollapseItem from '../../collapse-item';
+import { Collapse } from '..';
+import { CollapseItem } from '../../collapse-item';
 import { later, mount } from '../../../test';
 
 const Component = defineComponent({
diff --git a/src/contact-card/ContactCard.tsx b/src/contact-card/ContactCard.tsx
index b8c9c1e12..fc5dc1e72 100644
--- a/src/contact-card/ContactCard.tsx
+++ b/src/contact-card/ContactCard.tsx
@@ -1,6 +1,6 @@
 import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
-import Cell from '../cell';
+import { Cell } from '../cell';
 
 const [name, bem, t] = createNamespace('contact-card');
 
diff --git a/src/contact-card/demo/index.vue b/src/contact-card/demo/index.vue
index 01a52dc55..6b38f03fd 100644
--- a/src/contact-card/demo/index.vue
+++ b/src/contact-card/demo/index.vue
@@ -25,7 +25,7 @@
 <script lang="ts">
 import { computed } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/contact-card/test/index.spec.ts b/src/contact-card/test/index.spec.ts
index 11c049732..adfb153bd 100644
--- a/src/contact-card/test/index.spec.ts
+++ b/src/contact-card/test/index.spec.ts
@@ -1,4 +1,4 @@
-import ContactCard from '..';
+import { ContactCard } from '..';
 import { mount } from '../../../test';
 
 test('should emit click event when clicked', () => {
diff --git a/src/contact-edit/ContactEdit.tsx b/src/contact-edit/ContactEdit.tsx
index 7b20e42cb..e12f92ed6 100644
--- a/src/contact-edit/ContactEdit.tsx
+++ b/src/contact-edit/ContactEdit.tsx
@@ -5,12 +5,12 @@ import { createNamespace } from '../utils';
 import { isMobile } from '../utils/validate/mobile';
 
 // Components
-import Cell from '../cell';
-import Form from '../form';
-import Field from '../field';
-import Button from '../button';
-import Dialog from '../dialog';
-import Switch from '../switch';
+import { Cell } from '../cell';
+import { Form } from '../form';
+import { Field } from '../field';
+import { Button } from '../button';
+import { Dialog } from '../dialog';
+import { Switch } from '../switch';
 
 const [name, bem, t] = createNamespace('contact-edit');
 
diff --git a/src/contact-edit/demo/index.vue b/src/contact-edit/demo/index.vue
index 1f960fd99..ec7e12801 100644
--- a/src/contact-edit/demo/index.vue
+++ b/src/contact-edit/demo/index.vue
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/contact-edit/test/index.spec.ts b/src/contact-edit/test/index.spec.ts
index 076acda2a..850e4498a 100644
--- a/src/contact-edit/test/index.spec.ts
+++ b/src/contact-edit/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { VueWrapper } from '@vue/test-utils';
-import ContactEdit, { ContactEditInfo } from '..';
+import { ContactEdit, ContactEditInfo } from '..';
 import { mount, later } from '../../../test';
 
 const contactInfo = {
diff --git a/src/contact-list/ContactList.tsx b/src/contact-list/ContactList.tsx
index be9056ff3..57a615821 100644
--- a/src/contact-list/ContactList.tsx
+++ b/src/contact-list/ContactList.tsx
@@ -5,12 +5,12 @@ import { createNamespace, UnknownProp } from '../utils';
 import { RED } from '../utils/constant';
 
 // Components
-import Tag from '../tag';
-import Icon from '../icon';
-import Cell from '../cell';
-import Radio from '../radio';
-import Button from '../button';
-import RadioGroup from '../radio-group';
+import { Tag } from '../tag';
+import { Icon } from '../icon';
+import { Cell } from '../cell';
+import { Radio } from '../radio';
+import { Button } from '../button';
+import { RadioGroup } from '../radio-group';
 
 const [name, bem, t] = createNamespace('contact-list');
 
diff --git a/src/contact-list/demo/index.vue b/src/contact-list/demo/index.vue
index 6dcd6f1e0..2958e7a31 100644
--- a/src/contact-list/demo/index.vue
+++ b/src/contact-list/demo/index.vue
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/contact-list/test/index.spec.ts b/src/contact-list/test/index.spec.ts
index b2e6399aa..291a8f565 100644
--- a/src/contact-list/test/index.spec.ts
+++ b/src/contact-list/test/index.spec.ts
@@ -1,4 +1,4 @@
-import ContactList from '..';
+import { ContactList } from '..';
 import { mount } from '../../../test';
 
 const contactInfo = {
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index cd444c620..a7dd8f857 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -44,7 +44,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ComponentInstance } from '../../utils';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/count-down/test/index.spec.js b/src/count-down/test/index.spec.js
index 8e2324398..e43a32f51 100644
--- a/src/count-down/test/index.spec.js
+++ b/src/count-down/test/index.spec.js
@@ -1,5 +1,5 @@
 import { KeepAlive, nextTick } from 'vue';
-import CountDown from '..';
+import { CountDown } from '..';
 import { mount, later } from '../../../test';
 
 test('should emit finish event when finished', async () => {
diff --git a/src/coupon-cell/CouponCell.tsx b/src/coupon-cell/CouponCell.tsx
index 7c3393675..8ca2f5885 100644
--- a/src/coupon-cell/CouponCell.tsx
+++ b/src/coupon-cell/CouponCell.tsx
@@ -1,9 +1,13 @@
 import { PropType, defineComponent } from 'vue';
+
+// Utils
 import { isDef, createNamespace } from '../utils';
-import type { CouponInfo } from '../coupon';
 
 // Components
-import Cell from '../cell';
+import { Cell } from '../cell';
+
+// Types
+import type { CouponInfo } from '../coupon';
 
 const [name, bem, t] = createNamespace('coupon-cell');
 
diff --git a/src/coupon-cell/test/index.spec.ts b/src/coupon-cell/test/index.spec.ts
index 7a8ae36da..7a7e37c39 100644
--- a/src/coupon-cell/test/index.spec.ts
+++ b/src/coupon-cell/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import CouponCell from '../index';
+import { CouponCell } from '../index';
 
 const coupon = {
   id: 1,
diff --git a/src/coupon-list/CouponList.tsx b/src/coupon-list/CouponList.tsx
index fa0a8f009..7f1a52bd3 100644
--- a/src/coupon-list/CouponList.tsx
+++ b/src/coupon-list/CouponList.tsx
@@ -16,11 +16,11 @@ import { useWindowSize } from '@vant/use';
 import { useRefs } from '../composables/use-refs';
 
 // Components
-import Tab from '../tab';
-import Tabs from '../tabs';
-import Field from '../field';
-import Button from '../button';
-import Coupon, { CouponInfo } from '../coupon';
+import { Tab } from '../tab';
+import { Tabs } from '../tabs';
+import { Field } from '../field';
+import { Button } from '../button';
+import { Coupon, CouponInfo } from '../coupon';
 
 const [name, bem, t] = createNamespace('coupon-list');
 const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
diff --git a/src/coupon-list/demo/index.vue b/src/coupon-list/demo/index.vue
index 4fefdbd41..eb8a94b4b 100644
--- a/src/coupon-list/demo/index.vue
+++ b/src/coupon-list/demo/index.vue
@@ -27,7 +27,7 @@
 import { computed, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { CouponInfo } from '../../coupon';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/coupon-list/test/index.spec.ts b/src/coupon-list/test/index.spec.ts
index ec8528197..2cd3b0845 100644
--- a/src/coupon-list/test/index.spec.ts
+++ b/src/coupon-list/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { later, mount } from '../../../test';
-import CouponList from '..';
+import { CouponList } from '..';
 
 const coupon = {
   id: 1,
diff --git a/src/coupon/Coupon.tsx b/src/coupon/Coupon.tsx
index 4a626c1ce..720ab59b0 100644
--- a/src/coupon/Coupon.tsx
+++ b/src/coupon/Coupon.tsx
@@ -1,7 +1,7 @@
 import { computed, PropType, defineComponent } from 'vue';
 import { padZero, createNamespace } from '../utils';
 import { RED } from '../utils/constant';
-import Checkbox from '../checkbox';
+import { Checkbox } from '../checkbox';
 
 export type CouponInfo = {
   id: string | number;
diff --git a/src/coupon/test/index.spec.ts b/src/coupon/test/index.spec.ts
index aa47b22d0..da2f0c6f6 100644
--- a/src/coupon/test/index.spec.ts
+++ b/src/coupon/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import Coupon from '..';
+import { Coupon } from '..';
 
 const coupon = {
   id: 1,
diff --git a/src/datetime-picker/DatePicker.tsx b/src/datetime-picker/DatePicker.tsx
index 78866a74c..318066c6b 100644
--- a/src/datetime-picker/DatePicker.tsx
+++ b/src/datetime-picker/DatePicker.tsx
@@ -31,7 +31,7 @@ import {
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Picker from '../picker';
+import { Picker } from '../picker';
 
 const currentYear = new Date().getFullYear();
 const [name] = createNamespace('date-picker');
diff --git a/src/datetime-picker/TimePicker.tsx b/src/datetime-picker/TimePicker.tsx
index 22bd4ba67..895c12073 100644
--- a/src/datetime-picker/TimePicker.tsx
+++ b/src/datetime-picker/TimePicker.tsx
@@ -21,7 +21,7 @@ import { times, sharedProps, pickerKeys } from './utils';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Picker from '../picker';
+import { Picker } from '../picker';
 
 const [name] = createNamespace('time-picker');
 
diff --git a/src/datetime-picker/test/datetime-picker.legacy.js b/src/datetime-picker/test/datetime-picker.legacy.js
index 310d911c5..91d8287d9 100644
--- a/src/datetime-picker/test/datetime-picker.legacy.js
+++ b/src/datetime-picker/test/datetime-picker.legacy.js
@@ -1,4 +1,4 @@
-import DatetimePicker from '..';
+import { DatetimePicker } from '..';
 import { mount } from '../../../test';
 
 test('confirm & cancel event', () => {
diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
index 84b555e8f..72e1b5fc0 100644
--- a/src/dialog/Dialog.tsx
+++ b/src/dialog/Dialog.tsx
@@ -4,13 +4,13 @@ import { PropType, reactive, defineComponent } from 'vue';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 import { createNamespace, addUnit, pick, UnknownProp } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
+import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 // Components
-import Popup from '../popup';
-import Button from '../button';
-import ActionBar from '../action-bar';
-import ActionBarButton from '../action-bar-button';
-import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
+import { Popup } from '../popup';
+import { Button } from '../button';
+import { ActionBar } from '../action-bar';
+import { ActionBarButton } from '../action-bar-button';
 
 const [name, bem, t] = createNamespace('dialog');
 
diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue
index 12ab6edcb..d8206066f 100644
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Dialog from '..';
+import { Dialog } from '..';
 import type { DialogAction } from '../Dialog';
 
 const i18n = {
diff --git a/src/dialog/test/funciton-call.spec.js b/src/dialog/test/funciton-call.spec.js
index fd84f5e2f..34517e860 100644
--- a/src/dialog/test/funciton-call.spec.js
+++ b/src/dialog/test/funciton-call.spec.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import { later } from '../../../test';
-import Dialog from '..';
+import { Dialog } from '..';
 import DialogComponent from '../Dialog';
 
 test('should update default options when calling setDefaultOptions method', () => {
diff --git a/src/dropdown-item/DropdownItem.tsx b/src/dropdown-item/DropdownItem.tsx
index 2e4aa3d34..5d2938a33 100644
--- a/src/dropdown-item/DropdownItem.tsx
+++ b/src/dropdown-item/DropdownItem.tsx
@@ -19,9 +19,9 @@ import { useParent } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Cell from '../cell';
-import Icon from '../icon';
-import Popup from '../popup';
+import { Cell } from '../cell';
+import { Icon } from '../icon';
+import { Popup } from '../popup';
 
 const [name, bem] = createNamespace('dropdown-item');
 
diff --git a/src/empty/test/index.spec.ts b/src/empty/test/index.spec.ts
index 554dde581..356a8e243 100644
--- a/src/empty/test/index.spec.ts
+++ b/src/empty/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Empty from '..';
+import { Empty } from '..';
 import { mount } from '../../../test';
 
 test('should render image slot correctly', () => {
diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index 40adfc444..77742cf70 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -37,8 +37,8 @@ import { useExpose } from '../composables/use-expose';
 import { FORM_KEY, FIELD_KEY } from '../composables/use-link-field';
 
 // Components
-import Icon from '../icon';
-import Cell from '../cell';
+import { Icon } from '../icon';
+import { Cell } from '../cell';
 
 // Types
 import type {
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index 2e4209e99..dc557c714 100644
--- a/src/field/test/index.spec.js
+++ b/src/field/test/index.spec.js
@@ -1,4 +1,4 @@
-import Field from '..';
+import { Field } from '..';
 import { mount } from '../../../test';
 
 test('should emit "update:modelValue" event when after inputing', () => {
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index 21850673c..6bd10d434 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -21,18 +21,18 @@
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { AreaColumnOption } from '../../area';
-import AreaList from '../../area/demo/area';
-import AreaListEn from '../../area/demo/area-en';
+import { areaList } from '../../area/demo/area';
+import { areaListEn } from '../../area/demo/area-en';
 
 const i18n = {
   'zh-CN': {
     picker: '地区选择',
-    areaList: AreaList,
+    areaList,
     placeholder: '点击选择省市区',
   },
   'en-US': {
     picker: 'Area Picker',
-    areaList: AreaListEn,
+    areaList: areaListEn,
     placeholder: 'Select area',
   },
 };
diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue
index d957e034a..a5adf25ec 100644
--- a/src/form/demo/ValidateRules.vue
+++ b/src/form/demo/ValidateRules.vue
@@ -42,7 +42,7 @@
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { FieldValidateError } from '../../field/types';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/grid-item/GridItem.tsx b/src/grid-item/GridItem.tsx
index b3bf0f823..5971aa542 100644
--- a/src/grid-item/GridItem.tsx
+++ b/src/grid-item/GridItem.tsx
@@ -10,8 +10,8 @@ import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
-import Badge from '../badge';
+import { Icon } from '../icon';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('grid-item');
 
diff --git a/src/grid/test/index.spec.js b/src/grid/test/index.spec.js
index 1baad5eca..d73e21f9d 100644
--- a/src/grid/test/index.spec.js
+++ b/src/grid/test/index.spec.js
@@ -1,6 +1,6 @@
 import { mount } from '../../../test';
-import Grid from '..';
-import GridItem from '../../grid-item';
+import { Grid } from '..';
+import { GridItem } from '../../grid-item';
 
 test('should render square grid with gutter correctly', () => {
   const wrapper = mount({
diff --git a/src/icon/Icon.tsx b/src/icon/Icon.tsx
index ee84b7f27..4d8a27abb 100644
--- a/src/icon/Icon.tsx
+++ b/src/icon/Icon.tsx
@@ -1,6 +1,6 @@
 import { PropType, defineComponent } from 'vue';
 import { addUnit, createNamespace } from '../utils';
-import Badge from '../badge';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('icon');
 
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 634e7c215..96dcc324b 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -98,7 +98,7 @@ import icons from '@vant/icons';
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { RED } from '../../utils/constant';
-import Notify from '../../notify';
+import { Notify } from '../../notify';
 
 // from https://30secondsofcode.org
 function copyToClipboard(str: string) {
diff --git a/src/icon/test/index.spec.js b/src/icon/test/index.spec.js
index d4b17a981..26fcaf009 100644
--- a/src/icon/test/index.spec.js
+++ b/src/icon/test/index.spec.js
@@ -1,4 +1,4 @@
-import Icon from '..';
+import { Icon } from '..';
 import { mount } from '../../../test';
 
 test('should render icon with builtin icon name correctly', () => {
diff --git a/src/image-preview/ImagePreview.tsx b/src/image-preview/ImagePreview.tsx
index bcd19b416..16b676fc7 100644
--- a/src/image-preview/ImagePreview.tsx
+++ b/src/image-preview/ImagePreview.tsx
@@ -23,9 +23,9 @@ import { useWindowSize } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Icon from '../icon';
-import Swipe, { SwipeToOptions } from '../swipe';
-import Popup, { PopupCloseIconPosition } from '../popup';
+import { Icon } from '../icon';
+import { Swipe, SwipeToOptions } from '../swipe';
+import { Popup, PopupCloseIconPosition } from '../popup';
 import ImagePreviewItem from './ImagePreviewItem';
 
 const [name, bem] = createNamespace('image-preview');
diff --git a/src/image-preview/ImagePreviewItem.tsx b/src/image-preview/ImagePreviewItem.tsx
index 8f48ec03b..154cacd06 100644
--- a/src/image-preview/ImagePreviewItem.tsx
+++ b/src/image-preview/ImagePreviewItem.tsx
@@ -6,10 +6,10 @@ import { range, preventDefault, createNamespace } from '../utils';
 // Composables
 import { useTouch } from '../composables/use-touch';
 
-// Component
-import Image from '../image';
-import Loading from '../loading';
-import SwipeItem from '../swipe-item';
+// Components
+import { Image } from '../image';
+import { Loading } from '../loading';
+import { SwipeItem } from '../swipe-item';
 
 function getDistance(touches: TouchList) {
   return Math.sqrt(
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index 59f6c6a8b..355e0f5d4 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -36,8 +36,8 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import ImagePreview, { ImagePreviewOptions } from '..';
-import Toast from '../../toast';
+import { ImagePreview, ImagePreviewOptions } from '..';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/image-preview/test/function.spec.ts b/src/image-preview/test/function.spec.ts
index c6a274ea0..d2412a710 100644
--- a/src/image-preview/test/function.spec.ts
+++ b/src/image-preview/test/function.spec.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import ImagePreview from '..';
+import { ImagePreview } from '..';
 import ImagePreviewComponent from '../ImagePreview';
 
 test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
diff --git a/src/image-preview/test/index.spec.ts b/src/image-preview/test/index.spec.ts
index 8e9590f29..b58ee2663 100644
--- a/src/image-preview/test/index.spec.ts
+++ b/src/image-preview/test/index.spec.ts
@@ -1,14 +1,14 @@
+import { nextTick } from 'vue';
+import { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
 import {
   mount,
   later,
+  trigger,
   triggerDrag,
   mockGetBoundingClientRect,
-  trigger,
 } from '../../../test';
+import { ImagePreview } from '..';
 import ImagePreviewComponent from '../ImagePreview';
-import ImagePreview from '..';
-import { nextTick } from 'vue';
-import { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
 
 const images = [
   'https://img.yzcdn.cn/1.png',
diff --git a/src/image/Image.tsx b/src/image/Image.tsx
index 8e80b7ea3..19ba26291 100644
--- a/src/image/Image.tsx
+++ b/src/image/Image.tsx
@@ -1,3 +1,4 @@
+// Utils
 import {
   ref,
   watch,
@@ -15,7 +16,9 @@ import {
   createNamespace,
   ComponentInstance,
 } from '../utils';
-import Icon from '../icon';
+
+// Components
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('image');
 
diff --git a/src/image/test/index.spec.ts b/src/image/test/index.spec.ts
index 0a2d1d7f5..47ac573a3 100644
--- a/src/image/test/index.spec.ts
+++ b/src/image/test/index.spec.ts
@@ -1,6 +1,6 @@
 import { mount } from '../../../test';
+import { Lazyload } from '../../lazyload';
 import VanImage from '..';
-import Lazyload from '../../lazyload';
 
 const IMAGE_URL = 'https://img.com';
 
diff --git a/src/index-bar/test/index.spec.js b/src/index-bar/test/index.spec.js
index dcda50ed0..6d5e441bd 100644
--- a/src/index-bar/test/index.spec.js
+++ b/src/index-bar/test/index.spec.js
@@ -1,4 +1,4 @@
-import { nextTick, onMounted, ref } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';
 import {
   mount,
   trigger,
@@ -6,8 +6,8 @@ import {
   mockScrollTop,
   mockScrollIntoView,
 } from '../../../test';
-import IndexBar from '..';
-import IndexAnchor from '../../index-anchor';
+import { IndexBar } from '..';
+import { IndexAnchor } from '../../index-anchor';
 
 test('should allow to custom anchor content', () => {
   const wrapper = mount({
diff --git a/src/lazyload/index.ts b/src/lazyload/index.ts
index 955e8d635..50e60fb46 100644
--- a/src/lazyload/index.ts
+++ b/src/lazyload/index.ts
@@ -1,3 +1,4 @@
 import { Lazyload } from '@vant/lazyload';
 
 export default Lazyload;
+export { Lazyload };
diff --git a/src/list/List.tsx b/src/list/List.tsx
index 7d2a783f2..be7cb4938 100644
--- a/src/list/List.tsx
+++ b/src/list/List.tsx
@@ -16,7 +16,7 @@ import { useRect, useScrollParent, useEventListener } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Loading from '../loading';
+import { Loading } from '../loading';
 
 const [name, bem, t] = createNamespace('list');
 
diff --git a/src/list/test/index.spec.js b/src/list/test/index.spec.js
index 138b18471..aa49d32c0 100644
--- a/src/list/test/index.spec.js
+++ b/src/list/test/index.spec.js
@@ -1,4 +1,4 @@
-import List from '..';
+import { List } from '..';
 import { mount, later, mockGetBoundingClientRect } from '../../../test';
 
 test('should emit load event when reaching bottom', async () => {
diff --git a/src/loading/test/index.spec.ts b/src/loading/test/index.spec.ts
index 0f2401f9f..3d75fe6c8 100644
--- a/src/loading/test/index.spec.ts
+++ b/src/loading/test/index.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import Loading from '..';
+import { Loading } from '..';
 
 test('should change loading size when using size prop', () => {
   const wrapper = mount(Loading, {
diff --git a/src/nav-bar/NavBar.tsx b/src/nav-bar/NavBar.tsx
index 0ce9efc89..0cf4fc446 100644
--- a/src/nav-bar/NavBar.tsx
+++ b/src/nav-bar/NavBar.tsx
@@ -8,7 +8,7 @@ import { BORDER_BOTTOM } from '../utils/constant';
 import { usePlaceholder } from '../composables/use-placeholder';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('nav-bar');
 
diff --git a/src/nav-bar/demo/index.vue b/src/nav-bar/demo/index.vue
index c39affd22..089fd0c9f 100644
--- a/src/nav-bar/demo/index.vue
+++ b/src/nav-bar/demo/index.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/nav-bar/test/index.spec.ts b/src/nav-bar/test/index.spec.ts
index 6a3c0f587..8d5cf699b 100644
--- a/src/nav-bar/test/index.spec.ts
+++ b/src/nav-bar/test/index.spec.ts
@@ -1,4 +1,4 @@
-import NavBar from '..';
+import { NavBar } from '..';
 import { mount, mockGetBoundingClientRect, later } from '../../../test';
 
 test('should render left slot correctly', () => {
diff --git a/src/notice-bar/NoticeBar.tsx b/src/notice-bar/NoticeBar.tsx
index 1e89c69cb..3f95dc7c1 100644
--- a/src/notice-bar/NoticeBar.tsx
+++ b/src/notice-bar/NoticeBar.tsx
@@ -1,4 +1,6 @@
 import { ref, watch, reactive, PropType, defineComponent } from 'vue';
+
+// Utils
 import { isDef, createNamespace } from '../utils';
 
 // Composables
@@ -11,7 +13,7 @@ import {
 } from '@vant/use';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 export type NoticeBarMode = 'closeable' | 'link';
 
diff --git a/src/notice-bar/test/index.spec.tsx b/src/notice-bar/test/index.spec.tsx
index 8e6e577df..b9859a295 100644
--- a/src/notice-bar/test/index.spec.tsx
+++ b/src/notice-bar/test/index.spec.tsx
@@ -1,4 +1,4 @@
-import NoticeBar from '..';
+import { NoticeBar } from '..';
 import { mount, later } from '../../../test';
 
 test('should emit close event when close icon is clicked', () => {
diff --git a/src/notify/Notify.tsx b/src/notify/Notify.tsx
index 956884e8d..42e9abb09 100644
--- a/src/notify/Notify.tsx
+++ b/src/notify/Notify.tsx
@@ -1,6 +1,6 @@
 import { PropType, defineComponent } from 'vue';
 import { createNamespace, UnknownProp } from '../utils';
-import Popup from '../popup';
+import { Popup } from '../popup';
 import { popupSharedProps } from '../popup/shared';
 
 const [name, bem] = createNamespace('notify');
diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue
index ed8e94d77..a987c959c 100644
--- a/src/notify/demo/index.vue
+++ b/src/notify/demo/index.vue
@@ -32,7 +32,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Notify from '..';
+import { Notify } from '..';
 import { NotifyType } from '../Notify';
 
 const i18n = {
diff --git a/src/notify/test/index.spec.js b/src/notify/test/index.spec.js
index 6704bc2f0..777677e6a 100644
--- a/src/notify/test/index.spec.js
+++ b/src/notify/test/index.spec.js
@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
-import Notify from '..';
-import NotifyComponent from '../Notify';
 import { later } from '../../../test';
 import { trigger } from '../../utils';
+import { Notify } from '..';
+import NotifyComponent from '../Notify';
 
 test('should not throw error if calling clear method before render notify', () => {
   Notify.clear();
diff --git a/src/number-keyboard/NumberKeyboardKey.tsx b/src/number-keyboard/NumberKeyboardKey.tsx
index e8e5a6a43..deb42f622 100644
--- a/src/number-keyboard/NumberKeyboardKey.tsx
+++ b/src/number-keyboard/NumberKeyboardKey.tsx
@@ -1,7 +1,7 @@
 import { ref, PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { useTouch } from '../composables/use-touch';
-import Loading from '../loading';
+import { Loading } from '../loading';
 
 const [name, bem] = createNamespace('key');
 
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index 202a07992..ca28f6ec9 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -92,7 +92,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/number-keyboard/test/index.spec.ts b/src/number-keyboard/test/index.spec.ts
index 74f2cf3a1..443fc3b6f 100644
--- a/src/number-keyboard/test/index.spec.ts
+++ b/src/number-keyboard/test/index.spec.ts
@@ -1,4 +1,4 @@
-import NumberKeyboard from '..';
+import { NumberKeyboard } from '..';
 import { mount, trigger, later } from '../../../test';
 
 function clickKey(key: Parameters<typeof trigger>[0]) {
diff --git a/src/overlay/test/index.spec.tsx b/src/overlay/test/index.spec.tsx
index ed70b4b62..6fca42ae6 100644
--- a/src/overlay/test/index.spec.tsx
+++ b/src/overlay/test/index.spec.tsx
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import Overlay from '..';
+import { Overlay } from '..';
 
 test('should change z-index when using z-index prop', () => {
   const wrapper = mount(Overlay, {
diff --git a/src/pagination/test/index.spec.ts b/src/pagination/test/index.spec.ts
index ad7ada5d8..85d1aa726 100644
--- a/src/pagination/test/index.spec.ts
+++ b/src/pagination/test/index.spec.ts
@@ -1,8 +1,8 @@
 import { mount } from '../../../test';
-import Paginaion from '..';
+import { Pagination } from '..';
 
 test('should render prev-text、next-text slot correctly', () => {
-  const wrapper = mount(Paginaion, {
+  const wrapper = mount(Pagination, {
     props: {
       totalItems: 50,
       showPageSize: 5,
@@ -17,7 +17,7 @@ test('should render prev-text、next-text slot correctly', () => {
 });
 
 test('should render page slot correctly', () => {
-  const wrapper = mount(Paginaion, {
+  const wrapper = mount(Pagination, {
     props: {
       totalItems: 50,
       showPageSize: 5,
diff --git a/src/password-input/test/index.spec.ts b/src/password-input/test/index.spec.ts
index 3de5c76e7..1fbcfea3d 100644
--- a/src/password-input/test/index.spec.ts
+++ b/src/password-input/test/index.spec.ts
@@ -1,5 +1,5 @@
-import PasswordInput from '..';
 import { mount } from '../../../test';
+import { PasswordInput } from '..';
 
 test('should emit focus event when security is touched', () => {
   const wrapper = mount(PasswordInput);
diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx
index 726364549..28c7efc27 100644
--- a/src/picker/Picker.tsx
+++ b/src/picker/Picker.tsx
@@ -14,7 +14,7 @@ import { useChildren } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Loading from '../loading';
+import { Loading } from '../loading';
 import Column, {
   PICKER_KEY,
   PickerColumn,
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index 677c62c04..c6e531eeb 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -77,7 +77,7 @@
 import { ref, computed, reactive, toRefs } from 'vue';
 import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/picker/test/cascade.legacy.js b/src/picker/test/cascade.legacy.js
index cb4d34c9e..7a410acab 100644
--- a/src/picker/test/cascade.legacy.js
+++ b/src/picker/test/cascade.legacy.js
@@ -1,4 +1,4 @@
-import Picker from '..';
+import { Picker } from '..';
 import { mount, triggerDrag } from '../../../test';
 
 const COLUMNS = [
diff --git a/src/picker/test/index.spec.tsx b/src/picker/test/index.spec.tsx
index 475587a7b..1ef31bafd 100644
--- a/src/picker/test/index.spec.tsx
+++ b/src/picker/test/index.spec.tsx
@@ -1,6 +1,6 @@
-import Picker from '..';
-import PickerColumn from '../PickerColumn';
 import { later, mount, triggerDrag } from '../../../test';
+import { Picker } from '..';
+import PickerColumn from '../PickerColumn';
 
 const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
 const columns = [
diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
index 09578bb99..219e48024 100644
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -18,8 +18,8 @@ import { BORDER_BOTTOM } from '../utils/constant';
 import { useClickAway } from '@vant/use';
 
 // Components
-import Icon from '../icon';
-import Popup from '../popup';
+import { Icon } from '../icon';
+import { Popup } from '../popup';
 
 const [name, bem] = createNamespace('popover');
 
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index a36269ccd..f809b9411 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -122,7 +122,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/popover/test/index.spec.tsx b/src/popover/test/index.spec.tsx
index 6feb20598..76ac06f5b 100644
--- a/src/popover/test/index.spec.tsx
+++ b/src/popover/test/index.spec.tsx
@@ -1,4 +1,4 @@
-import Popover from '..';
+import { Popover } from '..';
 import { later, mount, trigger } from '../../../test';
 
 const baseActions = [
diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
index a52383b62..9e9ccb7ff 100644
--- a/src/popup/Popup.tsx
+++ b/src/popup/Popup.tsx
@@ -23,8 +23,8 @@ import { useLockScroll } from '../composables/use-lock-scroll';
 import { useLazyRender } from '../composables/use-lazy-render';
 
 // Components
-import Icon from '../icon';
-import Overlay from '../overlay';
+import { Icon } from '../icon';
+import { Overlay } from '../overlay';
 
 export type PopupPosition = 'top' | 'left' | 'bottom' | 'right' | 'center' | '';
 
diff --git a/src/popup/test/index.spec.js b/src/popup/test/index.spec.js
index 6c9c8c6a1..930e92c31 100644
--- a/src/popup/test/index.spec.js
+++ b/src/popup/test/index.spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { mount, triggerDrag } from '../../../test';
-import Popup from '..';
+import { Popup } from '..';
 
 let wrapper;
 afterEach(() => {
diff --git a/src/progress/test/index.spec.ts b/src/progress/test/index.spec.ts
index 400d0979e..e92e583e4 100644
--- a/src/progress/test/index.spec.ts
+++ b/src/progress/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Progress from '..';
+import { Progress } from '..';
 import { mount } from '../../../test';
 
 test('should re-calc width if showing pivot dynamically', async () => {
diff --git a/src/pull-refresh/PullRefresh.tsx b/src/pull-refresh/PullRefresh.tsx
index c844bf1b1..3becd3dc7 100644
--- a/src/pull-refresh/PullRefresh.tsx
+++ b/src/pull-refresh/PullRefresh.tsx
@@ -8,7 +8,7 @@ import { useScrollParent } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 
 // Components
-import Loading from '../loading';
+import { Loading } from '../loading';
 
 const [name, bem, t] = createNamespace('pull-refresh');
 
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index 055f71f80..acb99af75 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -44,7 +44,7 @@
 <script lang="ts">
 import { computed, onMounted, reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/pull-refresh/test/index.spec.ts b/src/pull-refresh/test/index.spec.ts
index 5cb20c0de..40ff4f152 100644
--- a/src/pull-refresh/test/index.spec.ts
+++ b/src/pull-refresh/test/index.spec.ts
@@ -1,4 +1,4 @@
-import PullRefresh from '..';
+import { PullRefresh } from '..';
 import {
   mount,
   later,
diff --git a/src/radio-group/test/index.spec.tsx b/src/radio-group/test/index.spec.tsx
index b1bca4c1e..c9390daec 100644
--- a/src/radio-group/test/index.spec.tsx
+++ b/src/radio-group/test/index.spec.tsx
@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 import { mount } from '../../../test';
-import RadioGroup from '../index';
-import Radio from '../../radio';
+import { Radio } from '../../radio';
+import { RadioGroup } from '../index';
 
 test('should emit "update:modelValue" and "change" event when radio is clicked', async () => {
   const wrapper = mount({
diff --git a/src/radio/test/index.spec.ts b/src/radio/test/index.spec.ts
index 9aed26026..094dc44b6 100644
--- a/src/radio/test/index.spec.ts
+++ b/src/radio/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Radio from '..';
+import { Radio } from '..';
 import { mount } from '../../../test';
 
 test('should emit "update:modelValue" event when radio icon or label is clicked', async () => {
diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx
index f983a9b41..d60ce70fb 100644
--- a/src/rate/Rate.tsx
+++ b/src/rate/Rate.tsx
@@ -9,7 +9,7 @@ import { useTouch } from '../composables/use-touch';
 import { useLinkField } from '../composables/use-link-field';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('rate');
 
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index c3526f069..c5631050d 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -47,7 +47,7 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/rate/test/index.spec.ts b/src/rate/test/index.spec.ts
index aacb23ca8..50b94d662 100644
--- a/src/rate/test/index.spec.ts
+++ b/src/rate/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Rate from '..';
+import { Rate } from '..';
 import { mount, triggerDrag } from '../../../test';
 import type { DOMWrapper } from '@vue/test-utils';
 
diff --git a/src/search/Search.tsx b/src/search/Search.tsx
index e6061850e..8bfeccdcc 100644
--- a/src/search/Search.tsx
+++ b/src/search/Search.tsx
@@ -12,7 +12,7 @@ import {
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Field from '../field';
+import { Field } from '../field';
 
 // Types
 import type { FieldClearTrigger } from '../field/types';
diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue
index 083b7095a..5a8d7cb03 100644
--- a/src/search/demo/index.vue
+++ b/src/search/demo/index.vue
@@ -54,7 +54,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/search/test/index.spec.ts b/src/search/test/index.spec.ts
index dbeb427e0..38d633bff 100644
--- a/src/search/test/index.spec.ts
+++ b/src/search/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Search from '..';
+import { Search } from '..';
 import { mount } from '../../../test';
 import type { ComponentInstance } from '../../utils';
 
diff --git a/src/share-sheet/ShareSheet.tsx b/src/share-sheet/ShareSheet.tsx
index 1fa1e69e6..110d4a601 100644
--- a/src/share-sheet/ShareSheet.tsx
+++ b/src/share-sheet/ShareSheet.tsx
@@ -2,10 +2,10 @@ import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, pick } from '../utils';
+import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 // Components
-import Popup from '../popup';
-import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
+import { Popup } from '../popup';
 
 export type ShareSheetOption = {
   name: string;
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index f1a5490dc..68906dd63 100644
--- a/src/share-sheet/demo/index.vue
+++ b/src/share-sheet/demo/index.vue
@@ -44,7 +44,7 @@
 import { computed, reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ShareSheetOption, ShareSheetOptions } from '..';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/share-sheet/test/index.spec.ts b/src/share-sheet/test/index.spec.ts
index 1d24e9a48..457b1ea14 100644
--- a/src/share-sheet/test/index.spec.ts
+++ b/src/share-sheet/test/index.spec.ts
@@ -1,4 +1,4 @@
-import ShareSheet from '..';
+import { ShareSheet } from '..';
 import { mount, trigger, later } from '../../../test';
 
 test('should render cancel text when using cancel-text prop', async () => {
diff --git a/src/sidebar-item/SidebarItem.tsx b/src/sidebar-item/SidebarItem.tsx
index 09104d876..dce6fe287 100644
--- a/src/sidebar-item/SidebarItem.tsx
+++ b/src/sidebar-item/SidebarItem.tsx
@@ -9,7 +9,7 @@ import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import Badge from '../badge';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('sidebar-item');
 
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index da1948568..6b19ef1a3 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -41,7 +41,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/sidebar/test/index.spec.tsx b/src/sidebar/test/index.spec.tsx
index f1c46c319..68afeb8d7 100644
--- a/src/sidebar/test/index.spec.tsx
+++ b/src/sidebar/test/index.spec.tsx
@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 import { mount } from '../../../test';
-import Sidebar from '..';
-import SidebarItem from '../../sidebar-item';
+import { Sidebar } from '..';
+import { SidebarItem } from '../../sidebar-item';
 
 test('should emit change event when active item changed', () => {
   const onChange = jest.fn();
diff --git a/src/skeleton/test/index.spec.tsx b/src/skeleton/test/index.spec.tsx
index 8fbcb02c8..cc543aa9b 100644
--- a/src/skeleton/test/index.spec.tsx
+++ b/src/skeleton/test/index.spec.tsx
@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import Skeleton from '..';
+import { Skeleton } from '..';
 
 test('should render with row width array correctly', () => {
   const wrapper = mount(Skeleton, {
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index 9602cf0e9..c009d8eaa 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -53,7 +53,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/slider/test/index.spec.ts b/src/slider/test/index.spec.ts
index ee8c2f72e..2002ed048 100644
--- a/src/slider/test/index.spec.ts
+++ b/src/slider/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Slider from '..';
+import { Slider } from '..';
 import {
   mount,
   trigger,
diff --git a/src/step/Step.tsx b/src/step/Step.tsx
index 8e43c39c0..c4452aacd 100644
--- a/src/step/Step.tsx
+++ b/src/step/Step.tsx
@@ -9,7 +9,7 @@ import { STEPS_KEY, StepsProvide } from '../steps/Steps';
 import { useParent } from '@vant/use';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('step');
 
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index 7cfb18cb5..5386151ff 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -48,7 +48,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/stepper/test/index.spec.ts b/src/stepper/test/index.spec.ts
index 22cba4bf3..6c9910370 100644
--- a/src/stepper/test/index.spec.ts
+++ b/src/stepper/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Stepper from '..';
+import { Stepper } from '..';
 import { mount, later } from '../../../test';
 
 test('should disable buttons and input when using disabled prop', () => {
diff --git a/src/steps/test/index.spec.tsx b/src/steps/test/index.spec.tsx
index 3d35f6b53..2bca8898a 100644
--- a/src/steps/test/index.spec.tsx
+++ b/src/steps/test/index.spec.tsx
@@ -1,6 +1,6 @@
 import { mount } from '../../../test';
-import Step from '../../step';
-import Steps from '..';
+import { Step } from '../../step';
+import { Steps } from '..';
 
 test('should render icon slot correctly', () => {
   const wrapper = mount({
diff --git a/src/sticky/test/index.spec.js b/src/sticky/test/index.spec.js
index 0501a4a9d..5328af18c 100644
--- a/src/sticky/test/index.spec.js
+++ b/src/sticky/test/index.spec.js
@@ -1,6 +1,6 @@
 import { nextTick, ref } from 'vue';
 import { mockScrollTop, mount } from '../../../test';
-import Sticky from '..';
+import { Sticky } from '..';
 
 Object.defineProperty(window.HTMLElement.prototype, 'clientHeight', {
   value: 640,
diff --git a/src/submit-bar/SubmitBar.tsx b/src/submit-bar/SubmitBar.tsx
index 882c2ab35..925282fa5 100644
--- a/src/submit-bar/SubmitBar.tsx
+++ b/src/submit-bar/SubmitBar.tsx
@@ -2,8 +2,8 @@ import { PropType, CSSProperties, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
 // Components
-import Icon from '../icon';
-import Button, { ButtonType } from '../button';
+import { Icon } from '../icon';
+import { Button, ButtonType } from '../button';
 
 const [name, bem, t] = createNamespace('submit-bar');
 
diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue
index 4b2361ca7..4d7eaeafc 100644
--- a/src/submit-bar/demo/index.vue
+++ b/src/submit-bar/demo/index.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/submit-bar/test/index.spec.ts b/src/submit-bar/test/index.spec.ts
index b1e3b9d1f..2e960f847 100644
--- a/src/submit-bar/test/index.spec.ts
+++ b/src/submit-bar/test/index.spec.ts
@@ -1,4 +1,4 @@
-import SubmitBar from '..';
+import { SubmitBar } from '..';
 import { mount } from '../../../test';
 
 test('should emit submit event when submit button is clicked', () => {
diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue
index be8dd21de..bcb227ef6 100644
--- a/src/swipe-cell/demo/index.vue
+++ b/src/swipe-cell/demo/index.vue
@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import { useTranslate } from '@demo/use-translate';
-import Dialog from '../../dialog';
+import { Dialog } from '../../dialog';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/swipe-cell/test/index.spec.js b/src/swipe-cell/test/index.spec.js
index e3401e714..dc11d4de1 100644
--- a/src/swipe-cell/test/index.spec.js
+++ b/src/swipe-cell/test/index.spec.js
@@ -1,8 +1,8 @@
-import SwipeCell from '..';
+import { SwipeCell } from '..';
 import {
   mount,
-  triggerDrag,
   later,
+  triggerDrag,
   mockGetBoundingClientRect,
 } from '../../../test';
 
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index a504a9166..f5eaaed3a 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -66,7 +66,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/swipe/test/index.spec.js b/src/swipe/test/index.spec.js
index a9db8abb9..ecece9c4c 100644
--- a/src/swipe/test/index.spec.js
+++ b/src/swipe/test/index.spec.js
@@ -6,8 +6,8 @@ import {
   triggerDrag,
   mockGetBoundingClientRect,
 } from '../../../test';
-import Swipe from '..';
-import SwipeItem from '../../swipe-item';
+import { Swipe } from '..';
+import { SwipeItem } from '../../swipe-item';
 
 let restore;
 
diff --git a/src/switch/Switch.tsx b/src/switch/Switch.tsx
index eefc985a1..08e8e3b3d 100644
--- a/src/switch/Switch.tsx
+++ b/src/switch/Switch.tsx
@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import { createNamespace, addUnit, UnknownProp } from '../utils';
 import { useLinkField } from '../composables/use-link-field';
-import Loading from '../loading';
+import { Loading } from '../loading';
 
 const [name, bem] = createNamespace('switch');
 
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index f9b9b0903..b78eb38d4 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -39,7 +39,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Dialog from '../../dialog';
+import { Dialog } from '../../dialog';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/switch/test/index.spec.ts b/src/switch/test/index.spec.ts
index 88aef616a..17d20bfd9 100644
--- a/src/switch/test/index.spec.ts
+++ b/src/switch/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Switch from '..';
+import { Switch } from '..';
 import { mount } from '../../../test';
 
 test('should emit update:modelValue event when click the switch button', async () => {
diff --git a/src/tab/Tab.tsx b/src/tab/Tab.tsx
index a3c6e662b..4648cbef8 100644
--- a/src/tab/Tab.tsx
+++ b/src/tab/Tab.tsx
@@ -16,7 +16,7 @@ import { useParent } from '@vant/use';
 import { routeProps } from '../composables/use-route';
 
 // Components
-import SwipeItem from '../swipe-item';
+import { SwipeItem } from '../swipe-item';
 
 const [name, bem] = createNamespace('tab');
 
diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue
index 1bd392713..b6d7ef9b3 100644
--- a/src/tab/demo/index.vue
+++ b/src/tab/demo/index.vue
@@ -105,7 +105,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/tab/test/index.legacy.js b/src/tab/test/index.legacy.js
index e49f8d2d2..d9bd61eef 100644
--- a/src/tab/test/index.legacy.js
+++ b/src/tab/test/index.legacy.js
@@ -1,4 +1,4 @@
-import Tabs from '../../tabs';
+import { Tabs } from '../../tabs';
 import { mount, later, triggerDrag, mockScrollTop } from '../../../test';
 
 function createWrapper(options = {}) {
diff --git a/src/tab/test/insert.spec.js b/src/tab/test/insert.spec.js
index 08ccd3bbb..14b02c87b 100644
--- a/src/tab/test/insert.spec.js
+++ b/src/tab/test/insert.spec.js
@@ -1,6 +1,6 @@
 import { mount, later } from '../../../test';
-import Tab from '..';
-import Tabs from '../../tabs';
+import { Tab } from '..';
+import { Tabs } from '../../tabs';
 
 test('should render correctly after inserting a tab', async () => {
   const wrapper = mount({
diff --git a/src/tabbar-item/TabbarItem.tsx b/src/tabbar-item/TabbarItem.tsx
index b56ce4f61..c9cf1928b 100644
--- a/src/tabbar-item/TabbarItem.tsx
+++ b/src/tabbar-item/TabbarItem.tsx
@@ -9,8 +9,8 @@ import { useParent } from '@vant/use';
 import { routeProps, useRoute } from '../composables/use-route';
 
 // Components
-import Icon from '../icon';
-import Badge from '../badge';
+import { Icon } from '../icon';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('tabbar-item');
 
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index dba7a870d..2dce829c3 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -73,7 +73,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/tabbar/test/index.spec.tsx b/src/tabbar/test/index.spec.tsx
index 3c5426d5d..558ba95a6 100644
--- a/src/tabbar/test/index.spec.tsx
+++ b/src/tabbar/test/index.spec.tsx
@@ -1,8 +1,8 @@
 import { nextTick, reactive, ref } from 'vue';
 import { mount, later, mockGetBoundingClientRect } from '../../../test';
 import { BORDER_TOP_BOTTOM } from '../../utils/constant';
-import Tabbar from '..';
-import TabbarItem from '../../tabbar-item';
+import { Tabbar } from '..';
+import { TabbarItem } from '../../tabbar-item';
 
 const activeClass = 'van-tabbar-item--active';
 
diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
index 7da49752f..24b834076 100644
--- a/src/tabs/Tabs.tsx
+++ b/src/tabs/Tabs.tsx
@@ -42,7 +42,7 @@ import { useRefs } from '../composables/use-refs';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Sticky from '../sticky';
+import { Sticky } from '../sticky';
 import TabsTitle from './TabsTitle';
 import TabsContent from './TabsContent';
 
diff --git a/src/tabs/TabsContent.tsx b/src/tabs/TabsContent.tsx
index cad6dfb3d..7002d8072 100644
--- a/src/tabs/TabsContent.tsx
+++ b/src/tabs/TabsContent.tsx
@@ -1,6 +1,6 @@
 import { ref, watch, onMounted, defineComponent } from 'vue';
 import { ComponentInstance, createNamespace } from '../utils';
-import Swipe from '../swipe';
+import { Swipe } from '../swipe';
 
 const [name, bem] = createNamespace('tabs');
 
diff --git a/src/tabs/TabsTitle.tsx b/src/tabs/TabsTitle.tsx
index 723a3761a..807d8b0d2 100644
--- a/src/tabs/TabsTitle.tsx
+++ b/src/tabs/TabsTitle.tsx
@@ -1,6 +1,6 @@
 import { computed, CSSProperties, defineComponent } from 'vue';
 import { createNamespace, isDef } from '../utils';
-import Badge from '../badge';
+import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('tab');
 
diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index be8581d25..fe75a1109 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties, PropType, Transition, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
-import Icon from '../icon';
+import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('tag');
 
diff --git a/src/tag/test/index.spec.ts b/src/tag/test/index.spec.ts
index b8fc328a7..5a6de7fd5 100644
--- a/src/tag/test/index.spec.ts
+++ b/src/tag/test/index.spec.ts
@@ -1,4 +1,4 @@
-import Tag from '..';
+import { Tag } from '..';
 import { mount } from '../../../test';
 
 test('should emit close event when clicking the close icon', () => {
diff --git a/src/toast/Toast.tsx b/src/toast/Toast.tsx
index fd7769f91..37636a7cc 100644
--- a/src/toast/Toast.tsx
+++ b/src/toast/Toast.tsx
@@ -12,9 +12,9 @@ import { createNamespace, isDef, UnknownProp } from '../utils';
 import { lockClick } from './lock-click';
 
 // Components
-import Icon from '../icon';
-import Popup from '../popup';
-import Loading, { LoadingType } from '../loading';
+import { Icon } from '../icon';
+import { Popup } from '../popup';
+import { Loading, LoadingType } from '../loading';
 
 const [name, bem] = createNamespace('toast');
 
diff --git a/src/toast/demo/index.vue b/src/toast/demo/index.vue
index a016a5dc1..fe7f3e512 100644
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@@ -32,8 +32,8 @@
 
 <script lang="ts">
 import { useTranslate } from '@demo/use-translate';
+import { Toast } from '..';
 import type { LoadingType } from '../../loading';
-import Toast from '..';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/toast/test/index.legacy.js b/src/toast/test/index.legacy.js
index c16917fa0..797371605 100644
--- a/src/toast/test/index.legacy.js
+++ b/src/toast/test/index.legacy.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Toast from '..';
+import { Toast } from '..';
 import ToastVue from '../Toast';
 import { later } from '../../../test';
 
diff --git a/src/tree-select/TreeSelect.tsx b/src/tree-select/TreeSelect.tsx
index b459f9a98..ca65cc753 100644
--- a/src/tree-select/TreeSelect.tsx
+++ b/src/tree-select/TreeSelect.tsx
@@ -4,9 +4,9 @@ import { PropType, defineComponent } from 'vue';
 import { createNamespace, addUnit } from '../utils';
 
 // Components
-import Icon from '../icon';
-import Sidebar from '../sidebar';
-import SidebarItem from '../sidebar-item';
+import { Icon } from '../icon';
+import { Sidebar } from '../sidebar';
+import { SidebarItem } from '../sidebar-item';
 
 const [name, bem] = createNamespace('tree-select');
 
diff --git a/src/tree-select/test/index.legacy.js b/src/tree-select/test/index.legacy.js
index cbd80a7f4..a0ac38153 100644
--- a/src/tree-select/test/index.legacy.js
+++ b/src/tree-select/test/index.legacy.js
@@ -1,4 +1,4 @@
-import TreeSelect from '..';
+import { TreeSelect } from '..';
 import { mount } from '../../../test';
 
 test('empty list', () => {
diff --git a/src/uploader/Uploader.tsx b/src/uploader/Uploader.tsx
index f5dafce6d..b8978ccea 100644
--- a/src/uploader/Uploader.tsx
+++ b/src/uploader/Uploader.tsx
@@ -19,9 +19,9 @@ import { useExpose } from '../composables/use-expose';
 import { useLinkField } from '../composables/use-link-field';
 
 // Components
-import Icon from '../icon';
+import { Icon } from '../icon';
+import { ImagePreview, ImagePreviewOptions } from '../image-preview';
 import UploaderPreviewItem from './UploaderPreviewItem';
-import ImagePreview, { ImagePreviewOptions } from '../image-preview';
 
 // Types
 import type { ImageFit } from '../image';
diff --git a/src/uploader/UploaderPreviewItem.tsx b/src/uploader/UploaderPreviewItem.tsx
index d793a9929..54ef4ec73 100644
--- a/src/uploader/UploaderPreviewItem.tsx
+++ b/src/uploader/UploaderPreviewItem.tsx
@@ -6,9 +6,9 @@ import { isDef, getSizeStyle } from '../utils';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 
 // Components
-import Icon from '../icon';
-import Image, { ImageFit } from '../image';
-import Loading from '../loading';
+import { Icon } from '../icon';
+import { Image, ImageFit } from '../image';
+import { Loading } from '../loading';
 
 export default defineComponent({
   props: {
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index 9a01345a2..e0d35cf10 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -57,7 +57,7 @@
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { UploaderFileListItem } from '../utils';
-import Toast from '../../toast';
+import { Toast } from '../../toast';
 
 const i18n = {
   'zh-CN': {
diff --git a/src/uploader/test/index.legacy.js b/src/uploader/test/index.legacy.js
index c42e0a396..9ed3bfee4 100644
--- a/src/uploader/test/index.legacy.js
+++ b/src/uploader/test/index.legacy.js
@@ -1,4 +1,4 @@
-import Uploader from '..';
+import { Uploader } from '..';
 import { mount, later, triggerDrag } from '../../../test';
 
 window.File = function () {