android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

可以看到，DOM里

面有且仅有一个 div#app ，当js被执行完成之后，此 div#app 会被 整个替换掉 ，因此，我们可以来做一下实验，在此div里面添加一些内容：

Hello skeleton

Hello skeleton

Hello skeleton

打开chrome的开发者工具，在 Network 里面找到 throttle 功能，调节网速为“Slow 3G”，刷新页面，就能看到页面先是展示了三句“Hello skeleton”，待js加载完了才会替换为原本要展示的内容。

现在，我们对于如何在Vue页面实现骨架屏，已经有了一个很清晰的思路——在 div#app 内直接插入骨架屏相关内容即可。

三、易维护的方案

显然，手动在 div#app 里面写入骨架屏内容是不科学的，我们需要一个扩展性强且自动化的易维护方案。既然是在Vue项目里，我们当然希望所谓的骨架屏也是一个 .vue 文件，它能够在构建时由工具自动注入到 div#app 里面。

首先，我们在 /src 目录下新建一个 Skeleton.vue 文件，其内容如下：

接下来，再新建一个 skeleton.entry.js 入口文件：

import Vue from 'vue'

import Skeleton from './Skeleton.vue'

export default new Vue({

components: {

Skeleton

},

template: ''

})

在完成了骨架屏的准备之后，就轮到一个关键插件 vue-server-renderer 登场了。该插件本用于服务端渲染，但是在这个例子里，我们主要利用它能够把 .vue 文件处理成 html 和 css 字符串的功能，来完成骨架屏的注入，流程如下：

四、方案实现

根据流程图，我们还需要在根目录新建一个 webpack.skeleton.conf.js 文件，以专门用来进行骨架屏的构建。

const path = require('path')

const webpack = require('webpack')

const nodeExternals = require('webpack-node-externals')