在uniapp小程序中实现全局组件的插件，支持：
- 自动实现全局引入组件
- 根据调用方法按需引入组件
- 支持webpack/vite配置
需要先在uniapp的components中，创建组件；我们创建组件base-confirm和base-loading
添加npm包
npm install @uniapp-global-component/webpack -D在config.vue.js文件中配置
const path = require('path');
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.vue$/,
use: {
// 使用HBuilder构建的项目
// loader: path.resolve(__dirname,'./node_modules/@uniapp-global-component/webpack'),
// 使用cli构建的项目
loader: "@uniapp-global-component/webpack",
options: {
// HBuilder构建项目，默认地址
// pagesPath: path.resolve(__dirname,'.'),
// cli构建项目，默认地址
pagesPath: path.resolve(__dirname,'./src'),
// rewrite: "uni.$global", // 默认$refs
components: [{
code: `<base-confirm ref='confirm'></base-confirm>`,
global: true
}, {
code: `<base-loading ref='loading'></base-loading>`,
global: false
}]
}
},
},
],
},
},
};添加npm包
npm install @uniapp-global-component/vite -D在vite.config.js文件中配置
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import globalComponent from '@uniapp-global-component/vite'
import path from 'path'
export default defineConfig({
plugins: [
globalComponent({
// HBuilder构建项目，默认地址
// pagesPath: path.resolve(__dirname,'.'),
// cli构建项目，默认地址
pagesPath: path.resolve(__dirname,'./src'),
// rewrite: "uni.$global", // 默认$refs
components: [{
code: `<base-confirm ref='confirm'></base-confirm>`,
global: true
}, {
code: `<base-loading ref='loading'></base-loading>`,
global: false
}]
}),
uni()
],
})定义pages.json文件所在目录地址，插件会从pages.json中获取页面路径，然后只在页面文件上添加全局组件
code定义插入的组件代码，global为true时，表示组件代码全局插入，为false时会根据调用方法引入
重写调用方法。
在组件为根据调用方法引入时，默认会在代码中查找$refs.{name}，根据name与组件代码的ref名称匹配，然后在页面中插入组件代码；
rewrite重新调用的代码，如设置为uni.$global，插件就会去查找uni.$global.{name}，然后配置组件代码，而不再是$refs.{name}。
这个配置项可以实现在页面外调用全局组件，在main.js中定义：
uni.$global = {
confirm: function (options) {
// 在这里，你可以添加你自己的代码，例如修改options或者添加新的行为
console.log("showToast", options);
// eslint-disable-next-line no-undef
var pages = getCurrentPages();
var page = pages[pages.length - 1];
page.$vm.$refs.confirm.show({
message: "提示",
vertical: "bottom",
});
},
};在非页面文件中，就可以操作全局组件了；但是在非页面文件中调用，不会被插件检测到，不会引入按需组件。