在Vue開(kāi)發(fā)中，如果網(wǎng)絡(luò)請(qǐng)求比較頻繁或者頁(yè)面渲染比較復(fù)雜，可能會(huì)出現(xiàn)短暫的白屏或等待的情況，這樣會(huì)對(duì)用戶(hù)體驗(yàn)造成一定的影響。為了解決這個(gè)問(wèn)題，可以使用Vue的全局配置 loading，來(lái)讓頁(yè)面看起來(lái)更加流暢。

在Vue應(yīng)用中，我們可以通過(guò)全局配置來(lái)設(shè)置 loading 效果。這樣，在異步操作中，我們就可以展現(xiàn)出一個(gè) loading 提示用戶(hù)正在加載數(shù)據(jù)。

// main.js  
Vue.config.productionTip = false  
Vue.prototype.$api = api;

使用Vue的全局配置 loading，我們需要在 main.js 中設(shè)置。首先，我們可以將 Vue.config.productionTip 的值設(shè)置為 false，這樣可以阻止顯示生產(chǎn)環(huán)境的提示信息。接著需要將請(qǐng)求數(shù)據(jù)的 API 封裝到 Vue.prototype.$api 中，這樣就可以全局訪問(wèn) API 了。

api.interceptors.request.use(config =>{  
canvasLoading.open({
id: 'loading',
text: '數(shù)據(jù)加載中...'
});
return config;
}, err =>{
return Promise.reject(err);
});
api.interceptors.response.use(response =>{
canvasLoading.close({id: 'loading'});
return response.data;
}, err =>{
canvasLoading.close({id: 'loading'});
Message({
message: '加載失敗，請(qǐng)稍后再試！',
type: 'warning'
});
return Promise.reject(err);
});

在數(shù)據(jù)請(qǐng)求中，我們需要使用 axios 并設(shè)置攔截器，這樣可以在請(qǐng)求前顯示 loading，請(qǐng)求結(jié)束后關(guān)閉 loading，如果請(qǐng)求失敗則提示錯(cuò)誤信息。在這里我們使用了 canvas-loading 是一個(gè)可以用于 Vue 的 loading 插件，用于顯示 loading 效果。

Vue.use(canvasLoading);

在使用前我們需要使用 Vue.use() 函數(shù)來(lái)引入插件。

在使用過(guò)程中，我們還可以根據(jù)實(shí)際需求，對(duì) loading 進(jìn)行自定義。這里 canvas-loading 提供了豐富的自定義配置。我們可以自定義文字，背景，顏色和加載圖標(biāo)等屬性。

// 自定義配置  
Vue.use(canvasLoading, {  
text: '數(shù)據(jù)加載中...',  // 設(shè)置提示文字  
dots: 10,               // 設(shè)置 10 個(gè)點(diǎn)  
color: '#fff',          // 設(shè)置背景顏色和點(diǎn)的顏色都為白色  
background: '#000',     // 設(shè)置背景色  
speed: 1,               // 自定義加載速度  
textFont: 'bold 40px Arial'  // 自定義文字樣式  
});

在自定義配置中，我們可以設(shè)置提示文字、點(diǎn)的數(shù)量、背景顏色、加載速度和文字樣式等屬性。這些屬性可以幫助我們更好的展現(xiàn)出 loading 效果。

總結(jié)來(lái)說(shuō)，Vue的全局配置 loading 可以幫助我們對(duì)數(shù)據(jù)請(qǐng)求過(guò)程中的頁(yè)面展示進(jìn)行優(yōu)化，提高用戶(hù)使用體驗(yàn)。