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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
浅谈在不使用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部分常见问题总结
2008/03/27 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
激活 ActiveX 控件
2006/10/09 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python tkinter label 更新方法
2018/10/11 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
培训心得体会
2013/12/29 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书