react、vue引入骨架屏如果有其它需求，可以将每个骨架块作为小组件，再根据UI设计，组合成大组件。例如：下面的详情

神操作如下：

安装依赖包 npm i react-content-loader --save
用在线工具绘制骨架屏 skeletonreact.com/
将绘制好的骨架屏文件作为组件引入项目中

组件示例如下：

import React from "react"
import ContentLoader from "react-content-loader"

const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

export default MyLoader

4.在具体页面中引入自己的组件

5.注意：

如果直接使用该工具，只能绘制相同色值的骨架，且背景色默认f5f5f5(除非选择图片作为背景)；

如果有其它需求，可以将每个骨架块作为小组件，再根据UI设计，组合成大组件。

例如：下面的详情页中，有白色背景的模块不能用在线工具生成，则将每个灰色骨架生成一个小组件，组合而成。