vue-cli 构建骨架屏的方法示例


Posted in Javascript onNovember 08, 2018

脚手架不说了,提前搭建好

然后安装 vue-skeleton-webpack-plugin

npm install vue-skeleton-webpack-plugin

创建文件 skeleton.js和skeleton.vue

skeleton.js

import Vue from 'vue'

import Skeleton from './Skeleton.vue'


export default new Vue({

components: {

Skeleton

},

template: '<skeleton />'

})

skeleton.vue

我的skeleton.vue不知为何<style>标签写在外部没有加载进去,故写到<template>内

样式和模板可以自己修改

<template>

<div class="skeleton-wrapper">
<style>
.skeleton {
padding: 10px;
}

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content-bottom,
.skeleton .skeleton-content {
background: rgba(194, 207, 214,.5);
background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.15) 25%, transparent 25%);
background-size: 20rem 20rem;
animation: skeleton-stripes 1s linear infinite;
margin: 0 auto 30px;
text-align: center;
color: darkgray;
}

.skeleton-head {
width: 100px;
height: 60px;
float: left;
}

.skeleton-body {
margin-left: 110px;
}

.skeleton-title {
width: 90%;
height: 60px;
line-height: 60px;
}

.skeleton-content {
width: 60%;
height: 40px;
background: rgba(194, 207, 214,.3)!important;
}
.skeleton-content-bottom {
width: 40%;
height: 40px;
margin: 0 auto 30px 20%!important;
background: rgba(194, 207, 214,.3)!important;
}
@keyframes skeleton-stripes {
from {
background-position: 0 0 ;
}
to {
background-position: 20rem 0;
}
}

</style>
<header class="skeleton-header"></header>
<section class="skeleton-block">
<div class="skeleton">
<div class="skeleton-head"></div>
<div class="skeleton-body">
<div class="skeleton-title">加载中</div>
<div class="skeleton-content"></div>
<div class="skeleton-content-bottom"></div>
<div class="skeleton-content"></div>
<div class="skeleton-content-bottom"></div>
<div class="skeleton-content"></div>
<div class="skeleton-content-bottom"></div>
<div class="skeleton-content"></div>
<div class="skeleton-content-bottom"></div>
<div class="skeleton-content"></div>
</div>
</div>
</section>
</div>
</template>

<script>
export default {
name: 'skeleton'
}
</script>

在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')

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

module.exports = merge(baseWebpackConfig, {
target: 'node',
devtool: false,
entry: {
//指向自己的skeleton.js路径
app: resolve('../src/renderer/skeleton/skeleton.js')
},
output: Object.assign({}, baseWebpackConfig.output, {
libraryTarget: 'commonjs2'
}),
externals: nodeExternals({
whitelist: /\.css$/
}),
plugins: []
})

大功告成

vue-skeleton-webpack-plugin 可以 使用多个 骨架屏 ,具体的可以查看官网地址: https://github.com/lavas-project/vue-skeleton-webpack-plugin

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html5+javascript制作简易画板附图
Apr 25 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 #Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 #Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 #Javascript
Angular设置别名alias的方法
Nov 08 #Javascript
vue-cli安装使用流程步骤详解
Nov 08 #Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 #Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 #Javascript
You might like
一段防盗连的PHP代码
2006/12/06 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现飞机大战
2018/09/11 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
高中数学教师求职信
2013/10/30 职场文书
小学生家长寄语
2014/04/02 职场文书
设计师求职信
2014/07/01 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python
python垃圾回收机制原理分析
2022/04/13 Python