Vue 实现骨架屏（skeleton）

Vue实现骨架屏的步骤：
1.安装骨架屏插件：

npm install vue-skeleton-webpack-plugin

2.由于骨架屏插件依赖服务端渲染，再安装vue-server-renderer

npm install vue-server-renderer

3.在src>components新建skeleton目录，里面创建index.vue跟entry.skeleton.js，如下图：

4.在index,vue中写入骨架屏的样式，通常与首页的布局一致，例如：


<template><div class="skeleton"><section></section><div class="center"><ul class="dec"><li v-for="n in 2" :key="n"><span></span><span></span></li><li><span></span></li></ul><ul class="features"><li v-for="n in 3" :key="n"><i></i><span></span></li></ul></div><div class="detail"><ul><li v-for="n in 3" :key="n"><span></span><span></span></li></ul><p></p></div></div>
</template>
<style lang="less">@import "../less/public";@skeleton:#eee;.skeleton{width: 100%;height: 100vh;overflow: hidden;background: #fff;section{width: 100%;height: 205px;background:@skeleton;animation: sport .2s;}.center{.dec{li{width: 100%;height: 34px;margin: 30px 0;padding: 0 @padding20px;box-sizing: border-box;display: flex;justify-content: space-between;span{width: 100px;background: @skeleton;}}li:first-of-type{height: 44px;}}.features{display: flex;align-content: center;li{flex: 1;text-align: center;i{display: inline-block;width: 60px;height: 60px;background: @skeleton;border-radius: 50%;vertical-align: middle;}span{position: relative;left:-20px;top:-6px;display: inline-block;width: 120px;height: 40px;background: @skeleton;}}}}.detail{margin-top: @padding20px;ul{li{width: 100%;display: flex;height: 44px;padding: 0 @padding20px;box-sizing: border-box;justify-content: space-between;margin-bottom: 10px;span{width: 300px;background: @skeleton;}span:first-of-type{width: 150px;}}li:first-of-type{height: 54px;}}p{width: 60%;height: 54px ;background: @skeleton;margin-left: @padding20px;margin-top: @padding20px;}}}@keyframes sport {0%{background: #fff}100%{background: @skeleton}}
</style>

5.配置entry.skeleton.js的入口文件：

import Vue from 'vue'
import Skeleton from './index'
export default new Vue({components: {Skeleton},template: '<Skeleton/>'
})

6.在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.cssSourceMapfunction 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

7.在webpack.dev.conf.js跟webpack.pro.conf.js或者统一在webpack.base.conf.js中分别引入：

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

然后在plugins中分别导入：

    new SkeletonWebpackPlugin({webpackConfig: require('./webpack.skeleton.conf'),quiet: true,}),

以上为Vue项目骨架屏的全部配置过程！！！

Vue 实现骨架屏（skeleton）相关推荐

Vue页面骨架屏（一）
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...
Android中骨架屏(Skeleton Screen)使用
Android中骨架屏(Skeleton Screen)使用 1.什么是骨架屏页面在没有完全渲染完成之前,用户会看到一个占位的样式,用以描绘了当前页面的大致框架,加载完成后,最终骨架屏中各个占位部分 ...
vue-cli 构建的项目如何加入骨架屏 skeleton
在使用 Native APP 时我们经常可以看到在实际内容加载出来之前会有一些占位图片,因为其结构和实际加载内容相似(如新闻页面加载之前也会有一个纵向列表),因此让用户感知到自己的页面正在加载中,体 ...
#周分享#骨架屏[Skeleton Screen]
什么是骨架屏骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容.常用于文章列表.动态列表页等相对比较规则的列表页面是进度条和菊花圈的 ...
CSS实现骨架屏 Skeleton 效果
转自:掘金 - CodingStartup起码课 https://juejin.cn/post/6916748944789733390 现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方 ...
【CSS】骨架屏 Skeleton 效果
点击上方关注前端技术江湖,一起学习,天天进步现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而提升用户体验: 这个效果中文叫作骨架屏,英文叫 Skeleto ...
骨架屏 (Skeleton Screen)
https://blog.csdn.net/lmh_19941113/article/details/87979419
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏
如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好,此前看过很多专栏以及文章,此次实践中还是遇到需要学习的部分. 对于骨架屏或者占 ...
vue中获取到的为什么图片地址会自动拼接上localhost:8080_前端骨架屏自动生成方案（很实用！收藏）...
来源:花满楼 https://zhuanlan.zhihu.com/p/74403911 什么是骨架屏? 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示 ...

Vue 实现骨架屏（skeleton）

Vue 实现骨架屏（skeleton）相关推荐

最新文章

热门文章