效果图

弹窗组件名cu-model.vue

<template><div class="in_alert" v-if="show"><span class="in_text-overflow">{{content}}</span></div>
</template>
<script>
export default {props: ['show', 'content']
}
</script>
<style>
.in_alert{position: fixed;top: 0;bottom: 0;left: 0;right: 0;margin: auto;max-width: 80%;height: 32px;z-index: 10;display: flex;align-items: center;justify-content: center;
}
.in_alert>span{max-width:100%;height: 32px;line-height: 32px;font-size: 14px;background:rgba(0, 0, 0, 0.6);padding: 0 15px;color: #FFF;border-radius: 6px;
}
</style>

公共方法util.js

import Vue from 'vue'
import cuModel from '@/components/cu-model.vue'
import router from '@/router'
const Model = Vue.extend(cuModel)
const oDiv = document.createElement('div')
var VM = new Model({el: oDiv}),time_model;
document.body.appendChild(VM.$el)
export default {jump(type,url,object){object = object?object:''switch(type){case 1:router.push({path:url,query:object});break;case 2:router.go(-1);break;}},model(content,createDialog){VM.content = contentVM.show = trueclearTimeout(time_model)time_model = setTimeout(() => {VM.show = false}, 5000)},
}

配置成全局main.js

import util from '@/utils/util'
Vue.prototype.$util = util调用方法：
this.$util.model('这是消息弹窗')//弹窗
this.$util.jump(1,路径,参数)//跳转

封装axios请求

npm安装:npm install axios --save
axios文档:https://www.kancloud.cn/yunye/axios/234845

import axios from 'axios'
import router from '@/router'
import util from '@/utils/util'//公共方法
export default {request(url, data, method, title, header) {return new Promise((resove, reject) => {axios({url: url,method: method.toUpperCase(),data: data,header:{'content-type':(header ? header :"application/json")}}).then((res) => {if (res.data.code == "401") {//登录失效util.jump(1,'/login')util.model(res.data.msg)}else{resove(res.data);}}).catch(function (error) {reject('fail')	})})}
}调用方法
import http from '@/utils/httpUtil.js'//引入axios封装jshttp.request(接口url,接口参数{对象格式},请求方法'post',请求header默认application/json).then((res) => {console.log('返回',res)
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。