小程序配置全局组件_uniapp配置通用组件_vue-inset-loader
2025-11-02 18:48:24
如何在uniapp中配置全局组件直接引用？
3591
一、为什么要全局引用一个组件
在实际业务中，比如网络异常，服务器错误这种通用的弹窗，是需要在每个页面上都有准备的，但是在uniapp中，app.vue只能提供js与wxss的公共方法，并不能直接引用。那么我们在下面将要讲到如何用vue-inset-loader+vuex实现全局组件。
二、创建一个组件
需要在任何一个页面中使用组件，就必须先要创建一个组件
<template>
<view>
<button :disabled="disabled" :class="classArr" @tap="onclick" v-if="isShow">{{text}}</button>
</view>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "custom-button",
props: {
text: String,
classArr: Array,
disabled: Boolean
},
computed: mapState(["isShow"]),
data() {
return {
};
},
watch: {
errorCode : {
immediate: true,
handler(newVal, oldVal) {
console.log(newVal, oldVal)
}
},
},
methods: {
}
}
</script>
<style></style>
组件已创建完毕
三、在main.js中引入
import GlobalButton from '@/components/common-modal/button';
Vue.component('GlobalButton ',GlobalButton )
四、安装vue-inset-loader
cnpm i vue-inset-loader --save-dev
五、配置插件
在vue.config.js中，没有文件就新建
const path = require('path')
module.exports = {
configureWebpack: {
module: {
rules: [{
test: /.vue$/,
use: {
loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
},
}]
}
},
}
在pages.json中（注意需要在最前面配置，rootEle是view）
"insetLoader": {
"config":{
"confirm": "<GlobalModal ref='confirm'></GlobalModal>"
},
// 全局配置
"label":["confirm"],
"rootEle":"view"
},
