draw-page-structure生成骨架屏

已于 2022-10-28 16:19:38 修改
阅读量765 收藏 2
点赞数 1
CC 4.0 BY-SA版权
文章标签： js html5
于 2022-10-28 15:31:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/z_yuyu/article/details/127570539

1、全局安装，npm i draw-page-structure -g

我这里用的是14.16.1版本的node，一切正常，一般来说14版本往上不会报错

在这里插入图片描述在这里插入图片描述

2、生成配置文件(初始化) dps init

在这里插入图片描述

这里可以直接 Ctrl+C—>回车 退出，路径后面到js文件中配置

在这里插入图片描述

3、修改 dps.config.js 进行相关配置

在这里插入图片描述

4、开始生成骨架屏 dps start

在这里插入图片描述
在这里插入图片描述

运行aaa.html查看效果图：

在这里插入图片描述

5、当然也可以生成自己页面的骨架屏

在这里插入图片描述

配置是这个样子

在这里插入图片描述

dps start运行

在这里插入图片描述

效果……好像差点事儿，反正大致流程是这样了，学会就自己玩吧

在这里插入图片描述

6、在这附个学习链接

里面有关配置说明，可以了解一下

react骨架屏自动生成_网页骨架屏自动生成方案（dps）
weixin_30789475的博客
12-24 824
什么是骨架屏什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构(灰色占位图)，在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通畅...
对开发更友好的前端骨架屏自动生成方案
马蜂窝技术
09-05 2299
（马蜂窝技术原创内容，公众号 ID：mfwtech） 一份来自 Akamai 的研究报告显示，在对 1048 名网购户进行采访后发现： 约 47% 的用户期望他们的页面在两秒之内加载完成。 如果页面加载时间超过 3s，约 40% 的用户会选择离开或关闭页面。 一直以来，为了提升用户在页面加载时的体验，无论是 Web 还是 iOS、Android 的应用中，前端开发工程师都...
vue骨架屏
前端咸鱼翻身的博客
03-19 1338
Vue页面实现骨架屏，使用draw-page-structure插件，优化用户体验。
div生成图片_网页骨架屏自动生成方案（dps）
weixin_39842237的博客
11-21 284
什么是骨架屏？什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通...
SkeletonX：chrome插件：自动生成骨架屏
02-24
骷髅X 参考资料
Tailwind CSS—骨架屏生成器
最新发布
粉丝们务必加入微信粉丝群
01-23 648
使用 Tailwind CSS 快速创建现代化的骨架屏，只需要这个简单的工具。我一直在寻找方法，让我的网站更加引人入胜和用户友好。其中最简单而又最有效的方法之一，就是加入骨架加载器——那些灰色的、闪烁的方框，在内容加载时显示。它们帮助用户获得更流畅的体验，让他们觉得网站加载速度比实际快。这些骨架加载器是一个不错的补充，但从零开始设计它们却很费时间。直到我遇到了 Tailwind Skeleton ...
create-skeleton-quickly:骨架屏自动生成可视化工具
05-28
create-skeleton-quickly 快速生成网页骨架屏的可视化工具。 支持同时生成多个网页的骨架屏代码。 提供了便捷的 CLI 命令，安装即用。 QuickStart npm i create-skeleton-quickly -g 方法一：打开可视化界面 csq run 5000 //谷歌会自动打开，其他浏览器需要手动 方法二：配置文件生成骨架屏代码 生成配置文件 csq init // 在当前文件夹创建skeleton.config.js 开始编译 csq start // 开始生成骨架屏代码 方法三：提供了扩展方法 const DrawPageStructure = require('create-skeleton-quickly'); new DrawPageStructure({ isAnimation: true, background: '#ecf
skeleton-chrome-extension:自动生成骨架屏的chrome插件
05-03
Skeleton Chrome Extension 介绍和效果可以点击： 《通过chrome插件自动生成骨架屏》进行查看
PageSkeleton是一款自动生成骨架页面的webpack插件
08-10
Page Skeleton 是一款 webpack 插件，在开发过程中，通过简单的点击操作，生成开发页面对应的骨架页面，并通过 webpack 将骨架页面打包到你的应用中，这样就能够在你的应用启动之前，看到页面的骨架结构了。
网页骨架屏自动生成方案（dps）
MyFrontEnd
07-20 803
什么是骨架屏 什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。 假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然...
jquery.skeleton.loader：一个用于制作屏幕骨架加载器的jQuery插件
02-10
jquery.skeleton.loader（lo scheletrone） 一个用于制作屏幕骨架加载器的jQuery插件。 注意：骨架不是自动创建线框的工具……至少还没有:) 2013年，（ 首次讨论了在屏幕上体验中使用加载微调器的弊端，并称其为“骨架屏幕”。 骨架屏幕背后的概念是使用空页面，这些空页面在可用时逐渐填充内容-页面的不可变区域在加载时立即呈现，显示为中性色块，并逐渐被内容（例如图像，标题）取代以及界面标签。 （摘自非常好的文章） “ lo scheletrone”的目标是帮助那些希望在其站点中包括现有或新的骨架屏幕的用户。 内容 浏览器支持 我们确实在乎。 IE 8+ :heavy_check_mark: 最新 :heavy_check_mark: 最新 :heavy_check_mark: 最新 :heavy_check_mark: 最新 :heavy_check_mark: 入门 请参阅动作jquery.skeleton.loader插件或此笔： 有两个快速入门选项： 克隆仓库： git@github.com:jqu
多路由骨架屏实现
weixin_44318256的博客
12-09 360
vue多路由骨架屏实现方案 京东dps 生成骨架屏 html + vue-skeleton-webpack-plugin 配置多路由 1.npm i draw-page-structure -g 2.npm install vue-skeleton-webpack-plugin -D 3.dps init生成配置文件，并修改 const path = require('path'); // 需要展示完成页面的地址，可以写本地调试地址 const url = 'https://www.baidu.com'
A002-185-2531
GONGZIXUY的博客
01-05 1596
目录 第一页作业 2 1.1验收承认(acceptance) 2 1.2要求需要(requirement) 5 1.3最初形态(Prototype) 6 1.4Model(模型) 7 1.5异义词(Homonym) 8 1.6检查(Inspection) 8 1.7敏捷式项目管理(Agile project management) 9 1.8特征(Feature) 10 1.9实体(Entity) 12 1.10错误(Error) 14 第二页作业 15 2.1实现视图(implementation vie
【亲测免费】 探索新一代骨架屏生成利器：draw-page-structure
gitblog_00062的博客
05-16 558
探索新一代骨架屏生成利器：draw-page-structure 1、项目介绍 draw-page-structure 是一个简单而强大的工具，专为快速生成骨架屏（又称占位符屏幕）设计。它通过自动解析网页结构，帮助开发者轻松地实现动态加载内容时的平滑过渡效果，提升用户体验。这个开源项目不仅提供了命令行接口（CLI），还支持在浏览器环境中直接使用，满足不同场景下的开发需求。 2、项目技术分析 该项目...
万字长文——全自动可视化骨架屏生成工具流程全记录！
XIAO_A_fighting的博客
05-18 1751
目前的App端开发大多采用H5+原生相结合，这种开发方式可在保证加载速度和页面稳定性的基础上最大化的降低开发成本， 因此xxxApp应用了此种开发模式。在App内所嵌套的H5页面相比于普通HTML页面，页面首屏渲染速度会更慢，因为对于App内嵌的H5页面，除本身的页面资源加载（HTML+CSS+JS等）还要进行webView的加载，也因此比起普通HTML页面，APP内嵌H5页面对于首屏渲染优化要求更高，所以前端更要尽可能的去进行首屏渲染优化，才能给用户一个流畅的使用感受。
【Vue】骨架屏
jiahui55555的博客
01-28 983
前言 作为一位前端工(xiao)程(cai)师(niao)，用户体验一直都是首要问题。今天来研究一下骨架屏，由于前后端分离成为当下的主流，小前端们都面临着一个问题，就是程序初始化(一大堆乱七八糟的编译运算)的原因，最开始的一段时间会出现空白的情况。当前主要的解决方案是使用加载动画，意思就是在程序启动时就默认显示加载动画(如菊花图)，等到程序编译好并主要数据加载完成之后把加载动画隐藏掉。而骨架屏最...
探秘Ma-Skeleton：一个高效、可定制的前端页面骨架屏解决方案
gitblog_00070的博客
04-21 401
探秘Ma-Skeleton：一个高效、可定制的前端页面骨架屏解决方案 在现代Web开发中，用户体验成为了至关重要的元素。当我们打开一个网页时，如果需要等待很长时间才能看到任何内容，那么用户可能会感到厌烦并选择离开。为了解决这个问题，Ma-Skeleton 应运而生。这是一个轻量级、高度可定制的前端骨架屏生成器，旨在提升应用加载期间的用户体验。 项目简介 Ma-Skeleton 是一个基于JavaS...
react骨架屏自动生成_前端可视化工具（自动生成骨架屏代码）
weixin_36249618的博客
01-17 979
前世与今生自从前端三大框架React、Vue、Angular出道以来，前端开发面向工程化，同时工程化给前端开发带来的极大的便利。一些脚手架也因运而生，如create-react-app、vue-cli等单页脚手架。总所周知，单页的首屏体验一直不怎么样，特别是在弱网的情况下白屏时间太长，那怎么解决呢？可能骨架屏方案是个不错的选择。骨架屏解决了什么问题？如果用户在等待Js、Css等资源加载的时间内显示...
wpf page 界面渲染完成后执行自动操作_Vue项目骨架屏自动生成方案（dps）
weixin_39747087的博客
12-12 507
什么是骨架屏什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。 假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通...
CATIA制图插件Draw-Grid 100发布，一键生成车线
资源摘要信息:"Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_" 知识点: 1. CATIA软件介绍：CATIA（Computer Aided Three-dimensional Interactive Application）是一款由法国达索系统公司开发...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

z_yuyu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值