chore: 组件按需引入批量修改

demo.html

@@ -29,7 +29,7 @@
       >
     </noscript>
     <div id="app"></div>
-    <script type="module" src="./src//sites/mobile/main.ts"></script>
+    <script type="module" src="./src/sites/mobile/main.ts"></script>
     <script>
       //分享配置
       var shareOption = {

index.html

@@ -45,7 +45,7 @@
       >
     </noscript>
     <div id="doc"></div>
-    <script type="module" src="./src//sites/doc/main.ts"></script>
+    <script type="module" src="./src/sites/doc/main.ts"></script>
     <script>
       //分享配置
       var shareOption = {

src/packages/address/index.vue

@@ -122,9 +122,7 @@ const { componentName, create } = createComponent('address');
 import { TweenMax } from 'gsap';
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     show: {
       type: Boolean,

src/packages/avatar/index.vue

@@ -12,9 +12,7 @@ import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('avatar');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     size: {
       type: String,

src/packages/backtop/index.vue

@@ -20,9 +20,7 @@ import { createComponent } from '@/utils/create';
 const { create } = createComponent('backtop');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     //距离页面底部
     bottom: {
@@ -50,11 +48,7 @@ export default create({
       default: 1111
     }
   },
-
   emits: ['click'],
-
-  components: {},
-
   setup(props, { emit }) {
     const styleBottom = computed(() => `${props.bottom}px`);
     const styleRight = computed(() => `${props.right}px`);

src/packages/button/index.vue

@@ -24,9 +24,7 @@ export type ButtonSize = 'large' | 'normal' | 'small';
 export type ButtonShape = 'square' | 'round';
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     color: String,
     shape: {

src/packages/calendar/index.vue

@@ -47,10 +47,7 @@ import CalendarItem from '@/packages/calendaritem/index.vue';
 import Utils from '@/utils/date';
 type InputDate = string | string[];
 export default create({
-  components: {
-    [CalendarItem.name]: CalendarItem,
-    [Popup.name]: Popup
-  },
+  children: [CalendarItem, Popup],
   props: {
     type: {
       type: String,
@@ -83,9 +80,7 @@ export default create({
       default: Utils.getDay(365)
     }
   },
-  components: {},
   emits: ['choose', 'close'],
-
   setup(props, { emit }) {
     // element refs
     const calendarRef = ref<null | HTMLElement>(null);

src/packages/calendaritem/index.vue

@@ -140,7 +140,6 @@ export default create({
       default: Utils.getDay(365)
     }
   },
-  components: {},
   emits: ['choose', 'update', 'close'],
 
   setup(props, { emit }) {

src/packages/cell/index.vue

@@ -38,9 +38,7 @@ import { useRouter } from 'vue-router';
 const { componentName, create } = createComponent('cell');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     title: { type: String, default: '' },
     subTitle: { type: String, default: '' },

src/packages/checkbox/index.vue

@@ -72,7 +72,6 @@ export default create({
       default: true
     }
   },
-  components: {},
   setup(props, { emit }) {
     const parentGroup = inject('checkboxgroup', {
       parentNode: false,

src/packages/collapse/index.vue

@@ -9,9 +9,7 @@ import { createComponent } from '@/utils/create';
 const { create } = createComponent('collapse');
 import collapseitem from '@/packages/collapseitem/index.vue';
 export default create({
-  components: {
-    [collapseitem.name]: collapseitem
-  },
+  children: [collapseitem],
   props: {
     active: {
       type: [String, Number, Array]

src/packages/dialog/index.vue

@@ -219,7 +219,6 @@ export default create({
       default: false
     }
   },
-  components: {},
   // emits: ['click'],
 
   setup(props, { emit, slots }) {

src/packages/infiniteloading/index.vue

@@ -55,9 +55,7 @@ import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('infiniteloading');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     hasMore: {
       type: Boolean,
@@ -88,7 +86,6 @@ export default create({
       default: false
     }
   },
-  components: {},
   emits: ['scrollChange', 'loadMore', 'refresh'],
 
   setup(props, { emit, slots }) {

src/packages/input/index.vue

@@ -56,6 +56,7 @@ const { create } = createComponent('input');
 import { formatNumber } from './util';
 import Icon from '@/packages/icon/index.vue';
 export default create({
+  children: [Icon],
   props: {
     type: {
       type: String,
@@ -98,9 +99,6 @@ export default create({
       default: false
     }
   },
-  components: {
-    [Icon.name]: Icon
-  },
   emits: ['change', 'update:value', 'blur', 'focus', 'clear'],
 
   setup(props, { emit }) {

src/packages/inputnumber/index.vue

@@ -40,9 +40,7 @@ interface Events {
   params: (string | number | Event)[];
 }
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     size: {
       type: [String],

src/packages/layout/demo.vue

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

src/packages/menu/index.vue

@@ -9,6 +9,7 @@ import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('menu');
 import menuitem from '@/packages/menuitem/index.vue';
 export default create({
+  children: [menuitem],
   props: {
     type: {
       //单选 simple  多选  multiple，暂留
@@ -20,10 +21,6 @@ export default create({
       default: true
     }
   },
-  components: {
-    [menuitem.name]: menuitem
-  },
-
   setup(props, { emit }) {
     const state = reactive({
       showMask: false

src/packages/menuitem/index.vue

@@ -59,9 +59,7 @@ import { createComponent } from '@/utils/create';
 const { create } = createComponent('menu-item');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     title: {
       type: String,

src/packages/navbar/index.vue

@@ -65,9 +65,7 @@ import { useRouter } from 'vue-router';
 const { componentName, create } = createComponent('navbar');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     leftShow: { type: Boolean, default: true }, //左侧  是否显示返回
     title: { type: String, default: '' }, //中间  文字标题

src/packages/picker/Column.vue

@@ -63,7 +63,7 @@ export default create({
     dataType: String,
     ...commonProps
   },
-  components: {},
+
   emits: ['click', 'change'],
   setup(props, { emit }) {
     let moving;

src/packages/picker/index.vue

@@ -45,10 +45,12 @@
 import { reactive, ref, watch, computed, toRaw } from 'vue';
 import { createComponent } from '@/utils/create';
 import column from './Column.vue';
+import popup from '@/packages/popup/index.vue';
 import { commonProps } from './commonProps';
 const { create } = createComponent('picker');
 
 export default create({
+  children: [column, popup],
   props: {
     isVisible: {
       type: Boolean,
@@ -60,7 +62,6 @@ export default create({
     },
     ...commonProps
   },
-  components: { column },
   emits: ['close', 'confirm', 'update:isVisible'],
 
   setup(props, { emit }) {

src/packages/popup/index.vue

@@ -105,9 +105,7 @@ const popupProps = {
 };
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     ...overlayProps,
     ...popupProps

src/packages/price/index.vue

@@ -26,7 +26,7 @@ export default create({
       default: false
     }
   },
-  components: {},
+
   setup(props) {
     const priceShow = computed(() => {
       const symbol = props.needSymbol

src/packages/pullrefresh/index.vue

@@ -86,7 +86,7 @@ export default create({
       }
     }
   },
-  components: {},
+
   emits: ['refresh', 'downRefresh'], // refresh 上拉加载、右滑加载更多  downRefresh 下拉刷新、左滑刷新
 
   setup(props, { emit }) {

src/packages/radio/index.vue

@@ -50,7 +50,7 @@ export default create({
       default: true
     }
   },
-  components: {},
+
   emits: ['input', 'update:modelValue', 'change'],
   setup(props, { emit }) {
     const parentGroup = inject('radiogroup', {

src/packages/range/index.vue

@@ -120,7 +120,7 @@ export default create({
       default: 0
     }
   },
-  components: {},
+
   emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'],
 
   setup(props, { emit, slots }) {

src/packages/rate/index.vue

@@ -25,9 +25,7 @@ import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('rate');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     total: {
       type: [String, Number],

src/packages/shortpassword/index.vue

@@ -48,9 +48,7 @@ import { createComponent } from '@/utils/create';
 const { create } = createComponent('shortpassword');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     title: {
       type: String,

src/packages/swiper/index.vue

@@ -45,7 +45,9 @@ import { createComponent } from '@/utils/create';
 import { useTouch } from './use-touch';
 import { useExpose } from './use-expose';
 const { create } = createComponent('swiper');
+import swiperItem from '@/packages/swiperitem/index.vue';
 export default create({
+  children: [swiperItem],
   props: {
     width: {
       type: [Number, String],

src/packages/tabbar/index.vue

@@ -10,9 +10,7 @@ import { createComponent } from '@/utils/create';
 const { create } = createComponent('tabbar');
 import tabbaritem from '@/packages/tabbaritem/index.vue';
 export default create({
-  components: {
-    [tabbaritem.name]: tabbaritem
-  },
+  children: [tabbaritem],
   props: {
     show: {
       type: [Number, String],

src/packages/tabbaritem/index.vue

@@ -34,9 +34,7 @@ import {
 const { create } = createComponent('tabbar-item');
 import Icon from '@/packages/icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     tabTitle: {
       // 标签页的标题
@@ -59,8 +57,6 @@ export default create({
       default: ''
     }
   },
-
-  components: {},
   setup(props, ctx) {
     const parent: any = inject('parent');
     const state = reactive({

src/packages/tabpanel/index.vue

@@ -14,7 +14,7 @@ export default create({
       default: ''
     }
   },
-  components: {},
+
   setup(props, ctx) {
     //
   }

src/packages/temp/index.vue

@@ -20,7 +20,6 @@ export default create({
       default: ''
     }
   },
-  components: {},
   emits: ['click'],
 
   setup(props, { emit }) {

src/packages/toast/index.vue

@@ -30,9 +30,7 @@ import { toRefs, toRef, reactive, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('toast');
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  children: [Icon],
   props: {
     id: String,
     msg: String,

src/packages/uploader/index.vue

@@ -51,6 +51,7 @@ export class FileItem {
   formData: FormData = new FormData();
 }
 export default create({
+  children: [Icon],
   props: {
     name: { type: String, default: 'file' },
     url: { type: String, default: '' },
@@ -86,9 +87,6 @@ export default create({
     onChange: { type: Function },
     customRequest: { type: Function }
   },
-  components: {
-    [Icon.name]: Icon
-  },
   emits: [
     'start',
     'progress',

src/sites/mobile/App.vue

@@ -8,7 +8,6 @@ import { useRoute } from 'vue-router';
 import { isMobile } from '@/sites/assets/util';
 export default defineComponent({
   name: 'app',
-  components: {},
   setup() {
     const title = ref('NutUI');
     // 获取当前路由

src/sites/mobile/components/Index.vue

@@ -32,7 +32,6 @@ import { defineComponent, reactive } from 'vue';
 import { nav, versions } from '@/config.json';
 export default defineComponent({
   name: 'doc',
-  components: {},
   setup() {
     return reactive({
       nav,

src/utils/create/component.ts

@@ -8,6 +8,10 @@ export function createComponent(name: string) {
       _component.name = componentName;
       _component.install = (vue: App) => {
         vue.component(_component.name as string, _component);
+        _component?.children?.length &&
+          _component.children.forEach((item: any) => {
+            vue.component(item.name as string, item);
+          });
       };
       return defineComponent(_component);
     } as typeof defineComponent,

vite.config.build.single.ts

@@ -0,0 +1,54 @@
+// 处理按需加载
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import Markdown from 'vite-plugin-md';
+import path from 'path';
+import config from './package.json';
+// https://vitejs.dev/config/
+
+const banner = `/*!
+* ${config.name} v${config.version} ${new Date()}
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/`;
+
+export default defineConfig({
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // example : additionalData: `@import "./src/design/styles/variables";`
+        // dont need include file extend .scss
+        additionalData: `@import "@/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";`
+      }
+    }
+  },
+  plugins: [
+    vue({
+      include: [/\.vue$/, /\.md$/]
+    }),
+    Markdown()
+  ],
+  build: {
+    rollupOptions: {
+      // 请确保外部化那些你的库中不需要的依赖
+      external: ['vue'],
+      output: {
+        banner,
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    },
+    lib: {
+      entry: 'src/nutui.ts',
+      name: 'nutui',
+      formats: ['es', 'umd']
+    },
+    emptyOutDir: false
+  }
+});