Skip to content

luoguoxiong/create-skeleton-quickly

Repository files navigation

create-skeleton-quickly

  • 快速生成网页骨架屏的可视化工具。
  • 支持同时生成多个网页的骨架屏代码。
  • 提供了便捷的 CLI 命令,安装即用。

QuickStart

npm i @tools-list/create-skeleton-quickly -g
  • 方法一:打开可视化界面
csq run 5000 //谷歌会自动打开,其他浏览器需要手动

  • 方法二:配置文件生成骨架屏代码

    1. 生成配置文件
    csq init // 在当前文件夹创建skeleton.config.js
    1. 开始编译
    csq start // 开始生成骨架屏代码
  • 方法三:提供了扩展方法

    const DrawPageStructure = require('@tools-list/create-skeleton-quickly');
    
    new DrawPageStructure({
        isAnimation: true,
        background: '#ecf0f2',
        pages: [
            {
                url: 'https://www.baidu.com',
            },
        ],
    })
        .start()
        .then(res => {
            console.log(res);
        });

关于 skeleton.config.js

参数 说明 参数类型 是否必填 默认值
isAnimation 是否开启动画 Boolean true
background 骨架屏主题色 Color #ecf0f2
outputFilePath 公共输出路径 String
device 设备类型 String mobile
init 生成骨架屏之前函数处理 Fuc Fuc
custom 自定义骨架屏 Fuc Fuc
pages 生成骨架屏页面的配置 Array

pages 参数说明

参数 说明 数据类型 是否必填 默认值
url 网页地址 String
outputFileName 输出的 html 名称 String
outputFilePath 输出的路径地址 String

如果 pages 的元素没有设置 outputFilePath,会使用公共的输出路径 outputFilePath

About

骨架屏自动生成可视化工具

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published