vue3 (六) 规范二：组件按需引入

采用qiankun微应用后，许多应用用的组件非常有限，比如ant-designer，可能只用到其中40%的组件，不建议采用全局引入。

import Antd from "ant-design-vue";
instance.use(Antd);

这种虽然开发不用单独引入，但让后期的性能优化和包的调优都比较被动，所以尽量还是采用按需加入的方式。

可以采用分2步导入方式，第一步导入一些全局需要使用的，页面再导入自身需要的组件。

全局导入，配置在main.ts

import { registerGlobComp } from '@/components/registerGlobComp';

registerGlobComp(instance);

registerGlobComp的实现：具体导入哪些，需要根据项目需求来定义。

import type { App } from 'vue';
import { Button } from './Button';
import { Input, Layout } from 'ant-design-vue';

export function registerGlobComp(app: App) {
  app.use(Input).use(Button).use(Layout);
}

界面开发的时候，单独引入需要使用的组件

<template>
  <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
    <template #default="data">
      <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
      <slot v-bind="data || {}"></slot>
      <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
    </template>
  </Button>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'AButton',
    inheritAttrs: false,
  });
</script>
<script lang="ts" setup>
  import { computed, unref } from 'vue';
  **import { Button } from 'ant-design-vue';**
  import Icon from '/@/components/Icon/src/Icon.vue';
  import { buttonProps } from './props';
  import { useAttrs } from '/@/hooks/core/useAttrs';

  const props = defineProps(buttonProps);
  // get component class
  const attrs = useAttrs({ excludeDefaultKeys: false });
  const getButtonClass = computed(() => {
    const { color, disabled } = props;
    return [
      {
        [`ant-btn-${color}`]: !!color,
        [`is-disabled`]: disabled,
      },
    ];
  });

  // get inherit binding value
  const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
</script>

vue3 (六) 规范二：组件按需引入

猜你喜欢