vue-skeleton-webpack-plugin骨架屏

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

插件github地址:https://github.com/lavas-project/vue-skeleton-webpack-plugin

安装插件
npm install vue-skeleton-webpack-plugin
在项目中创建骨架屏展示组件

平时项目中使用的是rem适配,然后发现骨架屏中无效,因为他出现的时候并未渲染页面,因此找不到window对象,获取不到屏宽

<template>
  <div>
    <div class="skeleton">
      <div class="skeleton-head"></div>
      <div class="skeleton-body">
        <div class="skeleton-name"></div>
        <div class="skeleton-title"></div>
        <div class="skeleton-content"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘skeleton‘
};
</script>

<style scoped>
.skeleton {
  padding: 15px;
}
.skeleton .skeleton-head,
.skeleton .skeleton-name,
.skeleton .skeleton-title,
.skeleton .skeleton-content,
.skeleton .skeleton-content {
  background: rgb(194, 207, 214);
}
.skeleton-head {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  float: left;
}
.skeleton-body {
  margin-left: 50px;
}
.skeleton-name{
  width: 150px;
  height: 30px;
  margin-bottom: 10px;
}
.skeleton-title {
  width: 100%;
  height: 30px;
}
.skeleton-content {
  width: 100%;
  height: 30px;
  margin-top: 10px;
}
</style>
创建骨架屏入口文件entry-skeleton.js
import Vue from ‘vue‘
import Skeleton from ‘./Skeleton‘
export default new Vue({
  components: {
    Skeleton
  },
  template: `
    <div>
      <skeleton id="skeleton1" style="display:none"/>
    </div>`
})
在build目录下创建webpack.skeleton.conf.js
‘use strict‘;
const path = require(‘path‘)
const merge = require(‘webpack-merge‘)
const baseWebpackConfig = require(‘./webpack.base.conf‘)
const nodeExternals = require(‘webpack-node-externals‘)
const config = require(‘../config‘)
const utils = require(‘./utils‘)
const isProduction = process.env.NODE_ENV === ‘production‘
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

function resolve(dir) {
  return path.join(__dirname, dir)
}

let skeletonWebpackConfig = merge(baseWebpackConfig, {
  target: ‘node‘,
  devtool: false,
  entry: {
    app: resolve(‘../src/entry-skeleton.js‘)
  },
  output: Object.assign({}, baseWebpackConfig.output, {
    libraryTarget: ‘commonjs2‘
  }),
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: []
})

// important: enable extract-text-webpack-plugin
// 重点配置
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
})

module.exports = skeletonWebpackConfig

如果是vue-cli脚手架创建项目,一定要注意是否开启样式分离

修改方案就是在webpack.skeleton.conf.js中设置如下

skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
})
接下来在webpack.prod.conf.js和webpack.dev.conf.js plugins中引入插件
// inject skeleton content(DOM & CSS) into HTML
    new SkeletonWebpackPlugin({
      webpackConfig: require(‘./webpack.skeleton.conf‘),
      quiet: true,
      minimize: true,
      router: {
        mode: ‘history‘,
        routes: [
          {
            path: ‘/client/a/Quiksns/comment‘,    //对应使用路由
            skeletonId: ‘skeleton1‘    // 所用骨架屏的id标识
          },
        ]
      }
    }),

因为我这是第一次使用这个骨架屏,所以我让他展示多个的方法就是写了多个内容,如下(可能有更好,更方便的,后续修改的时候在改一下)

在页面加载初期实现的效果

个人csdn博客:https://blog.csdn.net/zmkyf1993

原文地址:https://www.cnblogs.com/FarmanKKK/p/9712913.html

时间: 2024-11-01 19:38:54

vue-skeleton-webpack-plugin骨架屏的相关文章

Vue页面显示骨架屏

1.什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 2.如何快速用Vue实现骨架屏效果? #①直接把下面的CSS代码复制,粘贴到vue项目的index.html 的 <head>...</head>里面 <style> .skeleton { position: fixed; height: 100%; overflow: hidden; padding: 15px; box-sizing: border-box; ba

Vue项目骨架屏注入实践

相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长. 由此引申出一系列的优化方法,骨架屏也因此被提出. FCP优化 在 Google 提出的以用户为中心的四个

小程序(uniapp)骨架屏应用

效果图 注意点: 1, 引入组建后, template 标签内加入<skeleton selector="skeleton" bgcolor="#FFF" v-if="showSkeleton"></skeleton> 其中 v-if="showSkeleton" 为显示骨架屏显示的参数. 2, data对象中设置showSkeleton: true // 默认一开始进入页面加载骨架屏内容. 骨架屏渲染

用于小程序中的骨架屏

基于uni-app的一个骨架屏插件. 在使用的时候可以直接在components中引入组件quick-skeleton.vue.组件代码如下: 1 <template> 2 <view 3 v-show="show" 4 :style="{ 5 width: systemInfo.width + 'px', 6 height: systemInfo.height + 'px', 7 backgroundColor: bgcolor, 8 position:

骨架屏的实现与总结

原文地址:https://segmentfault.com/a/1190000014832185 spa页面首屏加载速度没加ssr优化很慢,需要用户等待,这时前端如果这个首屏预加载可以提高用户体验,于是等着这个教程体验了一番,下面说说自己在其中的经验. 首先,说下其实骨架屏也是ssr的一种体现,也是基于vue-server-renderer包实现的,可以了解它的文档.在文档中也介绍了了(这也是骨架屏的必要因素),就是骨架屏的实现的对npm包的有严格要求,这是重中之重,必须检查你的npm包的版本.

【小程序】小程序性能探索----骨架屏

骨架屏是什么? 在Goole提出的以用户为中心的四个页面性能衡量指标中,FP/FCP(首屏渲染). 关于尽快渲染出首屏,减少白屏时间,常见的优化方式大致有以下几种: 1. 优化关键渲染路径,尽可能减少阻塞渲染的JavaScript和CSS,常见做法包括使用async/defer让浏览器下载JavaScript的同时不阻塞HTML解析,内联页面关键部分的 样式 2. 使用Service Worker 缓存AppShell,加快后续访问速度. 3. 使用HTTP/2 Server Push,帮助浏览

web前端入门到实战:css实现的骨架屏方案

优点 简单,不需要工程,不用puppeteer生成骨架dom,也不需要二次开发维护 定制程度高,想怎么搞就怎么搞 不臃肿,只给你想要的 缺点 自动化程度低,需要在骨架dom上手动添加类 协同要求高,不像工程化能通过工程去约束 思路 通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换 实现 css部分(scss写法) 通过after伪元素生成骨架样式,并通过absolute覆盖到实际元素上 专门建立的学习Q-q-u-n: 784-783-012 ,分享学习的方法和需要注意的小细节,不停更

vue.js webpack搭建开发环境

国内推荐用 cnpm 下载 npm 太慢了 1, 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 下载完之后 输入 cnpm -v 查看版本 2 安装vue脚手架 cnpm install -g vue-cli 3.初始化一个项目 vue init webpack my-project 填写项目名字 描述 作者 no no no .... 然后就会出现这些文件 4.下载依赖 成功后出现 node_这个文件

Vue.js——webpack

Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify类似的功能,在前端资源管理这方面,它提供了更加出色的功能.官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板,今天我们将介绍官方提供的这两种项目模板,并用vue-webpack-sim