52、vue-skeleton-webpack-plugin骨架屏

Posted 2023-05-08

参考技术A

这是一个基于 Vue 的 webpack 插件，为单页/多页应用生成骨架屏 skeleton，减少白屏时间，在页面完全渲染之前提升用户感知体验。

支持 webpack@3 和 webpack@4，支持 Hot reload。

参考了 饿了么的 PWA 升级实践 一文， 使用服务端渲染在构建时渲染 skeleton 组件，将 DOM 和样式内联到最终输出的 html 中。

另外，为了开发时调试方便，会将对应路由写入 router.js 中，可通过 /skeleton 路由访问。

安装：

运行测试用例：

在 webpack 中引入插件：

开发模式已经支持 hot reload，该参数不再需要。

如果你的项目是使用 Lavas 创建的，可参考 Lavas Appshell模版 和 Lavas MPA模版 中的应用。

如果你的项目是使用 vue-cli 创建的，可以参考基于 Vue Webpack 模板应用这个插件的例子： SPA 中单个 Skeleton：
修改的文件如下： build/webpack.prod.conf.js、build/webpack.dev.conf.js
添加的文件如下： build/webpack.skeleton.conf、src/utils/Skeleton.vue、src/utils/enter-skeleton.js

SPA 中多个 Skeleton:

或者你可以参考 examples 下的测试用例，其中也包含了单页和多页情况，具体如下：

插件需要使用与 Webpack 版本配套的插件进行样式分离。

运行出现如下错误：

由于插件使用了 Vue 服务端渲染在构建时渲染 skeleton 组件，将 DOM 和样式内联到最终输出的 html 中。 因此在给 skeleton 使用的 Webpack 配置对象中需要开启 样式分离 ，将 skeleton 使用的样式从 JS 中分离出来。

在 Webpack 中样式分离是通过 extract-text-webpack-plugin 插件实现的。因此在 webpack.skeleton.config 中必须正确配置该插件。

以使用 vue-cli 创建的项目为例，如果你的 webpack.skeleton.conf 继承自 webpack.base.conf ，在开发模式下是默认关闭样式分离的，因此需要修改，可参考 修改方案 。

vue怎么加滚动的字幕

参考技术A 　　vue添加滚动字幕的方法如下：

　　1、进入vue，点击创作视频选项上传视频素材。

　　2、滑动页面右侧的列表，选择编辑的功能即可添加滚动字幕。

　　VUE是iOS和Android平台上的一款Vlog社区与编辑工具。允许用户通过简单的操作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活。还可以在社区直接浏览他人发布的Vlog，与Vloggers互动。随着手机摄像头的发展，越来越多的人开始使用手机拍照和摄像。摄像一般来说要比拍照门槛高，但是视频传播的信息量又远大于照片。VUE就诞生在这样的背景下，希望用拍照一样简单的操作，帮助用户在手机上拍摄精美的短视频。成立三年的VUE给人的印象是低调而缓慢。2016年3月成立，VUE一直安安静静扮演着一个视频工具的角色，一路拿到了真格基金、贝塔斯曼、九合创投、愉悦资本等机构的投资，到2019年，总安装用户突破1亿。