Vue页面骨架屏注入方法

作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行，首屏加载的问题也在困扰着开发者们。那么有没有一个办法，也能让SPA用上骨架屏呢？这就是这篇文章将要探讨的问题。

文章相关代码已经同步到 ，欢迎查阅~

一、何为骨架屏

简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。

这个技术在一些以内容为主的APP和网页应用较多，接下来我们以一个简单的Vue工程为例，一起探索如何在基于Vue的SPA项目中实现骨架屏。

二、分析Vue页面的内容加载过程

为了简单起见，我们使用 vue-cli 搭配 webpack-simple 这个模板来新建项目：

vue init webpack-simple vue-skeleton

这时我们便获得了一个最基本的Vue项目：

安装完了依赖以后，便可以通过 npm run dev 去运行这个项目了。但是，在运行项目之前，我们先看看入口的html文件里面都写了些什么。