前端可视化工具（骨架屏代码自动生成）

#1

实现原理

分析网页Dom树节点，通过Puppetter工具生成html、css代码。

一、安装 create-skeleton-quickly

二、 使用方法

  1. 打开网页可视化工具
npm i create-skeleton-quickly -g
npm run 5000
  1. 通过配置文件生成骨架屏
csq init // 在当前文件夹创建skeleton.config.js
csq start // 开始生成骨架屏代码
  1. 通过扩展方法
const DrawPageStructure = require('create-skeleton-quickly');

new DrawPageStructure({
    isAnimation: true,
    background: '#ecf0f2',
    pages: [
        {
            url: 'https://www.baidu.com',
        },
    ],
})
    .start()
    .then(html => {
        console.log(html);
    });

代码和更详情说明请移步 Github

欢迎PR和Star!