作為與用戶聯(lián)系最為密切的前端開發(fā)者，用戶體驗是最值得關(guān)注的問題。關(guān)于頁面loading狀態(tài)的展示，主流的主要有l(wèi)oading圖和進(jìn)度條兩種。除此之外，越來越多的APP采用了“骨架屏”的方式去展示未加載內(nèi)容，給予了用戶煥然一新的體驗。隨著SPA在前端界的逐漸流行，首屏加載的問題也在困擾著開發(fā)者們。那么有沒有一個辦法，也能讓SPA用上骨架屏呢？這就是這篇文章將要探討的問題。

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為疏附企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站建設(shè)，疏附網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

文章相關(guān)代碼已經(jīng)同步到 Github ，歡迎查閱~

一、何為骨架屏

簡單來說，骨架屏就是在頁面內(nèi)容未加載完成的時候，先使用一些圖形進(jìn)行占位，待內(nèi)容加載完成之后再把它替換掉。

這個技術(shù)在一些以內(nèi)容為主的APP和網(wǎng)頁應(yīng)用較多，接下來我們以一個簡單的Vue工程為例，一起探索如何在基于Vue的SPA項目中實現(xiàn)骨架屏。

二、分析Vue頁面的內(nèi)容加載過程

為了簡單起見，我們使用 vue-cli 搭配 webpack-simple 這個模板來新建項目：

vue init webpack-simple vue-skeleton

這時我們便獲得了一個最基本的Vue項目：

├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ └── main.js
├── index.html
└── webpack.conf.js

新聞標(biāo)題：Vue頁面骨架屏注入方法-創(chuàng)新互聯(lián)
文章鏈接：http://weahome.cn/article/dcooih.html