骨架屏的实现

关于骨架屏和懒加载的实现

---

骨架屏(Skeleton Screens)在需要等待加载内容的位置提供一个占位图形组合,渐进式加载数据,相较于以前的loading动画 骨架屏能够带来更好的用户体验

使用场景

1. 网络较慢，需要长时间等待加载处理的情况下。
2. 图文信息内容较多的列表/卡片中。
3. 只适合用在第一次加载数据的场景。

优缺点

  优点：

    1. 让应用程序感觉更有表现力，吸引更多的注意力。

    2. 内容还在加载中，用户也可以自由地滚动并与应用程序交互。

  缺点：

    1. 当页面结构变化时，骨架屏也需要变化

    2. 没有在根本上解决白屏问题

三方插件

• vue-server-renderer
• vue-skeleton-webpack-plugin
• page-skeleton-webpack-plugin

关于vue-skeleton-webpack-plugin 的使用

  1. 加载依赖包
npm install vue-skeleton-webpack-plugin
  2. 创建骨架屏组件 skeleton.vue

  3. 在webpack.dev.conf.js 和webpack.prod.conf.js中引入插件

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

plugins: [
 new webpack.DefinePlugin({
   'process.env': require('../config/dev.env'),
   'webpackConfig': {
     entry: {
         app: resolve('./src/components/public/entry-skeleton.js')
     }
 }
 })
]

  4. 运行代码，可以看到效果
npm run dev

  5. 如果你想做多页面的骨架屏，可以在webpack.dev.conf.js页面中修改代码

      webpackConfig: {
        entry: {
            app: resolve('./src/components/entry-skeleton.js')
        },
    },
    router: {
      //和项目路由中的模式保持一致哦
        mode: 'history',
        routes: [{
                path: '/',
                skeletonId: skeleton
            },
            {
                path: '/index',
                skeletonId: skeleton
            },
        ]
    }
    })

ps:如果不想手写代码，就让你们的UI小朋友费点心用base64的图片来作为骨架屏吧~