diff --git a/package.json b/package.json
index 19bd8ea294..7a26fc349e 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "vitest": "^0.34.6",
     "vitest-canvas-mock": "^0.3.3",
     "vue": "^3.3.4",
-    "vue-tsc": "1.8.15"
+    "vue-tsc": "^1.8.22"
   },
   "engines": {
     "pnpm": ">= 8.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cce27980a1..d83daf7063 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -118,8 +118,8 @@ importers:
         specifier: ^3.3.4
         version: 3.3.4
       vue-tsc:
-        specifier: 1.8.15
-        version: 1.8.15(typescript@5.2.2)
+        specifier: ^1.8.22
+        version: 1.8.22(typescript@5.2.2)
 
   packages/nutui-auto-import-resolver:
     devDependencies:
@@ -4017,22 +4017,23 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
-  /@volar/language-core@1.10.4:
-    resolution: {integrity: sha512-Na69qA6uwVIdA0rHuOc2W3pHtVQQO8hCNim7FOaKNpRJh0oAFnu5r9i7Oopo5C4cnELZkPNjTrbmpcCTiW+CMQ==}
+  /@volar/language-core@1.10.10:
+    resolution: {integrity: sha512-nsV1o3AZ5n5jaEAObrS3MWLBWaGwUj/vAsc15FVNIv+DbpizQRISg9wzygsHBr56ELRH8r4K75vkYNMtsSNNWw==}
     dependencies:
-      '@volar/source-map': 1.10.4
+      '@volar/source-map': 1.10.10
     dev: true
 
-  /@volar/source-map@1.10.4:
-    resolution: {integrity: sha512-RxZdUEL+pV8p+SMqnhVjzy5zpb1QRZTlcwSk4bdcBO7yOu4rtEWqDGahVCEj4CcXour+0yJUMrMczfSCpP9Uxg==}
+  /@volar/source-map@1.10.10:
+    resolution: {integrity: sha512-GVKjLnifV4voJ9F0vhP56p4+F3WGf+gXlRtjFZsv6v3WxBTWU3ZVeaRaEHJmWrcv5LXmoYYpk/SC25BKemPRkg==}
     dependencies:
       muggle-string: 0.3.1
     dev: true
 
-  /@volar/typescript@1.10.4:
-    resolution: {integrity: sha512-BCCUEBASBEMCrz7qmNSi2hBEWYsXD0doaktRKpmmhvb6XntM2sAWYu6gbyK/MluLDgluGLFiFRpWgobgzUqolg==}
+  /@volar/typescript@1.10.10:
+    resolution: {integrity: sha512-4a2r5bdUub2m+mYVnLu2wt59fuoYWe7nf0uXtGHU8QQ5LDNfzAR0wK7NgDiQ9rcl2WT3fxT2AA9AylAwFtj50A==}
     dependencies:
-      '@volar/language-core': 1.10.4
+      '@volar/language-core': 1.10.10
+      path-browserify: 1.0.1
     dev: true
 
   /@vscode/test-electron@2.0.3:
@@ -4204,19 +4205,19 @@ packages:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
     dev: false
 
-  /@vue/language-core@1.8.15(typescript@5.2.2):
-    resolution: {integrity: sha512-zche5Aw8kkvp3YaghuLiOZyVIpoWHjSQ0EfjxGSsqHOPMamdCoa9x3HtbenpR38UMUoKJ88wiWuiOrV3B/Yq+A==}
+  /@vue/language-core@1.8.22(typescript@5.2.2):
+    resolution: {integrity: sha512-bsMoJzCrXZqGsxawtUea1cLjUT9dZnDsy5TuZ+l1fxRMzUGQUG9+Ypq4w//CqpWmrx7nIAJpw2JVF/t258miRw==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@volar/language-core': 1.10.4
-      '@volar/source-map': 1.10.4
+      '@volar/language-core': 1.10.10
+      '@volar/source-map': 1.10.10
       '@vue/compiler-dom': 3.3.4
-      '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
+      computeds: 0.0.1
       minimatch: 9.0.3
       muggle-string: 0.3.1
       typescript: 5.2.2
@@ -4280,15 +4281,6 @@ packages:
       vue-component-type-helpers: 1.8.4
     dev: true
 
-  /@vue/typescript@1.8.15(typescript@5.2.2):
-    resolution: {integrity: sha512-qWyanQKXOsK84S8rP7QBrqsvUdQ0nZABZmTjXMpb3ox4Bp5IbkscREA3OPUrkgl64mAxwwCzIWcOc3BPTCPjQw==}
-    dependencies:
-      '@volar/typescript': 1.10.4
-      '@vue/language-core': 1.8.15(typescript@5.2.2)
-    transitivePeerDependencies:
-      - typescript
-    dev: true
-
   /@webassemblyjs/ast@1.11.6:
     resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
     dependencies:
@@ -5849,6 +5841,10 @@ packages:
       - supports-color
     dev: true
 
+  /computeds@0.0.1:
+    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
+    dev: true
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -11639,6 +11635,10 @@ packages:
       no-case: 3.0.4
       tslib: 2.6.2
 
+  /path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+    dev: true
+
   /path-case@3.0.4:
     resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
     dependencies:
@@ -15117,14 +15117,14 @@ packages:
     resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
     dev: true
 
-  /vue-tsc@1.8.15(typescript@5.2.2):
-    resolution: {integrity: sha512-4DoB3LUj7IToLmggoCxRiFG+QU5lem0nv03m1ocqugXA9rSVoTOEoYYaP8vu8b99Eh+/cCVdYOeIAQ+RsgUYUw==}
+  /vue-tsc@1.8.22(typescript@5.2.2):
+    resolution: {integrity: sha512-j9P4kHtW6eEE08aS5McFZE/ivmipXy0JzrnTgbomfABMaVKx37kNBw//irL3+LlE3kOo63XpnRigyPC3w7+z+A==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@vue/language-core': 1.8.15(typescript@5.2.2)
-      '@vue/typescript': 1.8.15(typescript@5.2.2)
+      '@volar/typescript': 1.10.10
+      '@vue/language-core': 1.8.22(typescript@5.2.2)
       semver: 7.5.4
       typescript: 5.2.2
     dev: true
diff --git a/src/config.json b/src/config.json
index 49972068b5..416470dfe4 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1108,7 +1108,7 @@
           "cName": "文本省略",
           "desc": "文本省略",
           "show": true,
-          "taro": true,
+          "taro": false,
           "tarodoc": false,
           "type": "component",
           "author": "yangxiaolu3"
diff --git a/src/packages/__VUE/actionsheet/index.taro.vue b/src/packages/__VUE/actionsheet/index.taro.vue
index 96046481ac..f61530d041 100644
--- a/src/packages/__VUE/actionsheet/index.taro.vue
+++ b/src/packages/__VUE/actionsheet/index.taro.vue
@@ -43,7 +43,7 @@ import { createComponent } from '@/packages/utils/create';
 import { useSlots } from 'vue';
 import type { PropType } from 'vue';
 import { popupProps } from '../popup/props';
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 import { Loading } from '@nutui/icons-vue-taro';
 const { create } = createComponent('action-sheet');
 export interface menuItems {
@@ -56,7 +56,7 @@ export interface menuItems {
 }
 export default create({
   components: {
-    [Popup.name]: Popup,
+    NutPopup,
     Loading
   },
   props: {
diff --git a/src/packages/__VUE/actionsheet/index.vue b/src/packages/__VUE/actionsheet/index.vue
index 6e9dcee59e..dedc1e75ce 100644
--- a/src/packages/__VUE/actionsheet/index.vue
+++ b/src/packages/__VUE/actionsheet/index.vue
@@ -42,7 +42,7 @@ import { createComponent } from '@/packages/utils/create';
 import { useSlots } from 'vue';
 import type { PropType } from 'vue';
 import { popupProps } from '../popup/props';
-import Popup from '../popup/index.vue';
+import NutPopup from '../popup/index.vue';
 import { Loading } from '@nutui/icons-vue';
 const { create } = createComponent('action-sheet');
 export interface menuItems {
@@ -55,7 +55,7 @@ export interface menuItems {
 }
 export default create({
   components: {
-    [Popup.name]: Popup,
+    NutPopup,
     Loading
   },
   props: {
diff --git a/src/packages/__VUE/address/index.taro.vue b/src/packages/__VUE/address/index.taro.vue
index e551a619e7..da069a776b 100644
--- a/src/packages/__VUE/address/index.taro.vue
+++ b/src/packages/__VUE/address/index.taro.vue
@@ -134,22 +134,22 @@ import { reactive, ref, toRefs, watch, computed, PropType } from 'vue';
 import { popupProps } from '../popup/props';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.taro.vue';
-import Elevator from '../elevator/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
+import NutElevator from '../elevator/index.taro.vue';
 const { create, componentName, translate } = createComponent('address');
 import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
-import ScrollView from '../scroll-view/index.taro.vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
   components: {
-    [Popup.name]: Popup,
-    [Elevator.name]: Elevator,
+    NutPopup,
+    NutElevator,
     Location,
     Location2,
     Check,
     Close,
     Left,
-    'nut-scroll-view': ScrollView
+    NutScrollView
   },
   inheritAttrs: false,
   props: {
diff --git a/src/packages/__VUE/address/index.vue b/src/packages/__VUE/address/index.vue
index 8b346ad59e..25c55e4330 100644
--- a/src/packages/__VUE/address/index.vue
+++ b/src/packages/__VUE/address/index.vue
@@ -125,15 +125,15 @@ import { reactive, ref, toRefs, watch, nextTick, computed, Ref, PropType } from
 import { createComponent } from '@/packages/utils/create';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { popupProps } from '../popup/props';
-import Popup from '../popup/index.vue';
-import Elevator from '../elevator/index.vue';
+import NutPopup from '../popup/index.vue';
+import NutElevator from '../elevator/index.vue';
 const { create, translate } = createComponent('address');
 import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue';
 
 export default create({
   components: {
-    [Popup.name]: Popup,
-    [Elevator.name]: Elevator,
+    NutPopup,
+    NutElevator,
     Location,
     Location2,
     Check,
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue b/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
index 682b4c8f55..e7ed8951a1 100644
--- a/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
+++ b/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
@@ -46,8 +46,8 @@ import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list-general');
 import ItemContents from './ItemContents.taro.vue';
-import Button from '../../button/index.taro.vue';
-import Swipe from '../../swipe/index.taro.vue';
+import NutButton from '../../button/index.taro.vue';
+import NutSwipe from '../../swipe/index.taro.vue';
 
 export default create({
   props: {
@@ -67,8 +67,8 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
   components: {
     ItemContents,
-    [Button.name]: Button,
-    [Swipe.name]: Swipe
+    NutButton,
+    NutSwipe
   },
 
   setup(props, { emit }) {
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.vue b/src/packages/__VUE/addresslist/components/GeneralShell.vue
index ecfa89cd8a..de9130c582 100644
--- a/src/packages/__VUE/addresslist/components/GeneralShell.vue
+++ b/src/packages/__VUE/addresslist/components/GeneralShell.vue
@@ -46,8 +46,8 @@ import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list-general');
 import ItemContents from './ItemContents.vue';
-import Button from '../../button/index.vue';
-import Swipe from '../../swipe/index.vue';
+import NutButton from '../../button/index.vue';
+import NutSwipe from '../../swipe/index.vue';
 
 export default create({
   props: {
@@ -67,8 +67,8 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
   components: {
     ItemContents,
-    [Button.name]: Button,
-    [Swipe.name]: Swipe
+    NutButton,
+    NutSwipe
   },
 
   setup(props, { emit }) {
diff --git a/src/packages/__VUE/addresslist/index.taro.vue b/src/packages/__VUE/addresslist/index.taro.vue
index 0b19ee797e..f21dc0a754 100644
--- a/src/packages/__VUE/addresslist/index.taro.vue
+++ b/src/packages/__VUE/addresslist/index.taro.vue
@@ -41,7 +41,7 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.taro.vue';
 import { floatData } from '@/packages/utils/util';
-import Button from '../button/index.taro.vue';
+import NutButton from '../button/index.taro.vue';
 export default create({
   props: {
     data: {
@@ -67,7 +67,7 @@ export default create({
   },
   components: {
     GeneralShell,
-    [Button.name]: Button
+    NutButton
   },
   emits: ['delIcon', 'editIcon', 'clickItem', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
diff --git a/src/packages/__VUE/addresslist/index.vue b/src/packages/__VUE/addresslist/index.vue
index c277fe45dd..524c3054c1 100644
--- a/src/packages/__VUE/addresslist/index.vue
+++ b/src/packages/__VUE/addresslist/index.vue
@@ -41,7 +41,7 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
-import Button from '../button/index.vue';
+import NutButton from '../button/index.vue';
 export default create({
   props: {
     data: {
@@ -67,7 +67,7 @@ export default create({
   },
   components: {
     GeneralShell,
-    [Button.name]: Button
+    NutButton
   },
   emits: ['delIcon', 'editIcon', 'clickItem', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
diff --git a/src/packages/__VUE/audio/index.vue b/src/packages/__VUE/audio/index.vue
index 88ff3bbbef..34d1778b01 100644
--- a/src/packages/__VUE/audio/index.vue
+++ b/src/packages/__VUE/audio/index.vue
@@ -60,10 +60,10 @@
   </div>
 </template>
 <script lang="ts">
-import { toRefs, ref, onMounted, reactive, watch, provide, Component } from 'vue';
+import { toRefs, ref, onMounted, reactive, watch, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Service } from '@nutui/icons-vue';
-import Range from '../range/index.vue';
+import NutRange from '../range/index.vue';
 const { create } = createComponent('audio');
 
 export default create({
@@ -108,7 +108,7 @@ export default create({
   },
   components: {
     Service,
-    [Range.name]: Range as Component
+    NutRange
   },
   emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'canPlay'],
 
diff --git a/src/packages/__VUE/audiooperate/index.vue b/src/packages/__VUE/audiooperate/index.vue
index c89a335d01..74e1db6220 100644
--- a/src/packages/__VUE/audiooperate/index.vue
+++ b/src/packages/__VUE/audiooperate/index.vue
@@ -25,7 +25,7 @@
 <script lang="ts">
 import { toRefs, ref, useSlots, reactive, inject } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Button from '../button/index.vue';
+import NutButton from '../button/index.vue';
 const { create, translate } = createComponent('audio-operate');
 
 export default create({
@@ -37,7 +37,7 @@ export default create({
     }
   },
   components: {
-    [Button.name]: Button
+    NutButton
   },
   emits: ['click'],
 
diff --git a/src/packages/__VUE/avatarcropper/index.taro.vue b/src/packages/__VUE/avatarcropper/index.taro.vue
index 5eee51091a..da2e7292a4 100644
--- a/src/packages/__VUE/avatarcropper/index.taro.vue
+++ b/src/packages/__VUE/avatarcropper/index.taro.vue
@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { watch, ref, reactive, toRefs, computed, PropType, onMounted } from 'vue';
-import Button from '../button/index.vue';
+import NutButton from '../button/index.vue';
 import { createComponent } from '@/packages/utils/create';
 import type { AvatarCropperToolbarPosition, AvatarCropperSizeType, AvatarCropperSourceType } from './types';
 const { create } = createComponent('avatar-cropper');
@@ -54,7 +54,7 @@ import { easySetFillStyle } from '@/packages/utils/canvas';
 
 export default create({
   components: {
-    [Button.name]: Button,
+    NutButton,
     IconFont
   },
   props: {
diff --git a/src/packages/__VUE/avatarcropper/index.vue b/src/packages/__VUE/avatarcropper/index.vue
index bd2031f181..b241413606 100644
--- a/src/packages/__VUE/avatarcropper/index.vue
+++ b/src/packages/__VUE/avatarcropper/index.vue
@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { watch, ref, reactive, toRefs, computed, Ref, PropType } from 'vue';
-import Button from '../button/index.vue';
+import NutButton from '../button/index.vue';
 import { createComponent } from '@/packages/utils/create';
 import type { AvatarCropperToolbarPosition } from './types';
 const { create } = createComponent('avatar-cropper');
@@ -52,7 +52,7 @@ import { preventDefault, clamp } from '@/packages/utils/util';
 import { useRect } from '@/packages/utils/useRect';
 export default create({
   components: {
-    [Button.name]: Button,
+    NutButton,
     Refresh2,
     Retweet
   },
diff --git a/src/packages/__VUE/avatargroup/index.taro.vue b/src/packages/__VUE/avatargroup/index.taro.vue
index 964a92aaad..e121538aed 100644
--- a/src/packages/__VUE/avatargroup/index.taro.vue
+++ b/src/packages/__VUE/avatargroup/index.taro.vue
@@ -19,11 +19,11 @@ import { onMounted, provide, ref, onUnmounted, nextTick, unref, PropType, comput
 import Taro from '@tarojs/taro';
 import { createComponent } from '@/packages/utils/create';
 import type { AvatarShape, AvatarSize, AvatarZIndex } from '../avatar/types';
-import Avatar from '../avatar/index.taro.vue';
+import NutAvatar from '../avatar/index.taro.vue';
 const { create } = createComponent('avatar-group');
 export default create({
   components: {
-    [Avatar.name]: Avatar
+    NutAvatar
   },
   props: {
     maxContent: {
diff --git a/src/packages/__VUE/avatargroup/index.vue b/src/packages/__VUE/avatargroup/index.vue
index 2a4dc2fe90..cff85500e9 100644
--- a/src/packages/__VUE/avatargroup/index.vue
+++ b/src/packages/__VUE/avatargroup/index.vue
@@ -18,11 +18,11 @@
 import { onMounted, provide, ref, onUnmounted, nextTick, unref, PropType, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import type { AvatarShape, AvatarSize, AvatarZIndex } from '../avatar/types';
-import Avatar from '../avatar/index.vue';
+import NutAvatar from '../avatar/index.vue';
 const { create } = createComponent('avatar-group');
 export default create({
   components: {
-    [Avatar.name]: Avatar
+    NutAvatar
   },
   props: {
     maxContent: {
diff --git a/src/packages/__VUE/backtop/index.taro.vue b/src/packages/__VUE/backtop/index.taro.vue
index 21b6ca12a1..117cfd8dee 100644
--- a/src/packages/__VUE/backtop/index.taro.vue
+++ b/src/packages/__VUE/backtop/index.taro.vue
@@ -19,14 +19,14 @@
 
 <script lang="ts">
 import { reactive, computed, toRefs } from 'vue';
-import ScrollView from '../scroll-view/index.taro.vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('backtop');
 import { Top } from '@nutui/icons-vue-taro';
 export default create({
   components: {
     Top,
-    'nut-scroll-view': ScrollView
+    NutScrollView
   },
   props: {
     height: {
diff --git a/src/packages/__VUE/badge/demo.vue b/src/packages/__VUE/badge/demo.vue
index 5e20765c7f..cd68a3f5c7 100644
--- a/src/packages/__VUE/badge/demo.vue
+++ b/src/packages/__VUE/badge/demo.vue
@@ -95,7 +95,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('badge');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Check, Download } from '@nutui/icons-vue';
+import { Check, Download, Link as IconLink } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
diff --git a/src/packages/__VUE/calendar/index.taro.vue b/src/packages/__VUE/calendar/index.taro.vue
index b543894847..4f0e5732b3 100644
--- a/src/packages/__VUE/calendar/index.taro.vue
+++ b/src/packages/__VUE/calendar/index.taro.vue
@@ -93,16 +93,16 @@
 import { ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('calendar');
-import CalendarItem from '../calendaritem/index.taro.vue';
-import Popup from '../popup/index.taro.vue';
+import NutCalendarItem from '../calendaritem/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import { CalendarRef } from '../calendaritem/type';
 
 export default create({
   components: {
-    [CalendarItem.name]: CalendarItem,
-    [Popup.name]: Popup
+    NutCalendarItem,
+    NutPopup
   },
   props: {
     type: {
diff --git a/src/packages/__VUE/calendar/index.vue b/src/packages/__VUE/calendar/index.vue
index dad00166ba..e23c5ec256 100644
--- a/src/packages/__VUE/calendar/index.vue
+++ b/src/packages/__VUE/calendar/index.vue
@@ -93,16 +93,16 @@
 import { ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('calendar');
-import CalendarItem from '../calendaritem/index.vue';
-import Popup from '../popup/index.vue';
+import NutCalendarItem from '../calendaritem/index.vue';
+import NutPopup from '../popup/index.vue';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import { CalendarRef } from '../calendaritem/type';
 
 export default create({
   components: {
-    [CalendarItem.name]: CalendarItem,
-    [Popup.name]: Popup
+    NutCalendarItem,
+    NutPopup
   },
   props: {
     type: {
diff --git a/src/packages/__VUE/calendaritem/index.taro.vue b/src/packages/__VUE/calendaritem/index.taro.vue
index e74c3a9fe5..ff0617e51e 100644
--- a/src/packages/__VUE/calendaritem/index.taro.vue
+++ b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -86,7 +86,7 @@ import { reactive, ref, watch, toRefs, computed, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('calendar-item');
 import Taro from '@tarojs/taro';
-import ScrollView from '../scroll-view/index.taro.vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
 import { MonthInfo, Day, CalendarTaroState } from './type';
@@ -102,7 +102,7 @@ interface CalendarDateProp {
 
 export default create({
   components: {
-    'nut-scroll-view': ScrollView
+    NutScrollView
   },
   props: {
     type: {
diff --git a/src/packages/__VUE/card/index.taro.vue b/src/packages/__VUE/card/index.taro.vue
index d409d4ce56..a6b602cee9 100644
--- a/src/packages/__VUE/card/index.taro.vue
+++ b/src/packages/__VUE/card/index.taro.vue
@@ -30,13 +30,13 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import Price from '../price/index.taro.vue';
-import Tag from '../tag/index.taro.vue';
+import NutPrice from '../price/index.taro.vue';
+import NutTag from '../tag/index.taro.vue';
 const { create } = createComponent('card');
 export default create({
   components: {
-    [Price.name]: Price,
-    [Tag.name]: Tag
+    NutPrice,
+    NutTag
   },
   props: {
     imgUrl: {
diff --git a/src/packages/__VUE/card/index.vue b/src/packages/__VUE/card/index.vue
index b8f05786b9..5e6f3e38ca 100644
--- a/src/packages/__VUE/card/index.vue
+++ b/src/packages/__VUE/card/index.vue
@@ -30,13 +30,13 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import Price from '../price/index.vue';
-import Tag from '../tag/index.vue';
+import NutPrice from '../price/index.vue';
+import NutTag from '../tag/index.vue';
 const { create } = createComponent('card');
 export default create({
   components: {
-    [Price.name]: Price,
-    [Tag.name]: Tag
+    NutPrice,
+    NutTag
   },
   props: {
     imgUrl: {
diff --git a/src/packages/__VUE/cascader/cascader-item.taro.vue b/src/packages/__VUE/cascader/cascader-item.taro.vue
index aab328d9af..2588b6dc4c 100644
--- a/src/packages/__VUE/cascader/cascader-item.taro.vue
+++ b/src/packages/__VUE/cascader/cascader-item.taro.vue
@@ -32,23 +32,23 @@
 </template>
 <script lang="ts">
 import { watch, ref, Ref, computed } from 'vue';
-import ScrollView from '../scroll-view/index.taro.vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('cascader-item');
 import { convertListToOptions } from './helper';
 import { CascaderPane, CascaderOption, CascaderValue, convertConfig, CascaderTabs } from './types';
 import { Loading, Checklist } from '@nutui/icons-vue-taro';
-import Tabs from '../tabs/index.taro.vue';
-import TabPane from '../tabpane/index.vue';
+import NutTabs from '../tabs/index.taro.vue';
+import NutTabPane from '../tabpane/index.vue';
 import Tree from './tree';
 
 export default create({
   components: {
     Loading,
     Checklist,
-    [Tabs.name]: Tabs,
-    [TabPane.name]: TabPane,
-    'nut-scroll-view': ScrollView
+    NutTabs,
+    NutTabPane,
+    NutScrollView
   },
   props: {
     visible: Boolean,
diff --git a/src/packages/__VUE/cascader/cascader-item.vue b/src/packages/__VUE/cascader/cascader-item.vue
index 464584d9dd..b59677ad95 100644
--- a/src/packages/__VUE/cascader/cascader-item.vue
+++ b/src/packages/__VUE/cascader/cascader-item.vue
@@ -35,16 +35,16 @@ const { create, translate } = createComponent('cascader-item');
 import { convertListToOptions } from './helper';
 import { CascaderPane, CascaderOption, CascaderValue, convertConfig, CascaderTabs } from './types';
 import { Loading, Checklist } from '@nutui/icons-vue';
-import Tabs from '../tabs/index.vue';
-import TabPane from '../tabpane/index.vue';
+import NutTabs from '../tabs/index.vue';
+import NutTabPane from '../tabpane/index.vue';
 import Tree from './tree';
 
 export default create({
   components: {
     Loading,
     Checklist,
-    [Tabs.name]: Tabs,
-    [TabPane.name]: TabPane
+    NutTabs,
+    NutTabPane
   },
   props: {
     visible: Boolean,
diff --git a/src/packages/__VUE/cascader/index.taro.vue b/src/packages/__VUE/cascader/index.taro.vue
index a50c8f9331..6a7d7be23b 100644
--- a/src/packages/__VUE/cascader/index.taro.vue
+++ b/src/packages/__VUE/cascader/index.taro.vue
@@ -55,13 +55,13 @@ import { CascaderValue, CascaderOption } from './types';
 import { createComponent } from '@/packages/utils/create';
 import { popupProps } from '../popup/props';
 const { create } = createComponent('cascader');
-import CascaderItem from './cascader-item.taro.vue';
-import Popup from '../popup/index.taro.vue';
+import NutCascaderItem from './cascader-item.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 
 export default create({
   components: {
-    [CascaderItem.name]: CascaderItem,
-    [Popup.name]: Popup
+    NutCascaderItem,
+    NutPopup
   },
   props: {
     ...popupProps,
diff --git a/src/packages/__VUE/cascader/index.vue b/src/packages/__VUE/cascader/index.vue
index f4d9921617..31874e22ec 100644
--- a/src/packages/__VUE/cascader/index.vue
+++ b/src/packages/__VUE/cascader/index.vue
@@ -51,13 +51,13 @@ import { CascaderValue, CascaderOption } from './types';
 import { popupProps } from '../popup/props';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('cascader');
-import CascaderItem from './cascader-item.vue';
-import Popup from '../popup/index.vue';
+import NutCascaderItem from './cascader-item.vue';
+import NutPopup from '../popup/index.vue';
 
 export default create({
   components: {
-    [CascaderItem.name]: CascaderItem,
-    [Popup.name]: Popup
+    NutCascaderItem,
+    NutPopup
   },
   props: {
     ...popupProps,
diff --git a/src/packages/__VUE/comment/components/CmtHeader.taro.vue b/src/packages/__VUE/comment/components/CmtHeader.taro.vue
index d308461332..3e67e0382e 100644
--- a/src/packages/__VUE/comment/components/CmtHeader.taro.vue
+++ b/src/packages/__VUE/comment/components/CmtHeader.taro.vue
@@ -34,11 +34,11 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('comment-header');
-import Rate from '../../rate/index.taro.vue';
+import NutRate from '../../rate/index.taro.vue';
 
 export default create({
   components: {
-    [Rate.name]: Rate
+    NutRate
   },
   props: {
     type: {
diff --git a/src/packages/__VUE/comment/components/CmtHeader.vue b/src/packages/__VUE/comment/components/CmtHeader.vue
index 7ed3160d4b..2bf153377d 100644
--- a/src/packages/__VUE/comment/components/CmtHeader.vue
+++ b/src/packages/__VUE/comment/components/CmtHeader.vue
@@ -34,11 +34,11 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('comment-header');
-import Rate from '../../rate/index.vue';
+import NutRate from '../../rate/index.vue';
 
 export default create({
   components: {
-    [Rate.name]: Rate
+    NutRate
   },
   props: {
     type: {
diff --git a/src/packages/__VUE/datepicker/index.taro.vue b/src/packages/__VUE/datepicker/index.taro.vue
index ab7e0af53b..d047f97ad4 100644
--- a/src/packages/__VUE/datepicker/index.taro.vue
+++ b/src/packages/__VUE/datepicker/index.taro.vue
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { toRefs, watch, computed, reactive, onBeforeMount } from 'vue';
 import type { PropType } from 'vue';
-import Picker from '../picker/index.taro.vue';
+import NutPicker from '../picker/index.taro.vue';
 import { PickerOption } from '../picker/types';
 import { createComponent } from '@/packages/utils/create';
 import { Formatter, Filter } from './type';
@@ -47,7 +47,7 @@ const zhCNType: {
 };
 export default create({
   components: {
-    [Picker.name]: Picker
+    NutPicker
   },
   props: {
     modelValue: null,
diff --git a/src/packages/__VUE/datepicker/index.vue b/src/packages/__VUE/datepicker/index.vue
index 4b72750a76..18ec1d359a 100644
--- a/src/packages/__VUE/datepicker/index.vue
+++ b/src/packages/__VUE/datepicker/index.vue
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { toRefs, watch, computed, reactive, onBeforeMount } from 'vue';
 import type { PropType } from 'vue';
-import Picker from '../picker/index.vue';
+import NutPicker from '../picker/index.vue';
 import { PickerOption } from '../picker/types';
 import { createComponent } from '@/packages/utils/create';
 import { Formatter, Filter } from './type';
@@ -47,7 +47,7 @@ const zhCNType: {
 };
 export default create({
   components: {
-    [Picker.name]: Picker
+    NutPicker
   },
   props: {
     modelValue: null,
diff --git a/src/packages/__VUE/dialog/index.taro.vue b/src/packages/__VUE/dialog/index.taro.vue
index fd7428c695..85bc8247eb 100644
--- a/src/packages/__VUE/dialog/index.taro.vue
+++ b/src/packages/__VUE/dialog/index.taro.vue
@@ -51,15 +51,15 @@
 import { onMounted, computed, watch, ref, PropType, VNode, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('dialog');
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 import { popupProps } from '../popup/props';
-import Button from '../button/index.taro.vue';
+import NutButton from '../button/index.taro.vue';
 import { isPromise } from '@/packages/utils/util';
 export default create({
   inheritAttrs: false,
   components: {
-    [Popup.name]: Popup,
-    [Button.name]: Button
+    NutPopup,
+    NutButton
   },
   props: {
     ...popupProps,
diff --git a/src/packages/__VUE/dialog/index.ts b/src/packages/__VUE/dialog/index.ts
index f8f532ec73..783dd97446 100644
--- a/src/packages/__VUE/dialog/index.ts
+++ b/src/packages/__VUE/dialog/index.ts
@@ -1,8 +1,8 @@
 import Dialog from './index.vue';
 import { h, VNode, CSSProperties, Component, nextTick } from 'vue';
-import Popup from '../popup/index.vue';
-import Button from '../button/index.vue';
-import Overlay from '../overlay/index.vue';
+import NutPopup from '../popup/index.vue';
+import NutButton from '../button/index.vue';
+import NutOverlay from '../overlay/index.vue';
 import { CreateComponent } from '@/packages/utils/create';
 export class DialogOptions {
   title?: string = '';
@@ -47,7 +47,7 @@ class DialogFunction {
     const options = Object.assign(this.options, _options);
     const { unmount } = CreateComponent(options, {
       name: 'dialog',
-      components: [Popup, Button, Overlay],
+      components: [NutPopup, NutButton, NutOverlay],
       wrapper: (elWrap: any, root: any) => {
         return {
           setup() {
diff --git a/src/packages/__VUE/dialog/index.vue b/src/packages/__VUE/dialog/index.vue
index c07fd6f0fb..859e09df0b 100644
--- a/src/packages/__VUE/dialog/index.vue
+++ b/src/packages/__VUE/dialog/index.vue
@@ -52,14 +52,14 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('dialog');
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { popupProps } from '../popup/props';
-import Popup from '../popup/index.vue';
-import Button from '../button/index.vue';
+import NutPopup from '../popup/index.vue';
+import NutButton from '../button/index.vue';
 export type TextAlign = 'left' | 'center' | 'right' | 'top';
 export default create({
   inheritAttrs: false,
   components: {
-    [Popup.name]: Popup,
-    [Button.name]: Button
+    NutPopup,
+    NutButton
   },
   props: {
     ...popupProps,
diff --git a/src/packages/__VUE/ecard/index.taro.vue b/src/packages/__VUE/ecard/index.taro.vue
index a949f370bb..4d14317b42 100644
--- a/src/packages/__VUE/ecard/index.taro.vue
+++ b/src/packages/__VUE/ecard/index.taro.vue
@@ -33,7 +33,7 @@
 <script lang="ts">
 import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import InputNumber from '../inputnumber/index.taro.vue';
+import NutInputNumber from '../inputnumber/index.taro.vue';
 import type { PropType } from 'vue';
 const { create, translate } = createComponent('ecard');
 export interface dataList {
@@ -41,7 +41,7 @@ export interface dataList {
 }
 export default create({
   components: {
-    [InputNumber.name]: InputNumber
+    NutInputNumber
   },
   props: {
     chooseText: {
diff --git a/src/packages/__VUE/ecard/index.vue b/src/packages/__VUE/ecard/index.vue
index ab363f3398..071b8f232c 100644
--- a/src/packages/__VUE/ecard/index.vue
+++ b/src/packages/__VUE/ecard/index.vue
@@ -34,7 +34,7 @@
 import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('ecard');
-import InputNumber from '../inputnumber/index.vue';
+import NutInputNumber from '../inputnumber/index.vue';
 import type { PropType } from 'vue';
 
 export interface dataList {
@@ -42,7 +42,7 @@ export interface dataList {
 }
 export default create({
   components: {
-    [InputNumber.name]: InputNumber
+    NutInputNumber
   },
   props: {
     chooseText: {
diff --git a/src/packages/__VUE/elevator/index.taro.vue b/src/packages/__VUE/elevator/index.taro.vue
index 18ca06ed85..36fface540 100644
--- a/src/packages/__VUE/elevator/index.taro.vue
+++ b/src/packages/__VUE/elevator/index.taro.vue
@@ -60,11 +60,11 @@ import { ElevatorData } from './type';
 const { create } = createComponent('elevator');
 
 import Taro from '@tarojs/taro';
-import ScrollView from '../scroll-view/index.taro.vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
   components: {
-    'nut-scroll-view': ScrollView
+    NutScrollView
   },
   props: {
     height: {
diff --git a/src/packages/__VUE/fixednav/index.taro.vue b/src/packages/__VUE/fixednav/index.taro.vue
index b374b645e0..7f0091774f 100644
--- a/src/packages/__VUE/fixednav/index.taro.vue
+++ b/src/packages/__VUE/fixednav/index.taro.vue
@@ -2,12 +2,12 @@
 <script lang="ts">
 import { PropType, computed, ref } from 'vue';
 import { Left } from '@nutui/icons-vue-taro';
-import OverLay from '../overlay/index.taro.vue';
+import NutOverlay from '../overlay/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate, create, componentName } = createComponent('fixed-nav');
 export default create({
   components: {
-    [OverLay.name]: OverLay,
+    NutOverlay,
     Left
   },
   props: {
diff --git a/src/packages/__VUE/fixednav/index.vue b/src/packages/__VUE/fixednav/index.vue
index 1ca8de4df0..d6260d67be 100644
--- a/src/packages/__VUE/fixednav/index.vue
+++ b/src/packages/__VUE/fixednav/index.vue
@@ -2,12 +2,12 @@
 <script lang="ts">
 import { PropType, computed, ref } from 'vue';
 import { Left } from '@nutui/icons-vue';
-import OverLay from '../overlay/index.vue';
+import NutOverlay from '../overlay/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate, create, componentName } = createComponent('fixed-nav');
 export default create({
   components: {
-    [OverLay.name]: OverLay,
+    NutOverlay,
     Left
   },
   props: {
diff --git a/src/packages/__VUE/form/index.taro.vue b/src/packages/__VUE/form/index.taro.vue
index 11c460e5b5..62b29046c7 100644
--- a/src/packages/__VUE/form/index.taro.vue
+++ b/src/packages/__VUE/form/index.taro.vue
@@ -8,11 +8,11 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
-import CellGroup from '../cellgroup/index.vue';
+import NutCellGroup from '../cellgroup/index.vue';
 const { create } = createComponent('form');
 export default create(
   component({
-    [CellGroup.name]: CellGroup
+    NutCellGroup
   })
 );
 </script>
diff --git a/src/packages/__VUE/form/index.vue b/src/packages/__VUE/form/index.vue
index 11c460e5b5..62b29046c7 100644
--- a/src/packages/__VUE/form/index.vue
+++ b/src/packages/__VUE/form/index.vue
@@ -8,11 +8,11 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
-import CellGroup from '../cellgroup/index.vue';
+import NutCellGroup from '../cellgroup/index.vue';
 const { create } = createComponent('form');
 export default create(
   component({
-    [CellGroup.name]: CellGroup
+    NutCellGroup
   })
 );
 </script>
diff --git a/src/packages/__VUE/formitem/index.taro.vue b/src/packages/__VUE/formitem/index.taro.vue
index 270e412630..2fbc231b2b 100644
--- a/src/packages/__VUE/formitem/index.taro.vue
+++ b/src/packages/__VUE/formitem/index.taro.vue
@@ -27,7 +27,7 @@ import { pxCheck } from '@/packages/utils/pxCheck';
 import { computed, inject, provide, PropType, CSSProperties, getCurrentInstance, onUnmounted } from 'vue';
 import type { FormItemRule } from './types';
 import { createComponent } from '@/packages/utils/create';
-import Cell from '../cell/index.taro.vue';
+import NutCell from '../cell/index.taro.vue';
 const { create } = createComponent('form-item');
 export default create({
   inheritAttrs: false,
@@ -74,7 +74,7 @@ export default create({
     }
   },
   components: {
-    [Cell.name]: Cell
+    NutCell
   },
   setup(props, { slots }) {
     const useParent: any = () => {
diff --git a/src/packages/__VUE/formitem/index.vue b/src/packages/__VUE/formitem/index.vue
index 4dc97876d0..408b7fb1c3 100644
--- a/src/packages/__VUE/formitem/index.vue
+++ b/src/packages/__VUE/formitem/index.vue
@@ -27,7 +27,7 @@ import { pxCheck } from '@/packages/utils/pxCheck';
 import { computed, inject, provide, PropType, CSSProperties, getCurrentInstance, onUnmounted } from 'vue';
 import type { FormItemRule } from './types';
 import { createComponent } from '@/packages/utils/create';
-import Cell from '../cell/index.vue';
+import NutCell from '../cell/index.vue';
 const { create } = createComponent('form-item');
 export default create({
   inheritAttrs: false,
@@ -74,7 +74,7 @@ export default create({
     }
   },
   components: {
-    [Cell.name]: Cell
+    NutCell
   },
   setup(props, { slots }) {
     const useParent: any = () => {
diff --git a/src/packages/__VUE/imagepreview/imagePreviewItem.vue b/src/packages/__VUE/imagepreview/imagePreviewItem.vue
index 10e144ecde..962a5898ff 100644
--- a/src/packages/__VUE/imagepreview/imagePreviewItem.vue
+++ b/src/packages/__VUE/imagepreview/imagePreviewItem.vue
@@ -20,8 +20,8 @@ import { useTouch } from '@/packages/utils/useTouch';
 import { preventDefault, clamp } from '@/packages/utils/util';
 import { ImageInterface } from './types';
 import { baseProps } from './types';
-import Video from '../video/index.vue';
-import SwiperItem from '../swiperitem/index.vue';
+import NutVideo from '../video/index.vue';
+import NutSwiperItem from '../swiperitem/index.vue';
 const { create } = createComponent('image-preview-item');
 
 export default create({
@@ -50,8 +50,8 @@ export default create({
   },
   emits: ['close', 'scale'],
   components: {
-    [Video.name]: Video,
-    [SwiperItem.name]: SwiperItem
+    NutVideo,
+    NutSwiperItem
   },
 
   setup(props, { emit }) {
diff --git a/src/packages/__VUE/imagepreview/index.taro.vue b/src/packages/__VUE/imagepreview/index.taro.vue
index 9f07686045..832a3f724a 100644
--- a/src/packages/__VUE/imagepreview/index.taro.vue
+++ b/src/packages/__VUE/imagepreview/index.taro.vue
@@ -39,9 +39,9 @@ import { CircleClose } from '@nutui/icons-vue-taro';
 import { createComponent } from '@/packages/utils/create';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { ImageInterface } from './types';
-import Popup from '../popup/index.taro.vue';
-import Swiper from '../swiper/index.taro.vue';
-import SwiperItem from '../swiperitem/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
+import NutSwiper from '../swiper/index.taro.vue';
+import NutSwiperItem from '../swiperitem/index.taro.vue';
 const { create } = createComponent('image-preview');
 
 export default create({
@@ -94,9 +94,9 @@ export default create({
   },
   emits: ['close', 'change', 'longPress'],
   components: {
-    [Popup.name]: Popup,
-    [Swiper.name]: Swiper,
-    [SwiperItem.name]: SwiperItem,
+    NutPopup,
+    NutSwiper,
+    NutSwiperItem,
     CircleClose
   },
 
diff --git a/src/packages/__VUE/imagepreview/index.ts b/src/packages/__VUE/imagepreview/index.ts
index 3e92f8c6ed..ab238f9fac 100644
--- a/src/packages/__VUE/imagepreview/index.ts
+++ b/src/packages/__VUE/imagepreview/index.ts
@@ -3,11 +3,11 @@ import { Component, h, nextTick } from 'vue';
 import { ImageInterface } from './types';
 import { CreateComponent } from '@/packages/utils/create';
 import { Interceptor } from '@/packages/utils/util';
-import Popup from '../popup/index.vue';
-import Video from '../video/index.vue';
-import Swiper from '../swiper/index.vue';
-import SwiperItem from '../swiperitem/index.vue';
-import Overlay from '../overlay/index.vue';
+import NutPopup from '../popup/index.vue';
+import NutVideo from '../video/index.vue';
+import NutSwiper from '../swiper/index.vue';
+import NutSwiperItem from '../swiperitem/index.vue';
+import NutOverlay from '../overlay/index.vue';
 
 export class ImagePreviewOptions {
   show = false;
@@ -40,7 +40,7 @@ class ImagePreviewFunction {
     const options = Object.assign(this.options, _options);
     const { unmount } = CreateComponent(options, {
       name: 'image-preview',
-      components: [Popup, Video, Swiper, SwiperItem, Overlay],
+      components: [NutPopup, NutVideo, NutSwiper, NutSwiperItem, NutOverlay],
       wrapper: () => {
         return {
           setup() {
diff --git a/src/packages/__VUE/imagepreview/index.vue b/src/packages/__VUE/imagepreview/index.vue
index 24fed80fe0..4802880d4f 100644
--- a/src/packages/__VUE/imagepreview/index.vue
+++ b/src/packages/__VUE/imagepreview/index.vue
@@ -54,8 +54,8 @@ import ImagePreviewItem from './imagePreviewItem.vue';
 import { ImageInterface, baseProps } from './types';
 const { create } = createComponent('image-preview');
 import { CircleClose } from '@nutui/icons-vue';
-import Popup from '../popup/index.vue';
-import Swiper from '../swiper/index.vue';
+import NutPopup from '../popup/index.vue';
+import NutSwiper from '../swiper/index.vue';
 
 export default create({
   props: {
@@ -86,8 +86,8 @@ export default create({
   components: {
     ImagePreviewItem: ImagePreviewItem,
     CircleClose,
-    [Popup.name]: Popup,
-    [Swiper.name]: Swiper
+    NutPopup,
+    NutSwiper
   },
 
   setup(props, { emit }) {
diff --git a/src/packages/__VUE/invoice/index.taro.vue b/src/packages/__VUE/invoice/index.taro.vue
index 1e4a0ac763..fb19c21a8c 100644
--- a/src/packages/__VUE/invoice/index.taro.vue
+++ b/src/packages/__VUE/invoice/index.taro.vue
@@ -39,19 +39,19 @@
 <script lang="ts">
 import { reactive, toRefs, computed, ref, onMounted, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Form from '../form/index.taro.vue';
-import FormItem from '../formitem/index.taro.vue';
-import Radio from '../radio/index.taro.vue';
-import RadioGroup from '../radiogroup/index.vue';
-import Button from '../button/index.taro.vue';
+import NutForm from '../form/index.taro.vue';
+import NutFormItem from '../formitem/index.taro.vue';
+import NutRadio from '../radio/index.taro.vue';
+import NutRadioGroup from '../radiogroup/index.vue';
+import NutButton from '../button/index.taro.vue';
 const { componentName, create } = createComponent('invoice');
 export default create({
   components: {
-    [Form.name]: Form,
-    [FormItem.name]: FormItem,
-    [Radio.name]: Radio,
-    [RadioGroup.name]: RadioGroup,
-    [Button.name]: Button
+    NutForm,
+    NutFormItem,
+    NutRadio,
+    NutRadioGroup,
+    NutButton
   },
   props: {
     data: {
diff --git a/src/packages/__VUE/invoice/index.vue b/src/packages/__VUE/invoice/index.vue
index 9fd42415cf..2591a71f26 100644
--- a/src/packages/__VUE/invoice/index.vue
+++ b/src/packages/__VUE/invoice/index.vue
@@ -39,19 +39,19 @@
 <script lang="ts">
 import { reactive, toRefs, computed, ref, onMounted, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Form from '../form/index.vue';
-import FormItem from '../formitem/index.vue';
-import Radio from '../radio/index.vue';
-import RadioGroup from '../radiogroup/index.vue';
-import Button from '../button/index.vue';
+import NutForm from '../form/index.vue';
+import NutFormItem from '../formitem/index.vue';
+import NutRadio from '../radio/index.vue';
+import NutRadioGroup from '../radiogroup/index.vue';
+import NutButton from '../button/index.vue';
 const { componentName, create } = createComponent('invoice');
 export default create({
   components: {
-    [Form.name]: Form,
-    [FormItem.name]: FormItem,
-    [Radio.name]: Radio,
-    [RadioGroup.name]: RadioGroup,
-    [Button.name]: Button
+    NutForm,
+    NutFormItem,
+    NutRadio,
+    NutRadioGroup,
+    NutButton
   },
   props: {
     data: {
diff --git a/src/packages/__VUE/list/index.taro.vue b/src/packages/__VUE/list/index.taro.vue
index b98508d9f8..032fc00684 100644
--- a/src/packages/__VUE/list/index.taro.vue
+++ b/src/packages/__VUE/list/index.taro.vue
@@ -35,7 +35,7 @@
 import { reactive, toRefs, computed, ref, Ref, watch, ComputedRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
-import ScrollView from '../scroll-view/index.taro.vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { CachedPosition, CompareResult, binarySearch } from './type';
 const { create } = createComponent('list');
@@ -43,7 +43,7 @@ const clientHeight = Taro.getSystemInfoSync().windowHeight || 667;
 
 export default create({
   components: {
-    'nut-scroll-view': ScrollView
+    NutScrollView
   },
   props: {
     height: {
diff --git a/src/packages/__VUE/menuitem/index.taro.vue b/src/packages/__VUE/menuitem/index.taro.vue
index a9f9d61355..4bc22eb981 100644
--- a/src/packages/__VUE/menuitem/index.taro.vue
+++ b/src/packages/__VUE/menuitem/index.taro.vue
@@ -57,10 +57,10 @@
 import { reactive, PropType, inject, getCurrentInstance, computed, onUnmounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('menu-item');
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 import { MenuItemOption } from './type';
 import { Check } from '@nutui/icons-vue-taro';
-import ScrollView from '../scroll-view/index.taro.vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 
 export default create({
   props: {
@@ -83,8 +83,8 @@ export default create({
   },
   components: {
     Check,
-    [Popup.name]: Popup,
-    'nut-scroll-view': ScrollView
+    NutPopup,
+    NutScrollView
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
diff --git a/src/packages/__VUE/menuitem/index.vue b/src/packages/__VUE/menuitem/index.vue
index d5faad3959..a6bfdbc790 100644
--- a/src/packages/__VUE/menuitem/index.vue
+++ b/src/packages/__VUE/menuitem/index.vue
@@ -54,7 +54,7 @@
 import { reactive, PropType, inject, getCurrentInstance, computed, onUnmounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('menu-item');
-import Popup from '../popup/index.vue';
+import NutPopup from '../popup/index.vue';
 import { MenuItemOption } from './type';
 import { Check } from '@nutui/icons-vue';
 export default create({
@@ -77,7 +77,7 @@ export default create({
     inactiveTitleClass: String
   },
   components: {
-    [Popup.name]: Popup,
+    NutPopup,
     Check
   },
   emits: ['update:modelValue', 'change', 'open', 'close'],
diff --git a/src/packages/__VUE/notify/index.taro.vue b/src/packages/__VUE/notify/index.taro.vue
index 059b120a53..292b09a4b0 100644
--- a/src/packages/__VUE/notify/index.taro.vue
+++ b/src/packages/__VUE/notify/index.taro.vue
@@ -15,12 +15,12 @@
 <script lang="ts">
 import { ref, watch, onUnmounted } from 'vue';
 import { createComponent } from '../../utils/create';
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 const { create } = createComponent('notify');
 
 export default create({
   components: {
-    [Popup.name]: Popup
+    NutPopup
   },
   props: {
     id: String,
diff --git a/src/packages/__VUE/notify/index.vue b/src/packages/__VUE/notify/index.vue
index 5a167ccdbe..2b0369ac41 100644
--- a/src/packages/__VUE/notify/index.vue
+++ b/src/packages/__VUE/notify/index.vue
@@ -15,12 +15,12 @@
 <script lang="ts">
 import { ref, watch } from 'vue';
 import { createComponent } from '../../utils/create';
-import Popup from '../popup/index.vue';
+import NutPopup from '../popup/index.vue';
 const { create } = createComponent('notify');
 
 export default create({
   components: {
-    [Popup.name]: Popup
+    NutPopup
   },
   props: {
     id: String,
diff --git a/src/packages/__VUE/numberkeyboard/index.taro.vue b/src/packages/__VUE/numberkeyboard/index.taro.vue
index 00468c562c..2857210c6f 100644
--- a/src/packages/__VUE/numberkeyboard/index.taro.vue
+++ b/src/packages/__VUE/numberkeyboard/index.taro.vue
@@ -79,7 +79,7 @@
 <script lang="ts">
 import { computed, ref, watch, Ref, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 const { create, translate } = createComponent('number-keyboard');
 export interface keys {
   id: number | string;
@@ -87,7 +87,7 @@ export interface keys {
 }
 export default create({
   components: {
-    [Popup.name]: Popup
+    NutPopup
   },
   props: {
     confirmText: {
diff --git a/src/packages/__VUE/numberkeyboard/index.vue b/src/packages/__VUE/numberkeyboard/index.vue
index f804accaf0..ff9858fb25 100644
--- a/src/packages/__VUE/numberkeyboard/index.vue
+++ b/src/packages/__VUE/numberkeyboard/index.vue
@@ -79,7 +79,7 @@
 <script lang="ts">
 import { computed, ref, watch, Ref, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.vue';
+import NutPopup from '../popup/index.vue';
 const { create, translate } = createComponent('number-keyboard');
 export interface keys {
   id: number | string;
@@ -87,7 +87,7 @@ export interface keys {
 }
 export default create({
   components: {
-    [Popup.name]: Popup
+    NutPopup
   },
   props: {
     confirmText: {
diff --git a/src/packages/__VUE/picker/common.ts b/src/packages/__VUE/picker/common.ts
index 84c2387461..c08ca08421 100644
--- a/src/packages/__VUE/picker/common.ts
+++ b/src/packages/__VUE/picker/common.ts
@@ -3,13 +3,13 @@ import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 const { translate } = createComponent('picker');
 import { usePicker } from './usePicker';
-import column from './Column.vue';
+import NutPickerColumn from './Column.vue';
 import Taro from '@tarojs/taro';
 import baseProps from './baseProps';
 
 export const componentWeb = {
   components: {
-    [column.name]: column
+    NutPickerColumn
   },
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
@@ -53,7 +53,6 @@ export const componentWeb = {
 
     return {
       ...toRefs(state),
-      column,
       columnsType,
       columnsList,
       columnFieldNames,
@@ -71,7 +70,7 @@ export const componentWeb = {
 
 export const componentWeapp = {
   components: {
-    [column.name]: column
+    NutPickerColumn
   },
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
@@ -138,7 +137,6 @@ export const componentWeapp = {
 
     return {
       ...toRefs(state),
-      column,
       columnsType,
       columnsList,
       columnFieldNames,
diff --git a/src/packages/__VUE/picker/index.vue b/src/packages/__VUE/picker/index.vue
index 133383f522..7198a7abed 100644
--- a/src/packages/__VUE/picker/index.vue
+++ b/src/packages/__VUE/picker/index.vue
@@ -36,13 +36,13 @@
 import { ref, computed, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { usePicker } from './usePicker';
-import column from './Column.vue';
+import NutPickerColumn from './Column.vue';
 import baseProps from './baseProps';
 const { create, translate } = createComponent('picker');
 
 export default create({
   components: {
-    [column.name]: column
+    NutPickerColumn
   },
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
@@ -76,7 +76,6 @@ export default create({
     };
 
     return {
-      column,
       columnsType,
       columnsList,
       columnFieldNames,
diff --git a/src/packages/__VUE/popover/index.taro.vue b/src/packages/__VUE/popover/index.taro.vue
index 8d4b98cdbe..20ecbb91da 100644
--- a/src/packages/__VUE/popover/index.taro.vue
+++ b/src/packages/__VUE/popover/index.taro.vue
@@ -71,12 +71,12 @@ const { create } = createComponent('popover');
 import { useTaroRect, rectTaro, useTaroRectById } from '@/packages/utils/useTaroRect';
 import { isArray } from '@/packages/utils/util';
 import { PopoverList, PopoverTheme, PopoverLocation } from './type';
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 
 export default create({
   inheritAttrs: false,
   components: {
-    [Popup.name]: Popup
+    NutPopup
   },
   props: {
     visible: { type: Boolean, default: false },
diff --git a/src/packages/__VUE/popover/index.vue b/src/packages/__VUE/popover/index.vue
index d94973c4c9..72b769e0a5 100644
--- a/src/packages/__VUE/popover/index.vue
+++ b/src/packages/__VUE/popover/index.vue
@@ -37,12 +37,12 @@ import { computed, watch, ref, PropType, CSSProperties, onMounted } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { isArray } from '@/packages/utils/util';
 import { useRect, rect } from '@/packages/utils/useRect';
-import Popup from '../popup/index.vue';
+import NutPopup from '../popup/index.vue';
 import { PopoverList, PopoverTheme, PopoverLocation } from './type';
 const { create } = createComponent('popover');
 export default create({
   components: {
-    [Popup.name]: Popup
+    NutPopup
   },
   props: {
     visible: { type: Boolean, default: false },
diff --git a/src/packages/__VUE/popup/index.taro.vue b/src/packages/__VUE/popup/index.taro.vue
index 437d540c20..c260246c27 100644
--- a/src/packages/__VUE/popup/index.taro.vue
+++ b/src/packages/__VUE/popup/index.taro.vue
@@ -32,7 +32,7 @@
 <script lang="ts">
 import { computed, reactive, toRefs, watch, watchEffect } from 'vue';
 import { Close } from '@nutui/icons-vue-taro';
-import Overlay from '../overlay/index.taro.vue';
+import NutOverlay from '../overlay/index.taro.vue';
 import { popupProps } from './props';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('popup');
@@ -42,7 +42,7 @@ let _zIndex = initIndex;
 
 export default create({
   components: {
-    [Overlay.name]: Overlay,
+    NutOverlay,
     Close
   },
   props: popupProps,
diff --git a/src/packages/__VUE/popup/index.vue b/src/packages/__VUE/popup/index.vue
index 25f4cf5753..ae5e50dde2 100644
--- a/src/packages/__VUE/popup/index.vue
+++ b/src/packages/__VUE/popup/index.vue
@@ -32,7 +32,7 @@
 <script lang="ts">
 import { computed, reactive, toRefs, watch, watchEffect } from 'vue';
 import { Close } from '@nutui/icons-vue';
-import Overlay from '../overlay/index.vue';
+import NutOverlay from '../overlay/index.vue';
 import { popupProps } from './props';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('popup');
@@ -42,7 +42,7 @@ let _zIndex = initIndex;
 
 export default create({
   components: {
-    [Overlay.name]: Overlay,
+    NutOverlay,
     Close
   },
   props: popupProps,
diff --git a/src/packages/__VUE/shortpassword/index.taro.vue b/src/packages/__VUE/shortpassword/index.taro.vue
index c1547fff72..0655b268b4 100644
--- a/src/packages/__VUE/shortpassword/index.taro.vue
+++ b/src/packages/__VUE/shortpassword/index.taro.vue
@@ -37,13 +37,13 @@
 <script lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 import { Tips } from '@nutui/icons-vue-taro';
 const { create, translate } = createComponent('short-password');
 import { eventCenter, getCurrentInstance } from '@tarojs/taro';
 export default create({
   components: {
-    [Popup.name]: Popup,
+    NutPopup,
     Tips
   },
   props: {
diff --git a/src/packages/__VUE/shortpassword/index.vue b/src/packages/__VUE/shortpassword/index.vue
index bd5ad9f229..dae3703f11 100644
--- a/src/packages/__VUE/shortpassword/index.vue
+++ b/src/packages/__VUE/shortpassword/index.vue
@@ -37,12 +37,12 @@
 <script lang="ts">
 import { ref, computed, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.vue';
+import NutPopup from '../popup/index.vue';
 import { Tips } from '@nutui/icons-vue';
 const { create, translate } = createComponent('short-password');
 export default create({
   components: {
-    [Popup.name]: Popup,
+    NutPopup,
     Tips
   },
   props: {
diff --git a/src/packages/__VUE/signature/index.taro.vue b/src/packages/__VUE/signature/index.taro.vue
index 8573b64297..1d22c8cb37 100644
--- a/src/packages/__VUE/signature/index.taro.vue
+++ b/src/packages/__VUE/signature/index.taro.vue
@@ -22,7 +22,7 @@
 import Taro from '@tarojs/taro';
 import { ref, reactive, onMounted, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Button from '../button/index.taro.vue';
+import NutButton from '../button/index.taro.vue';
 const { componentName, create, translate } = createComponent('signature');
 
 export default create({
@@ -49,7 +49,7 @@ export default create({
     }
   },
   components: {
-    [Button.name]: Button
+    NutButton
   },
   emits: ['start', 'end', 'signing', 'confirm', 'clear'],
 
diff --git a/src/packages/__VUE/signature/index.vue b/src/packages/__VUE/signature/index.vue
index 27aac8b3e7..6d5981fad7 100644
--- a/src/packages/__VUE/signature/index.vue
+++ b/src/packages/__VUE/signature/index.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { ref, reactive, onMounted, computed, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Button from '../button/index.vue';
+import NutButton from '../button/index.vue';
 const { componentName, create, translate } = createComponent('signature');
 
 export default create({
@@ -47,7 +47,7 @@ export default create({
     }
   },
   components: {
-    [Button.name]: Button
+    NutButton
   },
   emits: ['start', 'end', 'signing', 'confirm', 'clear'],
 
diff --git a/src/packages/__VUE/skeleton/index.taro.vue b/src/packages/__VUE/skeleton/index.taro.vue
index 999b372729..7d2f1a605f 100644
--- a/src/packages/__VUE/skeleton/index.taro.vue
+++ b/src/packages/__VUE/skeleton/index.taro.vue
@@ -17,13 +17,13 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import Avatar from '../avatar/index.taro.vue';
+import NutAvatar from '../avatar/index.taro.vue';
 import { AvatarShape } from '../avatar/types';
 import { CSSProperties, PropType, computed, toRefs } from 'vue';
 const { create } = createComponent('skeleton');
 export default create({
   components: {
-    [Avatar.name]: Avatar
+    NutAvatar
   },
   props: {
     //每行宽度
diff --git a/src/packages/__VUE/skeleton/index.vue b/src/packages/__VUE/skeleton/index.vue
index 7975eea7cc..1c557b2807 100644
--- a/src/packages/__VUE/skeleton/index.vue
+++ b/src/packages/__VUE/skeleton/index.vue
@@ -17,13 +17,13 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import Avatar from '../avatar/index.vue';
+import NutAvatar from '../avatar/index.vue';
 import { AvatarShape } from '../avatar/types';
 import { CSSProperties, PropType, computed, toRefs } from 'vue';
 const { create } = createComponent('skeleton');
 export default create({
   components: {
-    [Avatar.name]: Avatar
+    NutAvatar
   },
   props: {
     //每行宽度
diff --git a/src/packages/__VUE/sku/components/SkuHeader.taro.vue b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
index af3f481e7c..97b98ecba3 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.taro.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.taro.vue
@@ -19,7 +19,7 @@
 </template>
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
-import Price from '../../price/index.taro.vue';
+import NutPrice from '../../price/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
 const { create, translate } = createComponent('sku-header');
@@ -32,7 +32,7 @@ export default create({
     }
   },
   components: {
-    [Price.name]: Price
+    NutPrice
   },
   setup(props, { slots }) {
     const getSlots = (name: string) => slots[name];
diff --git a/src/packages/__VUE/sku/components/SkuHeader.vue b/src/packages/__VUE/sku/components/SkuHeader.vue
index 7fa33343dc..5916851714 100644
--- a/src/packages/__VUE/sku/components/SkuHeader.vue
+++ b/src/packages/__VUE/sku/components/SkuHeader.vue
@@ -17,7 +17,7 @@
   </view>
 </template>
 <script lang="ts">
-import Price from '../../price/index.vue';
+import NutPrice from '../../price/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('sku-header');
 
@@ -30,7 +30,7 @@ export default create({
   },
   emits: [],
   components: {
-    [Price.name]: Price
+    NutPrice
   },
   setup(props, { slots }) {
     const getSlots = (name: string) => slots[name];
diff --git a/src/packages/__VUE/sku/components/SkuStepper.taro.vue b/src/packages/__VUE/sku/components/SkuStepper.taro.vue
index 9bf041fefb..32a3d9c185 100644
--- a/src/packages/__VUE/sku/components/SkuStepper.taro.vue
+++ b/src/packages/__VUE/sku/components/SkuStepper.taro.vue
@@ -19,7 +19,7 @@
 import { ref, onMounted } from 'vue';
 import { TypeOfFun } from '@/packages/utils/util';
 import { createComponent } from '@/packages/utils/create';
-import InputNumber from '../../inputnumber/index.taro.vue';
+import NutInputNumber from '../../inputnumber/index.taro.vue';
 const { create } = createComponent('sku-stepper');
 
 export default create({
@@ -50,7 +50,7 @@ export default create({
   emits: ['click', 'changeSku', 'changeStepper', 'clickBtnOptions', 'overLimit', 'reduce', 'add'],
 
   components: {
-    [InputNumber.name]: InputNumber
+    NutInputNumber
   },
 
   setup(props: any, { emit }) {
diff --git a/src/packages/__VUE/sku/components/SkuStepper.vue b/src/packages/__VUE/sku/components/SkuStepper.vue
index c7c669ead2..a4a0ca804f 100644
--- a/src/packages/__VUE/sku/components/SkuStepper.vue
+++ b/src/packages/__VUE/sku/components/SkuStepper.vue
@@ -19,7 +19,7 @@
 import { ref, onMounted } from 'vue';
 import { TypeOfFun } from '@/packages/utils/util';
 import { createComponent } from '@/packages/utils/create';
-import InputNumber from '../../inputnumber/index.vue';
+import NutInputNumber from '../../inputnumber/index.vue';
 const { create } = createComponent('sku-stepper');
 
 export default create({
@@ -50,7 +50,7 @@ export default create({
   emits: ['click', 'changeSku', 'changeStepper', 'clickBtnOptions', 'overLimit', 'reduce', 'add'],
 
   components: {
-    [InputNumber.name]: InputNumber
+    NutInputNumber
   },
 
   setup(props: any, { emit }) {
diff --git a/src/packages/__VUE/sku/index.taro.vue b/src/packages/__VUE/sku/index.taro.vue
index c0dbeb11fe..b54028f75d 100644
--- a/src/packages/__VUE/sku/index.taro.vue
+++ b/src/packages/__VUE/sku/index.taro.vue
@@ -67,7 +67,7 @@ import SkuHeader from './components/SkuHeader.taro.vue';
 import SkuSelect from './components/SkuSelect.vue';
 import SkuStepper from './components/SkuStepper.taro.vue';
 import SkuOperate from './components/SkuOperate.vue';
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('sku');
 
@@ -164,7 +164,7 @@ export default create({
     SkuSelect,
     SkuStepper,
     SkuOperate,
-    [Popup.name]: Popup
+    NutPopup
   },
 
   setup(props: any, { emit, slots }) {
diff --git a/src/packages/__VUE/sku/index.vue b/src/packages/__VUE/sku/index.vue
index 9c7e607aa1..ec4a53ae15 100644
--- a/src/packages/__VUE/sku/index.vue
+++ b/src/packages/__VUE/sku/index.vue
@@ -67,7 +67,7 @@ import SkuHeader from './components/SkuHeader.vue';
 import SkuSelect from './components/SkuSelect.vue';
 import SkuStepper from './components/SkuStepper.vue';
 import SkuOperate from './components/SkuOperate.vue';
-import Popup from '../popup/index.vue';
+import NutPopup from '../popup/index.vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('sku');
 
@@ -164,7 +164,7 @@ export default create({
     SkuSelect,
     SkuStepper,
     SkuOperate,
-    [Popup.name]: Popup
+    NutPopup
   },
 
   setup(props: any, { emit, slots }) {
diff --git a/src/packages/__VUE/tabbaritem/index.taro.vue b/src/packages/__VUE/tabbaritem/index.taro.vue
index 1a7ef2c60e..61fae1b742 100644
--- a/src/packages/__VUE/tabbaritem/index.taro.vue
+++ b/src/packages/__VUE/tabbaritem/index.taro.vue
@@ -33,11 +33,11 @@
 <script lang="ts">
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { Component, ComponentInternalInstance, computed, PropType, getCurrentInstance, inject, reactive } from 'vue';
-import Badge from '../badge/index.taro.vue';
+import NutBadge from '../badge/index.taro.vue';
 const { create } = createComponent('tabbar-item');
 export default create({
   components: {
-    [Badge.name]: Badge
+    NutBadge
   },
   props: {
     tabTitle: {
diff --git a/src/packages/__VUE/tabbaritem/index.vue b/src/packages/__VUE/tabbaritem/index.vue
index 396b85d362..06b629cffb 100644
--- a/src/packages/__VUE/tabbaritem/index.vue
+++ b/src/packages/__VUE/tabbaritem/index.vue
@@ -33,11 +33,11 @@
 <script lang="ts">
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { useRouter } from '@/packages/utils/useRoute';
-import Badge from '../badge/index.vue';
+import NutBadge from '../badge/index.vue';
 import { Component, ComponentInternalInstance, computed, getCurrentInstance, inject, reactive, PropType } from 'vue';
 const { create } = createComponent('tabbar-item');
 export default create({
-  components: { [Badge.name]: Badge },
+  components: { NutBadge },
   props: {
     tabTitle: {
       // 标签页的标题
diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue
index 086b669276..ec2c23bf6e 100644
--- a/src/packages/__VUE/tabs/index.taro.vue
+++ b/src/packages/__VUE/tabs/index.taro.vue
@@ -58,7 +58,7 @@ import Taro from '@tarojs/taro';
 import type { RectItem } from './types';
 import { useTabContentTouch } from './hooks';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
-import ScrollView from '../scroll-view/index.taro.vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 
 export class Title {
   title = '';
@@ -72,7 +72,7 @@ const { create } = createComponent('tabs');
 export default create({
   components: {
     JoySmile,
-    'nut-scroll-view': ScrollView
+    NutScrollView
   },
   props: {
     modelValue: {
diff --git a/src/packages/__VUE/tabs/index.vue b/src/packages/__VUE/tabs/index.vue
index eb4b74e9bb..94e2f5f6ff 100644
--- a/src/packages/__VUE/tabs/index.vue
+++ b/src/packages/__VUE/tabs/index.vue
@@ -83,12 +83,12 @@ export class Title {
   constructor() {}
 }
 export type TabsSize = 'large' | 'normal' | 'small';
-import Sticky from '../sticky/index.vue';
+import NutSticky from '../sticky/index.vue';
 const { create } = createComponent('tabs');
 import { JoySmile } from '@nutui/icons-vue';
 import { useTabContentTouch } from './hooks';
 export default create({
-  components: { [Sticky.name]: Sticky, JoySmile },
+  components: { NutSticky, JoySmile },
   props: {
     modelValue: {
       type: [String, Number],
@@ -150,7 +150,7 @@ export default create({
   emits: ['update:modelValue', 'click', 'change'],
 
   setup(props: any, { emit, slots }: any) {
-    const container = ref(null);
+    const container = ref<any>(null);
     let stickyFixed: boolean;
     provide('tabsOpiton', {
       activeKey: computed(() => props.modelValue || '0'),
diff --git a/src/packages/__VUE/timeselect/index.taro.vue b/src/packages/__VUE/timeselect/index.taro.vue
index dc1d38bada..b28819c5e4 100644
--- a/src/packages/__VUE/timeselect/index.taro.vue
+++ b/src/packages/__VUE/timeselect/index.taro.vue
@@ -31,11 +31,11 @@
 <script lang="ts">
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.taro.vue';
+import NutPopup from '../popup/index.taro.vue';
 const { create, translate } = createComponent('time-select');
 export default create({
   components: {
-    [Popup.name]: Popup
+    NutPopup
   },
   props: {
     visible: {
diff --git a/src/packages/__VUE/timeselect/index.vue b/src/packages/__VUE/timeselect/index.vue
index e2e6991132..5df626d0fe 100644
--- a/src/packages/__VUE/timeselect/index.vue
+++ b/src/packages/__VUE/timeselect/index.vue
@@ -31,11 +31,11 @@
 <script lang="ts">
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.vue';
+import NutPopup from '../popup/index.vue';
 const { create, translate } = createComponent('time-select');
 export default create({
   components: {
-    [Popup.name]: Popup
+    NutPopup
   },
   props: {
     visible: {
diff --git a/src/packages/__VUE/tour/index.taro.vue b/src/packages/__VUE/tour/index.taro.vue
index b81f94fcc4..82997f78c0 100644
--- a/src/packages/__VUE/tour/index.taro.vue
+++ b/src/packages/__VUE/tour/index.taro.vue
@@ -74,17 +74,17 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, watch, ref, reactive, toRefs, PropType, onMounted, Component } from 'vue';
-import { PopoverLocation } from '../popover/type';
+import { computed, watch, ref, reactive, toRefs, PropType, onMounted } from 'vue';
+import { PopoverLocation, PopoverTheme } from '../popover/type';
 import { createComponent } from '@/packages/utils/create';
 import { rectTaro, useTaroRectById } from '@/packages/utils/useTaroRect';
 import { Close } from '@nutui/icons-vue-taro';
-import Popover from '../popover/index.taro.vue';
+import NutPopover from '../popover/index.taro.vue';
 
 interface StepOptions {
   target: string;
   content: string;
-  location?: string;
+  location?: PopoverLocation;
   popoverOffset?: number[];
   arrowOffset?: number;
 }
@@ -92,7 +92,7 @@ interface StepOptions {
 const { create } = createComponent('tour');
 export default create({
   components: {
-    [Popover.name]: Popover as Component,
+    NutPopover,
     Close
   },
   props: {
@@ -138,7 +138,7 @@ export default create({
       default: ''
     },
     theme: {
-      type: String,
+      type: String as PropType<PopoverTheme>,
       default: 'light'
     },
     maskWidth: {
diff --git a/src/packages/__VUE/tour/index.vue b/src/packages/__VUE/tour/index.vue
index 348e058a5b..7e23b36e82 100644
--- a/src/packages/__VUE/tour/index.vue
+++ b/src/packages/__VUE/tour/index.vue
@@ -75,24 +75,24 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, watch, ref, reactive, toRefs, PropType, nextTick, onMounted, Component } from 'vue';
-import { PopoverLocation } from '../popover/type';
+import { computed, watch, ref, reactive, toRefs, PropType, nextTick, onMounted } from 'vue';
+import { PopoverLocation, PopoverTheme } from '../popover/type';
 import { createComponent } from '@/packages/utils/create';
 import { useRect } from '@/packages/utils/useRect';
 import { Close } from '@nutui/icons-vue';
-import Popover from '../popover/index.vue';
+import NutPopover from '../popover/index.vue';
 
 interface StepOptions {
   target: Element | string;
   content: string;
-  location?: string;
+  location?: PopoverLocation;
   popoverOffset?: number[];
   arrowOffset?: number;
 }
 const { create } = createComponent('tour');
 export default create({
   components: {
-    [Popover.name]: Popover as Component,
+    NutPopover,
     Close
   },
   props: {
@@ -138,7 +138,7 @@ export default create({
       default: ''
     },
     theme: {
-      type: String,
+      type: String as PropType<PopoverTheme>,
       default: 'light'
     },
     maskWidth: {
diff --git a/src/packages/__VUE/uploader/index.taro.vue b/src/packages/__VUE/uploader/index.taro.vue
index e0794efdfc..5079193e05 100644
--- a/src/packages/__VUE/uploader/index.taro.vue
+++ b/src/packages/__VUE/uploader/index.taro.vue
@@ -76,15 +76,15 @@ import { createComponent } from '@/packages/utils/create';
 import { UploaderTaro, UploadOptions } from './uploader';
 import { FileItem, MediaType, SizeType, SourceType } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
-import Progress from '../progress/index.taro.vue';
-import Button from '../button/index.taro.vue';
+import NutProgress from '../progress/index.taro.vue';
+import NutButton from '../button/index.taro.vue';
 const { create, translate } = createComponent('uploader');
 import Taro from '@tarojs/taro';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue-taro';
 export default create({
   components: {
-    [Progress.name]: Progress,
-    [Button.name]: Button,
+    NutProgress,
+    NutButton,
     Photograph,
     Failure,
     Loading,
diff --git a/src/packages/__VUE/uploader/index.vue b/src/packages/__VUE/uploader/index.vue
index 8a9858cd0e..23c93204a5 100644
--- a/src/packages/__VUE/uploader/index.vue
+++ b/src/packages/__VUE/uploader/index.vue
@@ -76,12 +76,12 @@ import { createComponent } from '@/packages/utils/create';
 import { Uploader, UploadOptions } from './uploader';
 import { FileItem } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
-import Progress from '../progress/index.vue';
+import NutProgress from '../progress/index.vue';
 import { Photograph, Failure, Loading, Del, Link } from '@nutui/icons-vue';
 const { create, translate } = createComponent('uploader');
 export default create({
   components: {
-    [Progress.name]: Progress,
+    NutProgress,
     Photograph,
     Failure,
     Loading,