Skip to content

Latest commit

 

History

History
49 lines (29 loc) · 1.5 KB

README.md

File metadata and controls

49 lines (29 loc) · 1.5 KB

Skeleton-screen-demo

半自动根据页面内容生成骨架屏

目的是在实现页面的简单骨架屏时无需再写额外的代码。根据当前页面内容布局,把当前内容切换为骨架容器,生成对应的 html。

前提

构建思路基于 page-skeleton-webpack-pluginvue-skeleton-webpack-plugin 两个框架所做的学习简化版。

本 code 由学习参考 page-skeleton-webpack-plugin 为前提,目的提供学习自动化骨架屏原理,如有意可以前往观看其源码。

文档说明

想了解该项目创建过程和思考可以参考对应的解说文档:

👉🏻👉🏻 居于 CSR 的骨架屏生成

核心目录结构

├── public
│   └── shell 存放生成骨架屏文件
├── nodeScript 启动服务端代码
├── skeletonjs 生成骨架核心代码
├── ske.js 启动生成骨架

安装:

npx install 注意:项目基于 puppeteer 生成,确保 puppeteer 安装成功。

启动:

  1. npx run serve

在确保npx serve运行情况下再执行下面命令

  1. npx run start

访问 8082 端口,请使用 network slow 3G 下查看 或者使用 performance

更多执行请参考 package.json

预览

效果图

效果图