# 全局组件注入

插入公共组件的loader,比如dialogheader,这些几乎所有页面都会用到的组件,适合用这个loader

# 如何使用

安装

pnpm add @plugin-light/webpack-loader-insert-global-comp -D

提前在业务库的 main.js 中将组件全局注册下:

import MatchCommDialog from 'press-ui/press-dialog/press-dialog.vue';
import GlobalComponent from 'src/local-component/module/tip-match/global-component/index-mp.vue';

Vue.component('MatchCommDialog', MatchCommDialog);
Vue.component('GlobalComponent', GlobalComponent);

vue.config.js 中配置如下:

const { LOADER: insertGlobalComp } = require('@plugin-light/webpack-loader-insert-global-comp')';

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('global-comp-vue')
      .test(/\.vue$/)
      .pre()
      .use(insertGlobalComp)
      .loader(insertGlobalComp)
      .options({
        pages: ['/Users/mike/Documents/web/src/project/user/views/index/index-home.vue'],
        components: [{
          isOnTop: false,
          name: 'MatchCommDialog', // 组件名称
          id: 'tip-match-comm-tips-dialog',
        },
        {
          isOnTop: false,
          name: 'GlobalComponent', // 组件名称
          id: 'global-component',
        }],
        platforms: ['mp-weixin', 'mp-qq', 'h5'],
      })
      .end();
  },
};

# 参数

export type IInsertGlobalCompOptions = {
  // 插入的组件列表
  components: Array<{
    // 组件名称
    name: string;
    // 组件 id
    id: string;
    // 是否在顶部,默认 false
    isOnTop?: boolean;
  }>;

  // 处理的平台,默认 ['mp-weixin', 'mp-qq']
  platforms?: Array<string>;

  // 处理的页,默认为 `pages.json` 中所有页面
  pages?: Array<string>;
};

# 文章

uni-app小程序全局组件的优化 (opens new window)

Last Updated: 2024/10/12 08:54:40