Vue是一款前端框架，它提供了許多便利的功能， 包括全局配置loading的方案。當我們進行異步操作時，會有一段時間需要等待，此時可以設置loading頁面，讓用戶感覺到頁面未崩潰且有在工作，給予良好的用戶體驗。

Vue全局配置loading可以在Vue實例中設置。在Vue實例中，我們可以通過使用一個對象來配置vue的loading選項。該對象必須包含一個template的屬性，其中值為一個字符串模版。另外，我們還可以設置loading的配置項，如顏色，大小等等。

Vue.prototype.$loading = (function () {
const template = `
`
return {
show: function () {
let el = document.createElement('div')
el.innerHTML = template
el = el.firstChild
document.body.appendChild(el)
},
hide: function () {
let els = document.querySelectorAll('.loading-wrapper')
Array.prototype.forEach.call(els, (el) =>{
document.body.removeChild(el)
})
}
}
})()

如上代碼所示，在Vue.prototype下面定義了一個$loading方法。使用自執行函數返回一個包含show、hide兩個方法的對象。當調用show方法時，binding.value的值作為message傳入。該方法創建一個div元素，向其中插入剛才定義的模版，最后把這個元素插入到document.body中。hide方法則循環調用所有的wrapper元素，分別移除相應DOM元素。

在需要調用loading的地方，只需要在Vue組件的相應生命周期或者函數內部調用。

export default {
name: 'product-list',
data() {
return {
products: null
}
},
created() {
this.$loading.show()
axios
.get('/api/products')
.then(response =>(this.products = response.data))
.catch(error =>console.log(error))
.finally(() =>{
this.$loading.hide()
});
}
}

當我們調用了show方法后，loading頁面就會出現在頁面上，與此同時異步操作的結果還未出現，直到請求處理完關閉loading，體驗相對友好。我們可以在Vue實例中全局配置，方便我們對loading的樣式，多個組件內部復用，提高開發效率。