zoukankan      html  css  js  c++  java
  • vue骨架屏制作

    1.需要使用到的插件:

    vue-skeleton-webpack-plugin插件

    2.建立骨架屏示例

        新建skeleton.vue文件

    <template>
      <div class="skeleton1-wrapper">我是骨架屏1</div>
    </template>
    <script>
    export default {
      name: "skeleton",
      data () {
        return {
        };
      }
    }
    </script>
    <style lang="less" scoped>
    </style>

        新建骨架屏配置文件 skeleton.js

    // skeleton.js
    import Vue from 'vue';
    import Skeleton1 from './skeleton.vue';
    
    export default new Vue({
        components: {
            Skeleton1,
        },
        template: `
           <div style='height: 100%;'>
               <skeleton1 id="skeleton1" style="display:none"/>
           </div>
        `
    })

    3.vue.config.js配置

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

    const path = require('path')
    const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin') 
    module.exports
    = { publicPath: process.env.NODE_ENV === 'production' ? './' : './', configureWebpack: (config) => { config.plugins.push(new SkeletonWebpackPlugin({ webpackConfig: { entry: { app: path.join(__dirname, './skeleton.js'), }, }, minimize: true, quiet: true, router: {
    mode:'history',//只支持history路由 routes: [ { path:
    '/home', //和router.js中的路径一样就行 skeletonId: 'skeleton1' //之前的id } ] } })) } }

     

  • 相关阅读:
    Java日期时间API系列1-----Jdk7及以前的日期时间类
    Redis设置密码,保护数据安全
    Java SE 8 并发增强
    Java8并发教程:Threads和Executors
    MySQL5.7增量备份恢复全实战
    HashSet HashMap 源码阅读笔记
    操作系统知识点
    Window批处理命令
    JS典型题
    SiteMesh装饰模式
  • 原文地址:https://www.cnblogs.com/lcosima/p/14285083.html
Copyright © 2011-2022 走看看