按照网上教程
全局安装,npm i draw-page-structure – g
dps init 生成配置文件 dps.config.js
修改 dps.config.js 进行相关配置
dps start 开始生成骨架屏
const dpsConfig = {
url: 'https://baidu.com', // 待生成骨架屏页面的地址,用百度(https://baidu.com)试试也可以
output: {
filepath: '/Users/zl/Desktop/demo/demo_/src/views/index.html', // 生成骨架屏的存放页面,一般为项目的入口页面
injectSelector: '#app' // 生成的骨架屏插入页面的节点
},
background: 'red',
animation: 'opacity 1s linear infinite;',
includeElement: function(node, draw) {
// 定制某个节点画出来的样子,带上return false
if(node.id == 'ui-alert') {
跳过该节点及其子节点
return false;
}
if(node.tagName.toLowerCase() === 'img') {
// 对该图片生成宽100%,高8%,颜色为红色的色块
draw({
width: 100,
height: 8,
left: 0,
top: 0,
zIndex: 99999999,
background: 'red'
});
return false;
}
},
writePageStructure: function(html) {
// 自己处理生成的骨架屏
// fs.writeFileSync(filepath, html);
// console.log(html)
},
init: function() {
// 生成骨架屏之前的操作,比如删除干扰节点
},
}
module.exports = dpsConfig;
这是我dps.config.js的配置
但是一键生成出来的index.html只有
<html>
<head>
<style>
</style>
</head>
<body>
<div></div>
</body>
</html>
换了好几个网址都一样
说evalDom.js是核心函数,但是没介绍具体怎么用。。。新手求教