1. 全局安装，npm i draw-page-structure – g
2. dps init 生成配置文件 dps.config.js
3. 修改 dps.config.js 进行相关配置
4. dps start 开始生成骨架屏
只需简单几步，然而并没有繁琐的配置：
图片
一般来说，你需要按自己的项目情况来配置 dps.config.js ，常见的配置项有：
- url: 待生成骨架屏的页面地址
- output.filepath: 生成的骨架屏节点写入的文件
- output.injectSelector: 骨架屏节点插入的位置，默认 #app
- background: 骨架屏主题色
- animation: css3 动画属性
- rootNode: 真对某个模块生成骨架屏
- device: 设备类型，默认 mobile
- extraHTTPHeaders: 添加请求头
- init: 开始生成之前的操作
- includeElement(node, draw): 定制某个节点如何生成
- writePageStructure(html, filepath): 回调的骨架屏节点
初步实现的效果：
- 京东 PLUS 会员正式中首页：
图片
- 京东 PLUS 会员正式中首页，通过该方案生成的骨架屏效果：
图片
-
移动端百度首页，通过该方案生成的骨架屏效果：
图片
以上就是基于 DOM 的骨架屏自动生成方案，其核心是 evalDOM 函数。这个方案在很多场景下的表现还是令人满意的。不过，网页布局和样式组合的可能性太多，想要在各种场景下都获得理想的效果，还有很长的路要走，但既然已经在路上，就勇敢的向前吧！
--引用前端工匠文章
