一、为什么要全局引用一个组件

在实际业务中，比如网络异常，服务器错误这种通用的弹窗，是需要在每个页面上都有准备的，但是在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"  
},

六、重新关闭模拟器并重新构建uniapp

七、在需要用的页面使用vuex更新isShow的值就可以显示了