解決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來使用我們的組件了。