精华内容
下载资源
问答
  • github地址:...2.在src/components/创建只包含骨架屏内容的Skeleton.vue模板 3.在src/下创建骨架屏入口文件skeleton.js 4.在vue.config.js中配置骨架屏参数 这里的模板是统一的,如果想根据页面内容自动生

    github地址:https://github.com/lmy01/vuecli3_skeleton_demo

    1.安装插件 vue-skeleton-webpack-plugin

    "vue-skeleton-webpack-plugin": "^1.2.2",
    

    2.在src/components/创建只包含骨架屏内容的Skeleton.vue模板
    在这里插入图片描述
    3.在src/下创建骨架屏入口文件skeleton.js
    在这里插入图片描述
    4.在vue.config.js中配置骨架屏参数
    在这里插入图片描述
    这里的模板是统一的,如果想根据页面内容自动生成骨架屏,可以使用饿了么团队开发的 page-skeleton-webpack-plugin.

    展开全文
  • 骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下
  • vue-skeleton-webpack-plugin这是一个基于 vue 的 webpack 插件,为单页和多页应用生成 skeleton,提升首展示体验。 安装 1.在package.json文件引入依赖 "vue-skeleton-webpack-plugin": "^...

    vue-skeleton-webpack-plugin这是一个基于 vue 的 webpack 插件,为单页和多页应用生成 skeleton,提升首屏展示体验。

    安装

    1.在package.json文件引入依赖    "vue-skeleton-webpack-plugin": "^1.1.17"

    2.npm install vue-skeleton-webpack-plugin

    使用

    首先创建一个仅使用骨架屏组件的入口文件:
    // src/components/Skeleton/entry-skeleton.js

    import Vue from 'vue'
    // 创建的骨架屏 Vue 实例
    import SkeletonFinanceSubMenuMore from './SkeletonFinanceSubMenuMore'
    import SkeletonInvestmentFinanceHome from './SkeletonInvestmentFinanceHome'
    import SkeletonWalletHome from './SkeletonWalletHome'
    
    export default new Vue({
      components: {
        SkeletonFinanceSubMenuMore,
        SkeletonInvestmentFinanceHome,
        SkeletonWalletHome
      },
      template: `
            <div>
                <SkeletonInvestmentFinanceHome id="skeleton-investmentfinancehome" style="display:none"/>
                <SkeletonFinanceSubMenuMore id="skeleton-financesubmenu-more" style="display:none"/>
                <SkeletonWalletHome id="skeleton-wallethome" style="display:none"/>
            </div>
        `
    })
    

    接下来创建一个用于服务端渲染的 webpack 配置对象,将刚创建的入口文件指定为 entry 依赖入口:
    // 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 utils = require('./utils')
    const config = require('../config')
    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/components/Skeleton/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
    

    在 webpack 中引入插件,在多页或单页应用中pro模式下自动插入路由规则
    (运行打好的包浏览器输入配置的路由路径即可显示效果)亲测试多页显示需要配置绝对路径
    (如 path: '/InvestmentFinance/FinanceSubMenu/more'; path: '/InvestmentFinance/WalletHome')

    // build/webpack.prod.conf.js
    
    const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
    
    
    plugins: [
    // inject skeleton content(DOM & CSS) into HTML
    new SkeletonWebpackPlugin({
      webpackConfig: require('./webpack.skeleton.conf'),
      quiet: true,
      minimize: true,
      router: {
        mode: 'history',
        routes: [
          {
            path: '',
            skeletonId: 'skeleton-investmentfinancehome'
          },
          {
            path: '/InvestmentFinance',
            skeletonId: 'skeleton-investmentfinancehome'
          },
          {
            path: '/InvestmentFinance/FinanceSubMenu/more',
            skeletonId: 'skeleton-financesubmenu-more'
          },
          {
            path: '/InvestmentFinance/WalletHome',
            skeletonId: 'skeleton-wallethome'
          }
        ]
      }
    })
    ]

    开发模式下开发调试骨架屏

    由于 skeleton 的渲染结果在 JS 前端渲染完成后就会被替换,如何在开发时方便的查看呢? 在开发模式中插入 skeleton 对应的路由规则,使多个页面的 skeleton 能像其他路由组件一样被访问,将使开发调试变得更加方便。

    //  src/router/Test /index.js

    module.exports = {
      path: '/Test',
      component: (resolve) => import('@comp/EmptyTmpl').then(module => resolve(module)),
      children: [
        {
          path: 'SkeletonFinanceSubMenuMore',
          name: 'TestSkeletonFinanceSubMenuMore',
          component: (resolve) => import('@comp/Skeleton/SkeletonFinanceSubMenuMore').then(module => resolve(module)),
          meta: {
            title: 'SkeletonFinanceSubMenuMore'
          }
        },
        {
          path: 'SkeletonInvestmentFinanceHome',
          name: 'TestSkeletonInvestmentFinanceHome',
          component: (resolve) => import('@comp/Skeleton/SkeletonInvestmentFinanceHome').then(module => resolve(module)),
          meta: {
            title: 'SkeletonInvestmentFinanceHome'
          }
        },
        {
          path: 'SkeletonWalletHome',
          name: 'TestSkeletonWalletHome',
          component: (resolve) => import('@comp/Skeleton/SkeletonWalletHome').then(module => resolve(module)),
          meta: {
            title: 'SkeletonWalletHome'
          }
        }
      ]
    }
    

     

    //  src/router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          redirect: 'Test'
        },
        {
          path: '*',
          component: (resolve) => import(/* webpackChunkName: 'global-error-page' */'@comp/GlobalErrorPage/GlobalErrorPage').then(module => resolve(module)),
          meta: {
            title: '访问失联',
            subRoot: true,
            closeBtnVisible: true
          }
        },
        // require('./Test/index')
      ],
      scrollBehavior() {
        return {x: 0, y: 0}
      }
    })
    
    展开全文
  • vue首屏优化之骨架屏

    2019-10-09 09:56:26
    为什么要使用骨架屏 在针对SPA应用进行首屏优化的时候,我们是尽可能地减少白屏时间,使首屏内容尽早的展现出来,可因为SPA应用的特性用JS绘制dom,在js未加载完成时dom不会被绘制出来,所以虽然白屏时间可以通过...

    为什么要使用骨架屏

    在针对SPA应用进行首屏优化的时候,我们是尽可能地减少白屏时间,使首屏内容尽早的展现出来,可因为SPA应用的特性用JS绘制dom,在js未加载完成时dom不会被绘制出来,所以虽然白屏时间可以通过减少http请求,压缩请求体积等各种方法来缩短,但根本上是无法清除的。短暂的白屏会被用户不好的体验,常用的做法可以在内容未加载出来前添加一个loading的动画,今天介绍的骨架屏算是loading的一个进阶版。骨架屏是在页面完全渲染之前,用户会看到一个样式简单,绘制了页面大致框架,在感知到页面加载完成时,会替换到骨架屏占位的部分。在现在很多应用中都已经得到试用,如知乎,简书,饿了么等。
    在这里插入图片描述

    实现

    这边以在vue项目中实现为例,我使用的是vue-skeleton-webpack-plugin插件,它将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中,将样式内联到 head 标签中。这样等前端渲染完成时,Vue将使用客户端混合,把挂载点中的骨架屏内容替换成真正的页面内容。

    安装
    npm install vue-skeleton-webpack-plugin
    
    创建骨架屏组件

    和一般创建vue组件一致,在vue中编写骨架屏式样。因为我项目中业务的需要,我是单页面多骨架屏。需要编写两个骨架屏组件文件,分别为Skeleton1.vue和Skeleton2.vue。

    创建骨架屏组件入口文件

    该文件使用上面创建的骨架屏组件

    import Vue from 'vue';
    import Skeleton1 from './Skeleton1';
    import Skeleton2 from './Skeleton2';
    
    export default new Vue({
        components: {
            Skeleton1,
            Skeleton2
        },
        template: `
        <div>
            <skeleton1 id="skeleton1" style="display:none"/>
            <skeleton2 id="skeleton2" style="display:none"/>
        </div>
        `
    });
    
    在webpack文件中配置

    在webpack.prod.conf.js文件中的plugins里添加下面代码,多骨架屏需配置router,根据不同路由展示不同骨架屏组件,单骨架屏可不用配置。

    new SkeletonWebpackPlugin({
      webpackConfig: {
          entry: {
              app: path.resolve(__dirname, '../skeleton/entry-skeleton.js')
          },
          quiet: true,
            minimize: true,
            router: {
                mode: 'history',
                routes: [
                  {
                    path: '/page1',
                    skeletonId: 'skeleton1'
                  },
                  {
                    path: '/page2',
                    skeletonId: 'skeleton2'
                  }
                ]
            }
        }
    })
    
    实现效果

    上述开发完成,即可执行打包,在打包完成后打开打包好的index.html文件可以看到在HEAD中插入了骨架屏的式样,<div id=app>下面的内容替换成了骨架屏的内容,如果是多骨架屏还会插入一段判断路由展示隐藏对应骨架屏的js代码。下面附上实现效果

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

    实现中遇到的问题

    1.配置router未生效,未根据不同router展示不同骨架屏或直接不展示骨架屏。

    这个先排查自己的router配置正不正确。我在确认多遍之后还是发现未生效,去扒了下插件的源码,打了几个日志发现有处取值存在问题,ref取值为options,在options后面加上.webpackConfig,修改之后成功了,我的做法是把代码改了copy出来,单独引用,不走npm安装,不然换了个环境不能每次都去改node_modules文件下的代码。
    在这里插入图片描述

    2.骨架屏式样不正确

    因为我使用了postcss-pxtorem插件,在骨架屏打包出来后,对px都做了一次转rem,本来是flexible.js会根据设备设置根的font-size,但在渲染骨架屏时该js还未引入,导致这是根font-size还是默认的16px,故导致式样出了问题,有几种解决方案:

    • 把flexible.js加载放在前面,或者直接把flexible.js的代码写入index.html里。缺点:骨架屏需要额外的js代码
    • 根据font-size:16px调整计算骨架屏中式样的px大小。缺点:计算繁琐
    • 直接把px改为PX,postcss-pxtorem会跳过不转换。缺点:不能根据设备调整大小。
    展开全文
  • 目前正在做的项目,登录是需要跳转到别人的页面的,导致重定向很多,需要优化一下白屏时间,所以就用到了骨架屏,但是这次用的骨架屏不是自动生成的,还是自己敲的样式,一步步来吧,先从简单的用起 。 先上效果图:...
  • vue优化之骨架屏

    千次阅读 热门讨论 2019-07-01 10:13:29
    如果一个web页面加载内容过多,刷新的时候会有空白页,造成不好的用户体验,但是如果加入骨架屏可以改善这一问题,骨架屏可理解为页面加载前的简单呈现版本,当页面加载完成,骨架屏各个占位区域被实际资源替换,可...

    1. 什么是骨架屏

    如果一个web页面加载内容过多,刷新的时候会有空白页,造成不好的用户体验,但是如果加入骨架屏可以改善这一问题,骨架屏可理解为页面加载前的简单呈现版本,当页面加载完成,骨架屏各个占位区域被实际资源替换,可让用户觉得内容正在加载即将呈现,体验更加流畅。实际应用比较广泛,CSDN,小米商城等很多大型网站都用到了骨架屏方案。

    2.如何实现

    • 不建议: vue框架的原理是替换掉index.html中id为app的div部分,如果加载内容多,这一部分渲染就会慢(如果也不采用按需加载),可以在body部分加入骨架屏需要的图片,但是并不优雅,修改不方便,如果骨架屏内容过多,在这里展示显然不合适,而且无法实现多页面骨架屏,因此不推荐这种
     <body>
         <img src="../static/img/skeleton_bg.jpg" style="width: 100%;height: 100%;position: absolute;left:0;top:0;right:0;bottom:0;margin: auto"/>
         <div id="app"></div>
      </body>
    
    • 建议:如何合理且优雅地实现骨架屏
    • 代码实现:
    1. 安装依赖
      • npm install vue-skeleton-webpack-plugin
    2. 在src目录下新建骨架屏页面Skeleton.vue、入口entry-skeleton.js

      entry-skeleton.js
      import Vue from 'vue'
      import Skeleton from './Skeleton'
      export default new Vue({
        components: {
          Skeleton
        },
        template: '<Skeleton />'
      })
      
      Skeleton.vue
      <!--骨架屏-->
      <template>
        <div class="skeleton">
          <img src="../static/img/skeleton_bg.jpg" />
        </div>
      </template>
      
      <script>
        export default {
          name: 'skeleton',
          methods: {
          }
        }
      </script>
      
      <style scoped>
      img{
        width: 100%;
        height: 100%;
        position: absolute;
        left:0;top:0;
        right:0;
        bottom:0;
        margin: auto
      }
      </style>
      
    3. 创建了骨架页面,不放到index里面也是不行的,因此在打包的时候做下面的处理,在build文件夹里新建文件webpack.skeleton.conf.js,目的是读取entry-skeleton,写入打包配置
      '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
      
    4. 打包,在webpack.prod.conf.js和webpack.dev.conf.js 的plugins部分,加入plugin
      new SkeletonWebpackPlugin({
           webpackConfig: require('./webpack.skeleton.conf'),
           quiet: true,
         }),
      
      运行一下,在加载页面时,有如下效果
      在这里插入图片描述

    点击加入群聊【小程序/HTML/WPF交流】,一起学习交流:663077768

    展开全文
  • vue骨架屏介绍

    千次阅读 2019-07-13 17:47:43
    可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容...
  • vue简单实现骨架屏

    2021-07-03 15:25:10
    vue实现页面加载占位 效果如下 思路与实现   页面加载时用户等待,此时与用户交互的方式通常有等待层、进度条、加载动画等;本次介绍加载占位,把页面即将展示的样子用css背景展示出来,等数据返回后即可进行页面...
  • 和首相关的除了 FP 还有两个指标,分别称为 FCP (First Contentful Paint,页面有效内容的绘制) 和 FMP (First Meaningful Paint,页面有意义的内容绘制)。如果白屏时间过长,用户体验会大打折扣,如果用户网速差...
  • Vue 实现骨架屏(skeleton)

    千次阅读 2020-03-26 10:59:37
    Vue实现骨架屏的步骤: 1.安装骨架屏插件: npm install vue-skeleton-webpack-plugin 2.由于骨架屏插件依赖服务端渲染,再安装vue-server-renderer npm install vue-server-renderer 3.在src>components新建...
  • 本组件库骨架屏的实现也是基于预渲染去实现的,有关于预渲染更详细的介绍请参考这篇文章:处理 Vue 单页面 Meta SEO的另一种思路 下面我们主要介绍其实现步骤,首先我们也是需要配置webpack-plugin,不过已经有实现...
  • 主要介绍了Vue页面骨架屏注入的操作,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 考虑到ssr所要解决的一系列问题,越来越多的APP采用了“骨架屏”的方式去提升用户体验。 小米商城: 一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容: <!DOCTYPE html> <...
  • vue-cli项目首页加载缓慢想要使用骨架屏效果,经过几天的踩坑,这里学习并记录一下vue项目自动生成骨架屏方法。 添加骨架屏,其优势在于: 写于HTML文件中,独立于Vue框架,节省了JS加载时间+JS全局环境创建的...
  • 相比于早些年前后端...由此引申出一系列的优化方法,骨架屏也因此被提出。 1. FCP优化 在 Google 提出的以用户为中心的四个页面性能衡量指标中,FP/FCP可能是开发者们最熟悉的了: 为了优化首屏渲染时间这个指标,
  • 基于Vue骨架屏的实现

    2020-11-15 18:09:59
    骨架屏的实现 作为前端,不可避免的会遇到页面加载比较慢时,页面会有段时间是空白,这个对用户的体验明显是很不友好的。解决的方案有很多种,今天我们谈谈使用骨架屏的实现。
  • 基于Vue骨架屏实现 使用方法 import Skeleton from './index.js' Vue . component ( Skeleton . name , Skeleton ) < div> < p> < span> </ span> . gm-skeleton { background-image : linear-...
  • Vue骨架屏

    2019-08-02 17:55:26
    后来才知道这种模式称之为骨架屏骨架屏的出现无非也是为了提高性能优化并提高用户体验度。并且这种加载模式相比于菊花图,让用户在界面渲染未完成之前可以提前了解到页面的布局。提高了用户的体验度。 在学习了...
  • 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) { ...
  • 骨架屏技术讲解以及使用方法写在前面骨架屏实现方式(原理分析)实现方式(具体实现) 写在前面 现在的前端开发领域,都是前后端分离,前端框架主流的都是 SPA,MPA;这就意味着,页面渲染以及等待的白屏时间,成为...
  • 移动端之骨架屏vue示范)

    千次阅读 2018-12-24 15:33:36
    转自知乎 作者:小蘑菇小哥 ...   让网页展现的更快,官方说法叫做首屏绘制,First Paint 或者简称 FP。 ...首屏时间 FP 并不要求内容是真实的,有效的,有意义的,可交互的...2、一般情况骨架屏和实际内容的结构是类...
  • Vue多页面应用骨架屏添加实践

    千次阅读 2019-02-15 12:50:06
    Vue+Webapck搭建的MPA(多页面应用)添加骨架屏,通过对JS文件加载方式的变更,兼容移动端和PC端浏览器的渲染机制,保证骨架屏的正常显示
  • 什么是骨架屏?可以理解为搭建楼房的架子 使用场景 下面是导航和 商品的数据,一开始打开页面的时候肯定是ajax请求数据渲染出来的 但是呢一打开就是空空的一片,影响用户的体验 这时候就用到了骨架屏骨架...
  • 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。 今天我们就讲一下,如何在Vue3中...
  • 1、VUE项目 skeleton.vue插件 <template> <div> <div class="wrap" :style="{'width':systemInfo.width+'px','height':systemInfo.height+'px', 'background-color':bgcolor}"> <div v-...
  • 主要介绍了vue-cli 构建骨架屏的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue项目添加骨架屏

    2019-04-23 16:24:11
    其中构建时使用 Vue 预渲染骨架屏一节,为开发者提供了减少白屏时间,提升用户感知体验的新思路。本文将借鉴这一思路,尝试为 Vue 项目添加骨架屏骨架屏是什么? 在 Google 提出的以用户为中心的四个页面性能衡量...
  • vue项目中使用骨架屏

    千次阅读 多人点赞 2021-05-15 09:17:48
    现在的应用开发,基本上都是前后端分离的,前端主流...骨架屏:举个例子:其实就是在模版文件中id=app容器下面写想要展示的效果,在new Vue(option)之后,该id下的内容就被替换了( 这时候,可能Vue编译生成的内容还没
  • 使用vue-skeleton-webpack-plugin vuecli3配置 插件原理 官方示例 安装插件:npm i vue-skeleton-webpack-plugin -D 在App.vue同级目录下创建Skeleton.vue 如下 继续同级目录下创建entry-skeleton.js 如下(这里...
  • vue首屏骨架屏实现步骤 npm install vue-skeleton-webpack-plugin -D 在src目录下创建Skeleton文件夹,添加Skeleton.js文件,内容如下 <template> <div class="skeleton-wrapper"> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,790
精华内容 716
关键字:

骨架屏vue

vue 订阅