解决elementUi按需引入刷新页面显示message弹框的问题

当我们按需引入element到我们的项目中，正常使用message组件，在页面中我们是这样引入的

import Vue from 'vue'
import {
  Message
} from 'element-ui'
Vue.use(Message);

但是你会发现上面这种引入方法会在刷新页面的时候，弹出来一个空的message框，我们可以采用下面这种方法引入来解决这个问题

main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { Message } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.component(Message.name, Message)

Vue.prototype.$message = Message


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

重要的代码是上面红色部分

通过 Vue.component(Message.name, Message) 来引入我们的组件

通过 Vue.prototype.$message = Message 把组件挂载到this原型链上

这样我们在页面就可以使用this.$message来使用我们的组件了。