VUE3+TS 封装全局公共组件

1.在components中新建一个TS文件

import AllImg from "@/components/loadingVue/AllImg.vue"

import { App } from "vue";
import plugin from "dayjs/plugin/duration";

const XXX: plugin = {
    install(app:App) {
        app.component(`XXXImg`, AllImg);
    }
}

export default XXX;

2.在main中引入这个TS

import XXX from "@/components/index"

getServerConfig(app).then(async config => {
  app.use(router);
  await router.isReady();
  injectResponsiveStorage(app, config);
  setupStore(app);
  app.use(XXX);
  app.mount("#app");
});

3. 在页面上使用这个公共组件

<XXXImg ref="XXXImg" :imageSuffix="row.product_image"></XXXImg>

传入指定参数即可

项目结构为

src
├─── components
│     ├─── index.ts
├─── loadingVue
│     └───  AllImg.vue
└───  main.ts