chore: taro dev optimization

jd/demo.js

@@ -1,5 +1,5 @@
 var nameLc = 'test';
-var demoModel = function(nameLc) {
+var demoModel = function (nameLc) {
   var temp = {
     demo: `<template>
     <div class="demo">
@@ -12,7 +12,7 @@ var demoModel = function(nameLc) {
   </template>
   
   <script lang="ts">
-  import { createComponent } from '@/packages/utils/create';
+  import { createComponent } from '../../utils/create';
   const { createDemo } = createComponent('${nameLc}');
   export default createDemo({
     props: {},
@@ -35,7 +35,7 @@ var demoModel = function(nameLc) {
   </template>
   <script lang="ts">
   import { toRefs } from 'vue';
-  import { createComponent } from '@/packages/utils/create';
+  import { createComponent } from '../../utils/create';
   const { componentName, create } = createComponent('${nameLc}');
   
   export default create({

jd/generate-nutui-taro-vue.js

@@ -2,10 +2,10 @@ const package = require('../package.json');
 const config = require('../src/config.json');
 const path = require('path');
 const fs = require('fs-extra');
-let importStr = `import { App } from 'vue';\n`;
+let importStr = `//import { App } from 'vue';\n`;
 const packages = [];
-config.nav.map(item => {
-  item.packages.forEach(element => {
+config.nav.map((item) => {
+  item.packages.forEach((element) => {
     let { name, show, type, taro } = element;
     if (show && taro) {
       importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index${
@@ -15,7 +15,7 @@ config.nav.map(item => {
     }
   });
 });
-let installFunction = `function install(app: App) {
+let installFunction = `function install(app: any) {
   const packages = [${packages.join(',')}];
   packages.forEach((item:any) => {
     if (item.install) {
@@ -33,7 +33,7 @@ fs.outputFile(
   path.resolve(__dirname, '../src/packages/nutui.taro.vue.ts'),
   fileStr,
   'utf8',
-  error => {
+  (error) => {
     // logger.success(`${package_config_path} 文件写入成功`);
   }
 );

package.json

@@ -37,14 +37,14 @@
   ],
   "scripts": {
     "checked": "npm run generate:file && tsc",
-    "checked:taro:vue": "npm run generate:file:taro:vue && tsc",
+    "checked:taro:vue": "npm run generate:file:taro:vue",
     "dev": "npm run checked && vite --open --force",
     "dev:taro:vue": "npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
     "build:site": "npm run checked && vite build",
     "build:gh-pages": "npm run checked && vite build --base=/nutui/",
     "build:site:oss": "npm run checked && vite build --base=/nutui/3x/",
     "build": "npm run checked && vite build --config vite.config.build.ts && npm run generate:types && npm run generate:themes",
-    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && npm run generate:types && npm run generate:themes && npm run copytaro",
+    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && npm run generate:types && npm run generate:themes",
     "build:disperse": "vite build --config vite.config.build.disperse.ts",
     "serve": "vite preview",
     "upload": "yarn build:site:oss && node ./jd/upload.js",
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
-    "@tarojs/taro": "3.3.0-alpha.6",
+    "@tarojs/taro": "^3.3.0-alpha.8",
     "@types/jest": "^26.0.22",
     "@types/node": "^14.14.31",
     "@vitejs/plugin-legacy": "^1.4.0",

src/packages/__VUE/actionsheet/index.taro.vue

@@ -36,10 +36,10 @@
   </view>
 </template>
 <script>
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { computed } from 'vue';
 const { componentName, create } = createComponent('actionsheet');
-import { popupProps } from '@/packages/__VUE/popup/index.vue';
+import { popupProps } from '../popup/index.vue';
 export default create({
   props: {
     ...popupProps,
@@ -86,7 +86,7 @@ export default create({
       };
     });
 
-    const isHighlight = item => {
+    const isHighlight = (item) => {
       return props.chooseTagValue &&
         props.chooseTagValue === item[props.optionTag]
         ? props.color

src/packages/__VUE/actionsheet/index.vue

@@ -36,10 +36,10 @@
   </view>
 </template>
 <script>
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { computed } from 'vue';
 const { componentName, create } = createComponent('actionsheet');
-import { popupProps } from '@/packages/__VUE/popup/index.vue';
+import { popupProps } from '../popup/index.vue';
 export default create({
   props: {
     ...popupProps,
@@ -86,7 +86,7 @@ export default create({
       };
     });
 
-    const isHighlight = item => {
+    const isHighlight = (item) => {
       return props.chooseTagValue &&
         props.chooseTagValue === item[props.optionTag]
         ? props.color

src/packages/__VUE/address/demo.vue

@@ -14,7 +14,7 @@
       :city="city"
       :country="country"
       :town="town"
-      @change="cal => onChange(cal, 'normal')"
+      @change="(cal) => onChange(cal, 'normal')"
       @close="close1"
       custom-address-title="请选择所在地区"
     ></nut-address>
@@ -31,7 +31,7 @@
       v-model:visible="exist"
       type="exist"
       :exist-address="existAddress"
-      @change="cal => onChange(cal, 'exist')"
+      @change="(cal) => onChange(cal, 'exist')"
       @close="close2"
       :is-show-custom-address="false"
       @selected="selected"
@@ -50,7 +50,7 @@
       v-model:visible="customImg"
       type="exist"
       :exist-address="existAddress"
-      @change="cal => onChange(cal, 'customImg')"
+      @change="(cal) => onChange(cal, 'customImg')"
       @close="close3"
       :is-show-custom-address="false"
       @selected="selected"
@@ -76,7 +76,7 @@
       :country="country"
       :town="town"
       :back-btn-icon="backBtnIcon"
-      @change="cal => onChange(cal, 'other')"
+      @change="(cal) => onChange(cal, 'other')"
       @close="close4"
       @selected="selected"
       custom-and-exist-title="选择其他地址"
@@ -87,7 +87,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { reactive, ref, toRefs } from 'vue';
 const { createDemo } = createComponent('address');
 interface CalBack {
@@ -217,13 +217,8 @@ export default createDemo({
     const close2 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
-        const {
-          provinceName,
-          cityName,
-          countyName,
-          townName,
-          addressDetail
-        } = val.data;
+        const { provinceName, cityName, countyName, townName, addressDetail } =
+          val.data;
         text.two =
           provinceName + cityName + countyName + townName + addressDetail;
       } else {
@@ -249,13 +244,8 @@ export default createDemo({
     const close3 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
-        const {
-          provinceName,
-          cityName,
-          countyName,
-          townName,
-          addressDetail
-        } = val.data;
+        const { provinceName, cityName, countyName, townName, addressDetail } =
+          val.data;
         text.three =
           provinceName + cityName + countyName + townName + addressDetail;
       } else {
@@ -266,13 +256,8 @@ export default createDemo({
     const close4 = (val: CalResult) => {
       console.log(val);
       if (val.type == 'exist') {
-        const {
-          provinceName,
-          cityName,
-          countyName,
-          townName,
-          addressDetail
-        } = val.data;
+        const { provinceName, cityName, countyName, townName, addressDetail } =
+          val.data;
         text.four =
           provinceName + cityName + countyName + townName + addressDetail;
       } else {

src/packages/__VUE/address/index.taro.vue

@@ -120,9 +120,9 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, watch, nextTick, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import Icon from '@/packages/__VUE/icon/index.taro.vue';
-import Popup from '@/packages/__VUE/popup/index.taro.vue';
+import { createComponent } from '../../utils/create';
+import Icon from '../icon/index.taro.vue';
+import Popup from '../popup/index.taro.vue';
 import Taro from '@tarojs/taro';
 
 const { create, componentName } = createComponent('address');

src/packages/__VUE/address/index.vue

@@ -119,7 +119,7 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, watch, nextTick } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('address');
 interface RegionData {
   name: string;

src/packages/__VUE/avatar/demo.vue

@@ -45,7 +45,7 @@
   </div>
 </template>
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('avatar');
 export default createDemo({
   props: {},

src/packages/__VUE/avatar/index.taro.vue

@@ -8,7 +8,7 @@
 </template>
 <script lang="ts">
 import { toRefs, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('avatar');
 export default create({
   props: {

src/packages/__VUE/avatar/index.vue

@@ -8,7 +8,7 @@
 </template>
 <script lang="ts">
 import { toRefs, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('avatar');
 export default create({
   props: {

src/packages/__VUE/backtop/demo.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('backtop');
 
 export default createDemo({

src/packages/__VUE/backtop/index.vue

@@ -15,7 +15,7 @@ import {
   onDeactivated,
   reactive
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('backtop');
 export default create({
   props: {
@@ -122,7 +122,7 @@ export default create({
       return (
         window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
-        function(callback) {
+        function (callback) {
           window.setTimeout(callback, 1000 / 60);
         }
       );

src/packages/__VUE/button/index.taro.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('button');
 
 export type ButtonType =
@@ -62,16 +62,8 @@ export default create({
   },
   emits: ['click'],
   setup(props, { emit, slots }) {
-    const {
-      type,
-      size,
-      shape,
-      disabled,
-      loading,
-      color,
-      plain,
-      block
-    } = toRefs(props);
+    const { type, size, shape, disabled, loading, color, plain, block } =
+      toRefs(props);
 
     const handleClick = (event: MouseEvent) => {
       if (!loading.value && !disabled.value) {

src/packages/__VUE/button/index.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('button');
 
 export type ButtonType =
@@ -62,16 +62,8 @@ export default create({
   },
   emits: ['click'],
   setup(props, { emit, slots }) {
-    const {
-      type,
-      size,
-      shape,
-      disabled,
-      loading,
-      color,
-      plain,
-      block
-    } = toRefs(props);
+    const { type, size, shape, disabled, loading, color, plain, block } =
+      toRefs(props);
 
     const handleClick = (event: MouseEvent) => {
       if (!loading.value && !disabled.value) {

src/packages/__VUE/calendar/demo.vue

@@ -76,7 +76,7 @@
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 
 const { createDemo } = createComponent('calendar');
 

src/packages/__VUE/calendar/index.taro.vue

@@ -41,11 +41,11 @@
 </template>
 <script lang="ts">
 import { PropType, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('calendar');
-import Popup from '@/packages/__VUE/popup/index.taro.vue';
-import CalendarItem from '@/packages/__VUE/calendaritem/index.vue';
-import Utils from '@/packages/utils/date';
+import Popup from '../popup/index.taro.vue';
+import CalendarItem from '../calendaritem/index.vue';
+import Utils from '../../utils/date';
 type InputDate = string | string[];
 export default create({
   children: [CalendarItem, Popup],

src/packages/__VUE/calendar/index.vue

@@ -40,11 +40,11 @@
 </template>
 <script lang="ts">
 import { PropType, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('calendar');
-import Popup from '@/packages/__VUE/popup/index.vue';
-import CalendarItem from '@/packages/__VUE/calendaritem/index.vue';
-import Utils from '@/packages/utils/date';
+import Popup from '../popup/index.vue';
+import CalendarItem from '../calendaritem/index.vue';
+import Utils from '../../utils/date';
 type InputDate = string | string[];
 export default create({
   children: [CalendarItem, Popup],

src/packages/__VUE/cell/index.vue

@@ -34,9 +34,9 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { useRoute, useRouter } from 'vue-router';
-import CellGroup from '@/packages/__VUE/cellgroup/index.vue';
+import CellGroup from '../cellgroup/index.vue';
 const { componentName, create } = createComponent('cell');
 export default create({
   props: {

src/packages/__VUE/checkbox/demo.vue

@@ -95,7 +95,7 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, onMounted } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { Toast } from '@/packages/nutui.vue';
 const { createDemo } = createComponent('checkbox');
 export default createDemo({

src/packages/__VUE/checkbox/index.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
 import { h, computed, inject, getCurrentInstance, onMounted } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create, componentName } = createComponent('checkbox');
-import nutIcon from '@/packages/__VUE/icon/index.vue';
-import CheckboxGroup from '@/packages/__VUE/checkboxgroup/index.vue';
+import nutIcon from '../icon/index.vue';
+import CheckboxGroup from '../checkboxgroup/index.vue';
 
 export default create({
   children: [CheckboxGroup],

src/packages/__VUE/checkboxgroup/demo.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('checkboxgroup');
 export default createDemo({
   props: {},

src/packages/__VUE/col/index.scss

@@ -17,10 +17,10 @@
 
 @for $i from 1 through 24 {
   .nut-col-offset-#{$i} {
-    margin-left: math.div(100, 24) * $i * 1%;
+    margin-left: 100/ 24 * $i * 1%;
   }
 
   .nut-col-#{$i} {
-    width: math.div(100, 24) * $i * 1%;
+    width: 100/ 24 * $i * 1%;
   }
 }

src/packages/__VUE/collapse/demo.vue

@@ -68,7 +68,7 @@
 </template>
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('collapse');
 export default createDemo({
   setup(props, context) {

src/packages/__VUE/collapse/index.taro.vue

@@ -5,8 +5,8 @@
 </template>
 <script lang="ts">
 import { provide } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import collapseitem from '@/packages/__VUE/collapseitem/index.taro.vue';
+import { createComponent } from '../../utils/create';
+import collapseitem from '../collapseitem/index.taro.vue';
 const { create } = createComponent('collapse');
 export default create({
   children: [collapseitem],

src/packages/__VUE/collapse/index.vue

@@ -5,8 +5,8 @@
 </template>
 <script lang="ts">
 import { provide } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import collapseitem from '@/packages/__VUE/collapseitem/index.vue';
+import { createComponent } from '../../utils/create';
+import collapseitem from '../collapseitem/index.vue';
 const { create } = createComponent('collapse');
 export default create({
   children: [collapseitem],

src/packages/__VUE/collapseitem/index.taro.vue

@@ -62,7 +62,7 @@ import Taro, {
   eventCenter,
   getCurrentInstance as getCurrentInstanceTaro
 } from '@tarojs/taro';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create, componentName } = createComponent('collapse-item');
 
 export default create({
@@ -136,9 +136,8 @@ export default create({
 
     // 清除 willChange 减少性能浪费
     const onTransitionEnd = () => {
-      const wrapperRefEle: any = document.getElementsByClassName(
-        'collapse-wrapper'
-      )[0];
+      const wrapperRefEle: any =
+        document.getElementsByClassName('collapse-wrapper')[0];
       wrapperRefEle.style.willChange = 'auto';
     };
 
@@ -231,7 +230,7 @@ export default create({
           defaultOpen();
         }
       } else if (Object.values(active) instanceof Array) {
-        const f = Object.values(active).filter(item => item == name);
+        const f = Object.values(active).filter((item) => item == name);
         if (f.length > 0) {
           defaultOpen();
         }

src/packages/__VUE/collapseitem/index.vue

@@ -58,7 +58,7 @@ import {
   getCurrentInstance,
   ComponentInternalInstance
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create, componentName } = createComponent('collapse-item');
 
 export default create({
@@ -132,9 +132,8 @@ export default create({
 
     // 清除 willChange 减少性能浪费
     const onTransitionEnd = () => {
-      const wrapperRefEle: any = document.getElementsByClassName(
-        'collapse-wrapper'
-      )[0];
+      const wrapperRefEle: any =
+        document.getElementsByClassName('collapse-wrapper')[0];
       wrapperRefEle.style.willChange = 'auto';
 
       // const query = wx.createSelectorQuery();
@@ -227,7 +226,7 @@ export default create({
           defaultOpen();
         }
       } else if (Object.values(active) instanceof Array) {
-        const f = Object.values(active).filter(item => item == name);
+        const f = Object.values(active).filter((item) => item == name);
         if (f.length > 0) {
           defaultOpen();
         }

src/packages/__VUE/countup/demo.vue

@@ -65,7 +65,7 @@
 
 <script lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { reactive, toRefs } from '@vue/reactivity';
 import { onMounted } from '@vue/runtime-core';
 const { createDemo } = createComponent('countup');

src/packages/__VUE/datepicker/demo.vue

@@ -14,7 +14,7 @@
     <nut-datepicker
       v-model="currentDate"
       @confirm="
-        val => {
+        (val) => {
           confirm(0, val);
         }
       "
@@ -27,7 +27,7 @@
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="
-        val => {
+        (val) => {
           confirm(1, val);
         }
       "
@@ -41,7 +41,7 @@
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="
-        val => {
+        (val) => {
           confirm(2, val);
         }
       "
@@ -54,7 +54,7 @@
       :min-date="minDate"
       :max-date="maxDate"
       @confirm="
-        val => {
+        (val) => {
           confirm(3, val);
         }
       "
@@ -68,7 +68,7 @@
       :minute-step="5"
       :max-date="maxDate"
       @confirm="
-        val => {
+        (val) => {
           confirm(4, val);
         }
       "
@@ -79,7 +79,7 @@
 
 <script lang="ts">
 import { toRefs, watch, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('datepicker');
 export default createDemo({
   props: {},

src/packages/__VUE/datepicker/index.vue

@@ -10,8 +10,8 @@
 </template>
 <script lang="ts">
 import { toRefs, watch, computed, reactive, onMounted } from 'vue';
-import picker from '@/packages/__VUE/picker/index.vue';
-import { createComponent } from '@/packages/utils/create';
+import picker from '../picker/index.vue';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('datepicker');
 const currentYear = new Date().getFullYear();
 function isDate(val: Date): val is Date {
@@ -124,23 +124,11 @@ export default create({
     };
 
     const ranges = computed(() => {
-      const {
-        maxYear,
-        maxDate,
-        maxMonth,
-        maxHour,
-        maxMinute,
-        maxSeconds
-      } = getBoundary('max', state.currentDate);
+      const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } =
+        getBoundary('max', state.currentDate);
 
-      const {
-        minYear,
-        minDate,
-        minMonth,
-        minHour,
-        minMinute,
-        minSeconds
-      } = getBoundary('min', state.currentDate);
+      const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } =
+        getBoundary('min', state.currentDate);
 
       let result = [
         {
@@ -276,7 +264,7 @@ export default create({
     };
 
     const columns = computed(() => {
-      const val = ranges.value.map(res => {
+      const val = ranges.value.map((res) => {
         return generateValue(
           res.range[0],
           res.range[1],
@@ -305,14 +293,14 @@ export default create({
 
     watch(
       () => props.title,
-      val => {
+      (val) => {
         state.title = val;
       }
     );
 
     watch(
       () => props.visible,
-      val => {
+      (val) => {
         state.show = val;
       }
     );

src/packages/__VUE/dialog/demo.vue

@@ -28,7 +28,7 @@
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('dialog');
 import { Dialog } from '@/packages/nutui.vue';
 

src/packages/__VUE/dialog/index.vue

@@ -50,10 +50,10 @@
 </template>
 <script lang="ts">
 import { onMounted, computed, watch, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('dialog');
-import Popup, { popupProps } from '@/packages/__VUE/popup/index.vue';
-import Button from '@/packages/__VUE/button/index.vue';
+import Popup, { popupProps } from '../popup/index.vue';
+import Button from '../button/index.vue';
 export default create({
   inheritAttrs: false,
   children: [Popup, Button],
@@ -142,7 +142,7 @@ export default create({
     const showPopup = ref(props.visible);
     onMounted(() => {
       if (props.closeOnPopstate) {
-        window.addEventListener('popstate', function() {
+        window.addEventListener('popstate', function () {
           closed();
         });
       }
@@ -150,7 +150,7 @@ export default create({
 
     watch(
       () => props.visible,
-      value => {
+      (value) => {
         showPopup.value = value;
       }
     );

src/packages/__VUE/drag/demo.vue

@@ -19,7 +19,7 @@
     >
       <nut-button type="primary">拖动我</nut-button>
     </nut-drag>
-    <h2 style=" top: 90px ;position: relative">限制拖动边界</h2>
+    <h2 style="top: 90px; position: relative">限制拖动边界</h2>
     <div class="drag-boundary"></div>
     <nut-drag
       :boundary="{ top: 361, left: 9, bottom: bottom(), right: right() }"
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { ref, reactive, toRefs, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('drag');
 export default createDemo({
   setup() {

src/packages/__VUE/drag/index.vue

@@ -19,8 +19,8 @@ import {
   ref,
   computed
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import requestAniFrame from '@/packages/utils/raf';
+import { createComponent } from '../../utils/create';
+import requestAniFrame from '../../utils/raf';
 const { componentName, create } = createComponent('drag');
 export default create({
   props: {

src/packages/__VUE/icon/demo.vue

@@ -40,7 +40,7 @@
 
 <script lang="ts">
 import icons from '@/packages/styles/font/iconfont.json';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('icon');
 export default createDemo({
   props: {},

src/packages/__VUE/icon/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { h, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('icon');
-import { pxCheck } from '@/packages/utils/pxCheck';
+import { pxCheck } from '../../utils/pxCheck';
 
 export default create({
   props: {

src/packages/__VUE/infiniteloading/demo.vue

@@ -66,7 +66,7 @@
 
 <script lang="ts">
 import { onMounted, ref, reactive, toRefs, getCurrentInstance } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('infiniteloading');
 export default createDemo({
   props: {},
@@ -83,7 +83,7 @@ export default createDemo({
       refreshList: ['']
     });
 
-    const loadMore = done => {
+    const loadMore = (done) => {
       setTimeout(() => {
         const curLen = data.defultList.length;
 
@@ -97,7 +97,7 @@ export default createDemo({
       }, 500);
     };
 
-    const customLoadMore = done => {
+    const customLoadMore = (done) => {
       setTimeout(() => {
         const curLen = data.customList.length;
         for (let i = curLen; i < curLen + 10; i++) {
@@ -108,7 +108,7 @@ export default createDemo({
       }, 500);
     };
 
-    const refreshLoadMore = done => {
+    const refreshLoadMore = (done) => {
       setTimeout(() => {
         const curLen = data.refreshList.length;
         for (let i = curLen; i < curLen + 10; i++) {
@@ -119,7 +119,7 @@ export default createDemo({
       }, 500);
     };
 
-    const refresh = done => {
+    const refresh = (done) => {
       setTimeout(() => {
         proxy.$toast.text('刷新成功');
         done();

src/packages/__VUE/infiniteloading/index.taro.vue

@@ -36,9 +36,9 @@
 </template>
 <script lang="ts">
 import { toRefs, onMounted, reactive, computed, CSSProperties } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('infiniteloading');
-import Icon from '@/packages/__VUE/icon/index.taro.vue';
+import Icon from '../icon/index.taro.vue';
 import Taro from '@tarojs/taro';
 export default create({
   props: {

src/packages/__VUE/infiniteloading/index.vue

@@ -39,7 +39,7 @@ import {
   computed,
   CSSProperties
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('infiniteloading');
 export default create({
   props: {
@@ -133,7 +133,7 @@ export default create({
       return (
         window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
-        function(callback) {
+        function (callback) {
           window.setTimeout(callback, 1000 / 60);
         }
       );
@@ -170,11 +170,8 @@ export default create({
         }
         resScrollTop = windowScrollTop;
       } else {
-        const {
-          scrollHeight,
-          clientHeight,
-          scrollTop
-        } = state.scrollEl as HTMLElement;
+        const { scrollHeight, clientHeight, scrollTop } =
+          state.scrollEl as HTMLElement;
 
         offsetDistance = scrollHeight - clientHeight - scrollTop;
         resScrollTop = scrollTop;
@@ -226,8 +223,9 @@ export default create({
         state.y = event.touches[0].pageY;
         state.isTouching = true;
 
-        const childHeight = ((state.refreshTop as HTMLElement)
-          .firstElementChild as HTMLElement).offsetHeight;
+        const childHeight = (
+          (state.refreshTop as HTMLElement).firstElementChild as HTMLElement
+        ).offsetHeight;
         state.refreshMaxH = Math.floor(childHeight * 1 + 10);
       }
     };

src/packages/__VUE/input/demo.vue

@@ -61,7 +61,7 @@
 
 <script lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('input');
 export default createDemo({
   setup() {
@@ -76,7 +76,7 @@ export default createDemo({
       val7: '',
       val8: '文案'
     });
-    setTimeout(function() {
+    setTimeout(function () {
       state.val1 = '异步数据';
     }, 2000);
     const change = (value: string | number, event: Event) => {

src/packages/__VUE/input/doc.md

@@ -61,9 +61,7 @@ app.use(Input);
 ### 代码
 ```html
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('input');
-export default createDemo({
+export default {
   setup() {
     const state = reactive({
       val0: '',
@@ -100,7 +98,7 @@ export default createDemo({
       focus
     };
   }
-});
+}
 ```
 ### Prop
 

src/packages/__VUE/input/index.taro.vue

@@ -33,7 +33,7 @@
 </template>
 <script lang="ts">
 import { ref, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 function trimExtraChar(value: string, char: string, regExp: RegExp) {
   const index = value.indexOf(char);
 

src/packages/__VUE/input/index.vue

@@ -29,7 +29,7 @@
 </template>
 <script lang="ts">
 import { ref, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { formatNumber } from './util';
 
 const { componentName, create } = createComponent('input');

src/packages/__VUE/inputnumber/demo.vue

@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import { reactive, getCurrentInstance } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('inputnumber');
 export default createDemo({
   props: {},

src/packages/__VUE/inputnumber/index.taro.vue

@@ -36,8 +36,8 @@
 </template>
 <script lang="ts">
 import { computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { pxCheck } from '@/packages/utils/pxCheck';
+import { createComponent } from '../../utils/create';
+import { pxCheck } from '../../utils/pxCheck';
 const { componentName, create } = createComponent('inputnumber');
 export default create({
   props: {

src/packages/__VUE/inputnumber/index.vue

@@ -32,8 +32,8 @@
 </template>
 <script lang="ts">
 import { computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { pxCheck } from '@/packages/utils/pxCheck';
+import { createComponent } from '../../utils/create';
+import { pxCheck } from '../../utils/pxCheck';
 const { componentName, create } = createComponent('inputnumber');
 export default create({
   props: {

src/packages/__VUE/layout/demo.vue

@@ -117,10 +117,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('layout');
-import Row from '@/packages/__VUE/row/index.vue';
-import Col from '@/packages/__VUE/col/index.vue';
+import Row from '../row/index.vue';
+import Col from '../col/index.vue';
 export default createDemo({
   components: {
     [Row.name]: Row,

src/packages/__VUE/layout/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('layout');
-import Row from '@/packages/__VUE/row/index.vue';
-import Col from '@/packages/__VUE/col/index.vue';
+import Row from '../row/index.vue';
+import Col from '../col/index.vue';
 export default create({
   children: [Row, Col]
 });

src/packages/__VUE/menu/demo.vue

@@ -87,7 +87,7 @@
 
 <script lang="ts">
 import { ref, reactive, toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('menu');
 export default createDemo({
   props: {},

src/packages/__VUE/menu/index.vue

@@ -5,9 +5,9 @@
 </template>
 <script lang="ts">
 import { toRefs, reactive, provide, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('menu');
-import menuitem from '@/packages/__VUE/menuitem/index.vue';
+import menuitem from '../menuitem/index.vue';
 export default create({
   children: [menuitem],
   props: {

src/packages/__VUE/menuitem/index.vue

@@ -46,7 +46,7 @@ import {
   onUnmounted,
   inject
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create, componentName } = createComponent('menu-item');
 export default create({
   props: {

src/packages/__VUE/navbar/demo.vue

@@ -71,7 +71,7 @@
 
 <script lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('navbar');
 export default createDemo({
   setup(props, { emit }) {

src/packages/__VUE/navbar/index.vue

@@ -60,7 +60,7 @@
 
 <script lang="ts">
 import { computed, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('navbar');
 export default create({
   props: {

src/packages/__VUE/notify/demo.vue

@@ -60,7 +60,7 @@
 
 <script lang="ts">
 import { createApp } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { Notify } from './notify';
 const { createDemo } = createComponent('notify');
 export default createDemo({

src/packages/__VUE/notify/index.vue

@@ -21,8 +21,8 @@
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import Popup from '@/packages/__VUE/popup/index.vue';
+import { createComponent } from '../../utils/create';
+import Popup from '../popup/index.vue';
 const { componentName, create } = createComponent('notify');
 
 export default create({
@@ -87,7 +87,7 @@ export default create({
 
     watch(
       () => props.duration,
-      val => {
+      (val) => {
         if (val) {
           show();
         }

src/packages/__VUE/overlay/demo.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('overlay');
 export default createDemo({
   props: {},

src/packages/__VUE/overlay/index.vue

@@ -13,7 +13,7 @@
 </template>
 <script lang="ts">
 import { CSSProperties, PropType, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('overlay');
 const overlayProps = {
   visible: {

src/packages/__VUE/picker/Column.vue

@@ -20,8 +20,8 @@
 </template>
 <script lang="ts">
 import { reactive, ref, watch, computed, toRefs, onMounted } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { useTouch } from '@/packages/utils/useTouch';
+import { createComponent } from '../../utils/create';
+import { useTouch } from '../../utils/useTouch';
 import { commonProps } from './commonProps';
 import {
   PickerObjOpt,
@@ -230,7 +230,7 @@ export default create({
 
     watch(
       () => props.listData,
-      val => {
+      (val) => {
         if (val) {
           state.options = val as PickerObjectColumn[];
         }
@@ -239,7 +239,7 @@ export default create({
 
     watch(
       () => props.defaultIndex,
-      val => {
+      (val) => {
         setIndex(+val);
       }
     );

src/packages/__VUE/picker/demo.vue

@@ -33,7 +33,7 @@
 </template>
 <script lang="ts">
 import { toRefs, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('picker');
 export default createDemo({
   props: {},

src/packages/__VUE/picker/index.vue

@@ -36,7 +36,7 @@
             :item-height="itemHeight"
             :data-type="dataType"
             @change="
-              dataIndex => {
+              (dataIndex) => {
                 changeHandler(columnIndex, dataIndex);
               }
             "
@@ -48,9 +48,9 @@
 </template>
 <script lang="ts">
 import { reactive, watch, computed, toRaw, toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import column from './Column.vue';
-import popup, { popupProps } from '@/packages/__VUE/popup/index.vue';
+import popup, { popupProps } from '../popup/index.vue';
 import { commonProps } from './commonProps';
 import {
   PickerObjOpt,
@@ -140,7 +140,7 @@ export default create({
 
     const addDefaultIndexList = (listData: PickerObjectColumn[]) => {
       defaultIndexList = [];
-      listData.forEach(res => {
+      listData.forEach((res) => {
         defaultIndexList.push((res.defaultIndex as number) || 0);
       });
     };
@@ -237,14 +237,14 @@ export default create({
 
     watch(
       () => props.visible,
-      val => {
+      (val) => {
         state.show = val;
       }
     );
 
     watch(
       () => props.listData,
-      val => {
+      (val) => {
         state.formattedColumns = val as PickerObjectColumns;
       }
     );

src/packages/__VUE/popup/demo.vue

@@ -117,7 +117,7 @@
 
 <script lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('popup');
 export default createDemo({
   props: {},

src/packages/__VUE/popup/index.taro.vue

@@ -51,10 +51,10 @@ import {
   toRefs,
   getCurrentInstance
 } from 'vue';
-import { useLockScroll } from '@/packages/__VUE/popup/use-lock-scroll';
-import { overlayProps } from '@/packages/__VUE/overlay/index.taro.vue';
-import overlay from '@/packages/__VUE/overlay/index.taro.vue';
-import { createComponent } from '@/packages/utils/create';
+import { useLockScroll } from '../popup/use-lock-scroll';
+import { overlayProps } from '../overlay/index.taro.vue';
+import overlay from '../overlay/index.taro.vue';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('popup');
 let _zIndex = 2000;
 export const popupProps = {
@@ -217,7 +217,7 @@ export default create({
     });
     watch(
       () => props.visible,
-      value => {
+      (value) => {
         if (value) {
           open();
         } else {
@@ -227,7 +227,7 @@ export default create({
     );
     watch(
       () => props.position,
-      value => {
+      (value) => {
         value === 'center'
           ? (state.transitionName = 'popup-fade')
           : (state.transitionName = `popup-slide-${value}`);

src/packages/__VUE/popup/index.vue

@@ -52,8 +52,8 @@ import {
 } from 'vue';
 import { useLockScroll } from './use-lock-scroll';
 import { overlayProps } from './../overlay/index.vue';
-import overlay from '@/packages/__VUE/overlay/index.vue';
-import { createComponent } from '@/packages/utils/create';
+import overlay from '../overlay/index.vue';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('popup');
 
 let _zIndex = 2000;
@@ -245,7 +245,7 @@ export default create({
 
     watch(
       () => props.visible,
-      value => {
+      (value) => {
         if (value) {
           open();
         } else {
@@ -256,7 +256,7 @@ export default create({
 
     watch(
       () => props.position,
-      value => {
+      (value) => {
         value === 'center'
           ? (state.transitionName = 'popup-fade')
           : (state.transitionName = `popup-slide-${value}`);

src/packages/__VUE/price/demo.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { ref } from 'vue';
 const { createDemo } = createComponent('price');
 export default createDemo({

src/packages/__VUE/price/index.taro.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('price');
 
 export default create({

src/packages/__VUE/price/index.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('price');
 
 export default create({

src/packages/__VUE/pullrefresh/demo.vue

@@ -50,19 +50,19 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('pullrefresh');
 export default createDemo({
   props: {},
   setup() {
-    const refresh = done => {
+    const refresh = (done) => {
       console.log('上拉加载');
       setTimeout(() => {
         done();
       }, 1000);
     };
 
-    const downRefresh = done => {
+    const downRefresh = (done) => {
       console.log('下拉刷新');
       setTimeout(() => {
         done();

src/packages/__VUE/pullrefresh/index.vue

@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import { ref, toRefs, reactive, onMounted, computed, CSSProperties } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { useTouch } from './use-touch';
 import { preventDefault } from './util';
 const { componentName, create } = createComponent('pullrefresh');
@@ -252,7 +252,7 @@ export default create({
     };
 
     /** 获取监听自定义滚动节点 */
-    const getParentElement = el => {
+    const getParentElement = (el) => {
       if (containerId.value != '') {
         return document.querySelector(`#${containerId.value}`);
       }
@@ -289,7 +289,7 @@ export default create({
       setStatus(0);
     };
 
-    const touchStart = event => {
+    const touchStart = (event) => {
       if (isTouchable()) {
         if (direction.value == 'vertical') {
           /** 判断滚动条是否在顶部 */
@@ -325,7 +325,7 @@ export default create({
       }
     };
 
-    const touchMove = event => {
+    const touchMove = (event) => {
       if (isTouchable()) {
         const { deltaY, deltaX } = touch;
         touch.move(event);

src/packages/__VUE/radio/demo.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { reactive, toRefs } from 'vue';
 import { Toast } from '@/packages/nutui.vue';
 const { createDemo } = createComponent('radio');

src/packages/__VUE/radio/index.taro.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, h, inject } from 'vue';
-import nutIcon from '@/packages/__VUE/icon/index.taro.vue';
-import radiogroup from '@/packages/__VUE/radiogroup/index.vue';
+import nutIcon from '../icon/index.taro.vue';
+import radiogroup from '../radiogroup/index.vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('radio');
 

src/packages/__VUE/radio/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { computed, h, inject } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import nutIcon from '@/packages/__VUE/icon/index.vue';
-import radiogroup from '@/packages/__VUE/radiogroup/index.vue';
+import { createComponent } from '../../utils/create';
+import nutIcon from '../icon/index.vue';
+import radiogroup from '../radiogroup/index.vue';
 const { componentName, create } = createComponent('radio');
 
 export default create({

src/packages/__VUE/radiogroup/demo.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('radiogroup');
 export default createDemo({
   props: {},

src/packages/__VUE/range/demo.vue

@@ -56,7 +56,7 @@
 
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { Toast } from '../toast';
 
 const { createDemo } = createComponent('range');

src/packages/__VUE/range/index.vue

@@ -23,7 +23,7 @@
             :aria-valuemax="+max"
             aria-orientation="horizontal"
             @touchstart.stop.prevent="
-              e => {
+              (e) => {
                 if (typeof index === 'number') {
                   // 实时更新当前拖动的按钮索引
                   buttonIndex = index;
@@ -34,7 +34,7 @@
             @touchmove.stop.prevent="onTouchMove"
             @touchend.stop.prevent="onTouchEnd"
             @touchcancel.stop.prevent="onTouchEnd"
-            @click="e => e.stopPropagation()"
+            @click="(e) => e.stopPropagation()"
           >
             <slot v-if="$slots.button" name="button"></slot>
             <view class="nut-range-button" v-else :style="buttonStyle">
@@ -54,14 +54,14 @@
             :aria-valuemax="+max"
             aria-orientation="horizontal"
             @touchstart.stop.prevent="
-              e => {
+              (e) => {
                 onTouchStart(e);
               }
             "
             @touchmove.stop.prevent="onTouchMove"
             @touchend.stop.prevent="onTouchEnd"
             @touchcancel.stop.prevent="onTouchEnd"
-            @click="e => e.stopPropagation()"
+            @click="(e) => e.stopPropagation()"
           >
             <slot v-if="$slots.button" name="button"></slot>
             <view class="nut-range-button" v-else :style="buttonStyle">
@@ -78,9 +78,9 @@
 </template>
 <script lang="ts">
 import { ref, toRefs, computed, PropType, CSSProperties } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { useTouch } from '@/packages/utils/useTouch';
-import { useRect } from '@/packages/utils/useRect';
+import { createComponent } from '../../utils/create';
+import { useTouch } from '../../utils/useTouch';
+import { useRect } from '../../utils/useRect';
 const { componentName, create } = createComponent('range');
 
 type SliderValue = number | number[];

src/packages/__VUE/rate/demo.vue

@@ -34,7 +34,7 @@
 
 <script>
 import { reactive, getCurrentInstance } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('rate');
 export default createDemo({
   setup() {
@@ -51,7 +51,7 @@ export default createDemo({
       val7: 3,
       val8: 3
     });
-    const onChange = val => {
+    const onChange = (val) => {
       proxy.$toast.text(val);
     };
     return {

src/packages/__VUE/rate/index.taro.vue

@@ -27,8 +27,8 @@
 </template>
 <script lang="ts">
 import { computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { pxCheck } from '@/packages/utils/pxCheck';
+import { createComponent } from '../../utils/create';
+import { pxCheck } from '../../utils/pxCheck';
 const { componentName, create } = createComponent('rate');
 import Taro from '@tarojs/taro';
 export default create({

src/packages/__VUE/rate/index.vue

@@ -26,8 +26,8 @@
 </template>
 <script lang="ts">
 import { computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { pxCheck } from '@/packages/utils/pxCheck';
+import { createComponent } from '../../utils/create';
+import { pxCheck } from '../../utils/pxCheck';
 const { componentName, create } = createComponent('rate');
 export default create({
   props: {

src/packages/__VUE/shortpassword/demo.vue

@@ -69,7 +69,7 @@
 
 <script lang="ts">
 import { reactive, getCurrentInstance } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('shortpassword');
 export default createDemo({
   setup() {

src/packages/__VUE/shortpassword/index.taro.vue

@@ -52,7 +52,7 @@
 </template>
 <script lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('shortpassword');
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 export default create({

src/packages/__VUE/shortpassword/index.vue

@@ -52,7 +52,7 @@
 </template>
 <script lang="ts">
 import { ref, computed, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('shortpassword');
 export default create({
   props: {
@@ -117,7 +117,7 @@ export default create({
     }
     watch(
       () => props.visible,
-      value => {
+      (value) => {
         show.value = value;
       }
     );

src/packages/__VUE/steps/demo.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('steps');
 export default createDemo({
   props: {},

src/packages/__VUE/steps/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { provide, computed, reactive, h, ComponentInternalInstance } from 'vue';
-import Step from '@/packages/__VUE/step/index.vue';
-import { createComponent } from '@/packages/utils/create';
+import Step from '../step/index.vue';
+import { createComponent } from '../../utils/create';
 const { create, componentName } = createComponent('steps');
 
 export default create({

src/packages/__VUE/swiper/demo.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('swiper');
 export default createDemo({
   props: {},

src/packages/__VUE/swiper/index.taro.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create, componentName } = createComponent('swiper');
-import swiperItem from '@/packages/__VUE/swiperitem/index.taro.vue';
+import swiperItem from '../swiperitem/index.taro.vue';
 export default create({
   inheritAttrs: false,
   children: [swiperItem],

src/packages/__VUE/swiper/index.vue

@@ -50,11 +50,11 @@ import {
   ref,
   watch
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import { useTouch } from './use-touch';
-import { useExpose } from '@/packages/utils/useExpose/index';
+import { useExpose } from '../../utils/useExpose/index';
 const { create, componentName } = createComponent('swiper');
-import swiperItem from '@/packages/__VUE/swiperitem/index.vue';
+import swiperItem from '../swiperitem/index.vue';
 export default create({
   children: [swiperItem],
   props: {
@@ -168,8 +168,9 @@ export default create({
         transform: `translate${isVertical.value ? 'Y' : 'X'}(${
           state.offset
         }px)`,
-        [isVertical.value ? 'height' : 'width']: `${size.value *
-          childCount.value}px`,
+        [isVertical.value ? 'height' : 'width']: `${
+          size.value * childCount.value
+        }px`,
         [isVertical.value ? 'width' : 'height']: `${
           isVertical.value ? state.width : state.height
         }px`
@@ -427,7 +428,7 @@ export default create({
 
     watch(
       () => props.initPage,
-      val => {
+      (val) => {
         nextTick(() => {
           init(Number(val));
         });
@@ -445,7 +446,7 @@ export default create({
 
     watch(
       () => props.autoPlay,
-      val => {
+      (val) => {
         val > 0 ? autoplay() : stopAutoPlay();
       }
     );

src/packages/__VUE/swiperitem/demo.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import { reactive } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('swiper');
 export default createDemo({
   props: {},

src/packages/__VUE/swiperitem/index.taro.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed, reactive, inject, getCurrentInstance, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create, componentName } = createComponent('swiper-item');
 export default create({
   props: {},

src/packages/__VUE/swiperitem/index.vue

@@ -6,8 +6,8 @@
 
 <script lang="ts">
 import { computed, reactive, inject, getCurrentInstance, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { useExpose } from '@/packages/__VUE/swiper/use-expose';
+import { createComponent } from '../../utils/create';
+import { useExpose } from '../swiper/use-expose';
 const { create, componentName } = createComponent('swiper-item');
 interface IStyle {
   width?: string;

src/packages/__VUE/switch/index.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { computed, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('switch');
 
 export default create({

src/packages/__VUE/tab/demo.vue

@@ -154,7 +154,7 @@
 
 <script lang="ts">
 import { ref, reactive, toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('tab');
 export default createDemo({
   props: {},

src/packages/__VUE/tab/doc.md

@@ -26,7 +26,7 @@ switchTab监听切换tab返回事件
   <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>
 </nut-tab>
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('tab');
 export default createDemo({
   setup() {
@@ -115,7 +115,7 @@ export default createDemo({
 </div>
 <script lang="ts">
 import { ref , reactive,toRefs } from "vue";
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('tab');
 export default createDemo({
   setup() {

src/packages/__VUE/tab/index.vue

@@ -21,7 +21,7 @@
 </template>
 <script lang="ts">
 import { PropType, reactive, ref, onMounted, watch, VNode } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('tab');
 import TabTitle from './tabTitle';
 import Swiper from 'swiper';
@@ -114,10 +114,10 @@ export default create({
         direction: props.direction,
         initialSlide: currIndex,
         on: {
-          touchStart: function() {
+          touchStart: function () {
             isLock.value = true;
           },
-          transitionEnd: function(): void {
+          transitionEnd: function (): void {
             ctx.emit('switchTab', (mySwiper as Swiper).realIndex, mySwiper);
             if (isLock.value) {
               activeIndex.value = (mySwiper as Swiper).realIndex;

src/packages/__VUE/tabbar/demo.vue

@@ -66,7 +66,7 @@
 
 <script lang="ts">
 import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('tabbar');
 export default createDemo({
   props: {},

src/packages/__VUE/tabbar/index.vue

@@ -6,9 +6,9 @@
 
 <script lang="ts">
 import { provide, reactive, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('tabbar');
-import tabbaritem from '@/packages/__VUE/tabbaritem/index.vue';
+import tabbaritem from '../tabbaritem/index.vue';
 export default create({
   children: [tabbaritem],
   props: {
@@ -59,7 +59,7 @@ export default create({
     provide('parent', parentData);
     watch(
       () => props.visible,
-      value => {
+      (value) => {
         parentData.modelValue = value;
       }
     );

src/packages/__VUE/tabbaritem/index.vue

@@ -38,7 +38,7 @@
   </div>
 </template>
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 import {
   ComponentInternalInstance,
   computed,

src/packages/__VUE/tabpanel/index.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { create } = createComponent('tab-panel');
 
 export default create({

src/packages/__VUE/temp/demo.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('temp');
 export default createDemo({
   props: {},

src/packages/__VUE/temp/index.vue

@@ -6,7 +6,7 @@
 </template>
 <script lang="ts">
 import { toRefs } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('temp');
 
 export default create({