vue-skeleton-webpack-plugin创建骨架屏踩坑之路（Skeleton.vue 内部STYLE样式未生效问题）

最新推荐文章于 2024-11-21 16:08:23 发布

GiGi-L

最新推荐文章于 2024-11-21 16:08:23 发布

阅读量5.4k

点赞数 2

分类专栏： js 文章标签： vue-skeleton-webpack-plugin 骨架屏使用异步css

本文链接：https://blog.youkuaiyun.com/Loria1/article/details/87601442

版权

这两天有空了解了下骨架屏，虽然了解的有点迟，但是自己总要了解下吧，学习永远不算晚。

参考文章：

vue-cli 构建的项目如何加入骨架屏 skeleton

https://blog.youkuaiyun.com/u012878818/article/details/81216272#commentsedit

让骨架屏更快渲染 - xiaOp的博客

https://juejin.im/entry/5ab37c126fb9a028c06abc18

现根据第一篇文章的步骤一步步来

vue-cli创建项目
进去当前项目，执行命令： npm install vue-skeleton-webpack-plugin
在src目录下创建Skeleton.vue文件，把代码拷进去
在src目录下创建entry-skeleton.js文件,把代码拷进去
在build目录下创建webpack.skeleton.conf.js,把代码拷进去
然后在webpack.dev.conf.js和webpack.prod.conf.js分别加入

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

// inject skeleton content(DOM & CSS) into HTML 以下代码放在 plugins参数中

