create-skeleton-quickly

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

QuickStart

npm i @tools-list/create-skeleton-quickly -g

• 方法一：打开可视化界面

csq run 5000 //谷歌会自动打开，其他浏览器需要手动

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

  1. 生成配置文件

  csq init // 在当前文件夹创建skeleton.config.js

  2. 开始编译

  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