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

 更新时间:2018年11月08日 14:54:25   作者:web窝   我要评论

这篇文章主要介绍了vue-cli 构建骨架屏的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

然后安装 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

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

相关文章

  • iView-admin 动态路由问题的解决方法

    iView-admin 动态路由问题的解决方法

    这篇文章主要介绍了iView-admin 动态路由问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-10-10
  • 浅谈 vue 中的 watcher

    浅谈 vue 中的 watcher

    这篇文章主要介绍了vue 中的 watcher的相关资料,需要的朋友可以参考下
    2017-12-12
  • vue多级复杂列表展开/折叠及全选/分组全选实现

    vue多级复杂列表展开/折叠及全选/分组全选实现

    这篇文章主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 在Vue-cli里应用Vuex的state和mutations方法

    在Vue-cli里应用Vuex的state和mutations方法

    今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解基于Vue-cli搭建的项目如何和后台交互

    详解基于Vue-cli搭建的项目如何和后台交互

    这篇文章主要介绍了详解基于Vue-cli搭建的项目如何和后台交互,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue地区选择组件教程详解

    vue地区选择组件教程详解

    这篇文章主要介绍了vue地区选择组件主要用于全国地区数据的操作,包括省,市,区三级联动,地区数据的添加和删除,本文重点给大家介绍vue地区选择组件教程详解,需要的朋友参考下吧
    2018-05-05
  • 如何在vue中使用ts的示例代码

    如何在vue中使用ts的示例代码

    本篇文章主要介绍了如何在vue中使用ts的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue组件化开发思考

    Vue组件化开发思考

    这篇文章主要介绍了Vue组件化开发的思考以及相关的原理介绍,如果你对此有兴趣,可以学习参考下。
    2018-02-02
  • Vue数据驱动模拟实现3

    Vue数据驱动模拟实现3

    这篇文章主要为大家详细介绍了Vue数据驱动模拟实现,教大家如何在某个对象中,新增某个属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Vue2.x中的父子组件相互通信的实现方法

    Vue2.x中的父子组件相互通信的实现方法

    这篇文章主要介绍了Vue2.x中的父子组件相互通信,需要的朋友可以参考下
    2017-05-05

最新评论