Vue SkeletonWebpackPlugin骨架屏实战
基于 vue-skeleton-webpack-plugin 的骨架屏实战，挺适合现在这种要优化白屏体验的场景。你有没有遇到过，点开页面得等个两三秒，白的啥都没有？嗯，挺抓狂的。这时候骨架屏就派上用场了。
页面还没加载完，先给你一个“假装已经加载了”的壳子，视觉上顺多。本文用的不是自动生成的骨架屏，而是自己撸样式，一个页面一个来，灵活度比较高。
项目是基于 Vue CLI 3.x，通过 npm install vue-skeleton-webpack-plugin 安装插件。在 vue.config.js 里配下 SkeletonWebpackPlugin，指定骨架屏的入口 app，再设置下路由映射。比如首页用 skeleton-home，消息页用 skeleton-message，都能按需展示。
骨架屏组件也挺，用 .vue 文件写静态结构，配点 CSS 样式，比如 background: #eee、border-radius: 4px 这种，容易就能仿出页面的大致布局。
如果你页面跳转多，数据量也不小，用骨架屏确实能让体验提升不少。想试的话，记得组件 ID 和配置里的一致，不然加载不出来哦。
文件大小：162.83KB
评论区