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

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

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