cca-webpack-component-plugin

自动注入 uniapp 工程的页面组件的 webpack 插件，实现页面无需手动添加，即可渲染组件。

场景

假如有一个 <loading></loading> 的全局组件，我希望在页面接口请求时显示，接口请求完关闭，由于在小程序端不能直接操作修改 view 部分，所以我们只能每个页面都添加一遍，费时费力，本插件的目的就是自动给每个页面都注入类似 <loading></loading> 组件，解放生产力。

安装

yarn add @cgzair/cca-webpack-component-plugin -D

使用

首先，请确保自动注入的组件为全局组件，一般在 main.js 中：

import Loading from "@c/components/Loading";

Vue.component("Loading", Loading);

然后打开项目的 vue.config.js 文件，添加以下代码：

const WebpackComponentPlugin = require("@cgzair/cca-webpack-component-plugin");

module.exports = {
  configureWebpack: {
    new WebpackComponentPlugin({
      component: ["<loading></loading>"],
    }),
  },
};

温馨提示

小程序节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。

所以假如你的组件全局注册为 UserInfo，那么你的注入组件应该为 user-info：

// main.js

import UserInfo from "@c/components/UserInfo";

Vue.component("UserInfo", UserInfo);

// vue.config.js

const WebpackComponentPlugin = require("@cgzair/cca-webpack-component-plugin");

module.exports = {
  configureWebpack: {
    new WebpackComponentPlugin({
      component: ["<user-info></user-info>"],
    }),
  },
};

API

| 属性 | 说明 | 类型 | 默认值 | 备注 | | --- | --- | --- | --- | --- | | configPath | uniapp pages.json 路径，主要是发现当前有哪些页面路径 | string | ./src/pages.json | - | | component | 页面注入的组件 | string[] | - | 必传 | | ignorePagePath | 忽略注入的页面路径，注意是完整路径，分包地址需要带上分包前缀 | string[] | - | - |