new SkeletonWebpackPlugin({

webpackConfig: require('./webpack.skeleton.c

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

GiGi-L

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-skeleton-webpack-plugin搭建骨架屏，以及nprogress优化用户体验

guorui_cara的博客

12-18

759

最近在优化手里面项目，发现项目首页加载实在很慢，第一次加载白屏显示时间很长，用户体验极差，所以自己鼓捣加个骨架屏和加载滚动进度条试试。使用vue-skeleton-webpack-plugin、nprogress搭建骨架屏首先安装插件 npm install --save nprogress npm i vue-skeleton-webpack-plugin 对于nprogress其他使用属性，可以在链接查看；在项目中使用方法，在route里面加入钩子函数或者在main.js也可以，这样在页面

vue-cli3配置webpack插件 vue-skeleton-webpack-plugin 单页骨架屏

何须浅赭轻月白的博客

10-26

824

1.安装 npm install vue-skeleton-webpack-plugin 2.创建骨架屏文件在src文件夹下新建skeleton目录，并在这个目录内新建listSkeleton.vue、detailSkeleton.vue 3.detailSkeleton.vue  <template> <div class="container"> 详情骨架屏 <img sr

3 条评论您还未登录，请先登录后发表或查看评论

vue 浏览器调试样式如何定位样式_Vue骨架屏实现方案二：vue-skeleton-webpack-plugin...

weixin_39614704的博客

11-22

265

前段时间阅读了饿了么的 PWA 升级实践一文，受益匪浅。其中构建时使用 Vue 预渲染骨架屏一节，为开发者提供了减少白屏时间，提升用户感知体验的新思路。本文将借鉴这一思路，尝试为 Vue 项目添加骨架屏。关于尽快渲染出首屏，减少白屏时间，我能想到的优化方式大致有以下几种：1、优化 Critical Rendering Path(关键渲染路径)，尽可能减少阻塞渲染的 JavaScript 和 CSS...

vuecli2及vuecli3 element 骨架屏 vue-skeleton-webpack-plugin

晚星的博客

12-31

1200

优点加速或减少HTTP请求损耗延迟加载减少请求内容的体积优化用户等待体验 components/Skeleton.vue <template> <div class="skeleton-wrapper"> <section class="skeleton-block">  骨架内容 </section> </div

vue-cli3.0 项目内使用vue-skeleton-webpack-plugin插件根据路由来渲染不同的骨架屏

一捆铁树枝的博客

03-17

2942

为了前端体验更加友好，减缓用户的焦虑情绪，提升项目质量等，我们在项目里面可以使用骨架屏，提前渲染出来一个跟正式页面相似的页面出来，减小首屏加载时间。在vue中使用骨架屏因为我们的代码会使用webpack打包，所以在我们的js下载运行之前，用户是无法在页面上看到信息，所以，我们要把骨架屏相关的代码放到HTML里面，当然，可以把代码直接写在html文件的<div id=’app‘>...

标题：加速网页加载，提升用户体验——Vue Skeleton Webpack Plugin 全面解析

gitblog_00049的博客

05-16

481

标题：加速网页加载，提升用户体验——Vue Skeleton Webpack Plugin 全面解析去发现同类优质开源项目:https://gitcode.com/ 项目介绍 Vue Skeleton Webpack Plugin 是一款专为 Vue.js 应用设计的 Webpack 插件，它能在构建过程中自动生成骨架屏（Skeleton Screen），在页面完全渲染前展示大致布局，从而显著...

基于 vue-skeleton-webpack-plugin 的骨架屏实战

11-30

【Vue 骨架屏实战】本文以"基于 vue-skeleton-webpack-plugin 的骨架屏实战"为主题，探讨如何在Vue项目中实现骨架屏以优化页面加载体验。骨架屏，即Skeleton Screen，是在页面内容完全渲染之前，展示页面结构的静态...

vue目首屏添加skeleton骨架屏

04-02

635

1. 安装插件：npm install vue-skeleton-webpack-plugin 2. 在src目录下创建 Skeleton.vue <template> <div class="skeleton-wrapper"> <header class="skeleton-header"><...

vue-skeleton-webpack-plugin骨架屏与page-skeleton-webpack-plugin骨架屏生成插件

最新发布

学而时习之，不亦说乎。

11-21

575

5.为了减少初次加载显示的骨架屏与页面直接的突然白屏app.vue添加骨架屏。4.添加src/components/Skeleton.vue文件。

cli vue webpack 实战_基于 vue-skeleton-webpack-plugin 的骨架屏实战

weixin_39526741的博客

12-18

207

前言目前正在做的项目，登录是需要跳转到别人的页面的，导致重定向很多，需要优化一下白屏时间，所以就用到了骨架屏，但是这次用的骨架屏不是自动生成的，还是自己敲的样式，一步步来吧，先从简单的用起。先上效果图：什么是骨架屏骨架屏，英文 Skeleton screen ，是指在页面开始渲染之前的白屏时间内，先让用户看到即将要展现页面的“骨架”，页面渲染完成之后再将它替换掉，起到一个从白屏 → 渲染完成 ...

vue-skeleton-webpack-plugin 骨架屏插件使用

supremeJacob的博客

05-10

3350

安装插件 cnpm i vue-skeleton-webpack-plugin vue.config.js配置添加以下代码 // 骨架屏 const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin"); module.exports = { configureWebpack: (config) => { const plugins = []; // 骨架屏 plugins.push( new Skelet

vue中使用骨架 vue-skeleton-webpack-plugin

飞翔༒之翼

06-30

565

1、调试的时候可以在浏览器中修改network为slow 3g这样加载的时间就比较长一、安装webpack插件 npm install vue-skeleton-webpack-plugin 二、创建模板文件如果不同的路由界面显示不同的模板可以创建过个模板文件，我在src文件夹下面创建了三个文件 Skeleton1.vue <template> <div class="skeleton-wrapper"> <header class="skel

一个vue实现多页面骨架屏vue-skeleton-webpack-plugin插件的使用

N years的博客

07-23

1万+

vue-skeleton-webpack-plugin这是一个基于 vue 的 webpack 插件，为单页和多页应用生成 skeleton，提升首屏展示体验。安装 1.在package.json文件引入依赖 "vue-skeleton-webpack-plugin": "^1.1.17" 2.npm install vue-skeleton-webpack-plugin 使用 ...

vue webpack 自动打开页面_一个vue实现多页面骨架屏vue-skeleton-webpack-plugin插件的使用...

weixin_39586265的博客

12-18

307

vue-skeleton-webpack-plugin这是一个基于 vue 的 webpack 插件，为单页和多页应用生成 skeleton，提升首屏展示体验。安装1.在package.json文件引入依赖 "vue-skeleton-webpack-plugin": "^1.1.17"2.npm install vue-skeleton-webpack-plugin使用首先创建一个仅使用骨...

vue-cli3 的vue-skeleton-webpack-plugin使用

noal的博客

09-17

1710

index.html <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8" />  <meta name="viewport" content...

vue首页骨架屏vue-skeleton-webpack-plugin插件的使用

家有佳欣宝贝的博客

11-17

907

安装 npm install vue-skeleton-webpack-plugin 使用 1.在 webpack.dev.conf.js和webpack.prod.conf.js中引入插件 const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin') function resolve(dir) { return...

vue-cli2添加骨架屏

MiemieWan的博客

09-02

706

一、安装配置骨架屏插件 1.安装插件page-skeleton-webpack-plugin npm i --save page-skeleton-webpack-plugin 2.配置插件在webpack.base.conf.js文件中引入文件，进行配置： const { SkeletonPlugin } = require("page-skeleton-webpack-plugin"); module.exports = { plugins: [ new SkeletonPlugin({

Vue项目骨架屏实践：vue-skeleton-webpack-plugin

"本文主要介绍如何使用`vue-skeleton-webpack-plugin`在Vue项目中实现骨架屏，以优化页面加载期间的用户体验。通过显示预设的骨架布局，骨架屏可以减少用户感知的等待时间，使页面加载显得更快。文章提供了一个基于...