记录使用Vue过程中的各种插件及教程（不定时更新）

最新推荐文章于 2023-03-02 08:52:54 发布

weixin_34306593

最新推荐文章于 2023-03-02 08:52:54 发布

阅读量365

点赞数 1

文章标签： javascript 前端 ui ViewUI

原文链接：https://segmentfault.com/a/1190000016323231

版权

本文为整理记录本人从18年初开始上手使用Vue以后，针对项目中业务需求所用到的各种插件及教程整理?。

目前市场上常用的三大Vue桌面端UI组件库：Element、iView、Ant Design Vue，内置的组件，基本能满足大部分项目所需的业务功能需求。

以下为常用业务功能需求、插件及教程整理(包含全家桶)：

1、axios - 简书。链接：http://www.jianshu.com/p/df46...
2、vue中axios的封装 - 火星黑洞 - 博客园。链接：https://www.cnblogs.com/ldlx-...
3、理解vuex -- vue的状态管理模式 - 个人文章 - SegmentFault 思否。链接：https://segmentfault.com/a/11...
4、vuex最简单、最详细的入门文档 - 前端研发工程师 - 梁晓谊 - SegmentFault 思否。链接：https://segmentfault.com/a/11...
5、Vuex，从入门到入门。链接：https://zhuanlan.zhihu.com/p/...
6、Vue:在Vue中使用echarts - 简书。链接：https://www.jianshu.com/p/799...
7、做一个具有异步加载特性的 echarts-vue 组件 - DB.Reid - SegmentFault 思否。链接：https://segmentfault.com/a/11...
8、做一个可复用的 echarts-vue 组件（延迟动画加载） - 简书。链接：https://www.jianshu.com/p/222...
9、vue+mockjs 模拟数据，实现前后端分离开发 - Jason齐齐 - 博客园。链接：https://www.cnblogs.com/jason...
10、Vue使用less - CSDN博客。链接：https://blog.csdn.net/qq_3574...
11、Vue中如何定义全局函数 - CSDN博客。链接：https://blog.csdn.net/sinat_1...
12、vue.js - vue项目如何引入babel-polyfill - SegmentFault 思否。链接：https://segmentfault.com/q/10...
13、另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新 - 冰扬 - SegmentFault 思否。链接：https://segmentfault.com/a/11...
14、Vue.js中 watch 的高级用法 - CSDN博客。链接：https://blog.csdn.net/wandoum...
15、vue.js如何获取自定义元素属性参数值<div data-link="123">？ - 知乎。链接：https://www.zhihu.com/questio...
16、vue编程式路由实现新窗口打开 - 逍遥云天 - 博客园。链接：https://www.cnblogs.com/xyyt/...
17、vue-i18n ，vue项目中如何实现国际化 - CSDN博客。链接：https://blog.csdn.net/DOCALLE...
18、Vue 后台管理控制用户权限的解决方案？ - 知乎。链接：https://www.zhihu.com/questio...
19、用addRoutes实现动态路由 | 前端路上。链接：https://refined-x.com/2017/09...
20、Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案) - 掘金。链接：https://juejin.im/post/59fa92...
21、2018 vue前端面试题 - 实现丰盛 - 博客园。链接：https://www.cnblogs.com/sicha...
22、处理 Vue 单页面 Meta SEO的另一种思路。链接：https://zhuanlan.zhihu.com/p/...
23、关于vue项目的seo问题 - CSDN博客。链接：https://blog.csdn.net/codeliu...
24、Vue响应式原理源码浅析 - 掘金。链接：https://juejin.im/post/59f2cf...

以下为第三方插件及教程整理：

1、vue-lazyload - 图片懒加载 - npm。链接：https://www.npmjs.com/package...
2、Moment.js - 日期格式化中文网。链接：http://momentjs.cn/
3、Vue- 中国省市区三级联动。链接：https://github.com/dwqs/vue-a...
4、vue-photo-preview - 全屏图片预览 - npm。链接：https://www.npmjs.com/package...
5、vue-ripple-directive——点击水波纹。链接：https://www.npmjs.com/package...
6、qrcode.vue - 生成二维码图片 - npm。链接：https://www.npmjs.com/package...
7、clipboard - 实现复制文本到剪贴板功能 - npm。链接：https://www.npmjs.com/package...
8、vue 使用clipboard实现复制功能 - CSDN博客。链接：https://blog.csdn.net/guxuehu...
9、vue-count-to——数字跳动动画。链接：http://panjiachen.github.io/c...
10、NProgress - 全站顶部loading进度条插件。链接：http://ricostacruz.com/nprogr...
11、vue-fullpage.js - 全屏滚动插件 - npm。链接：https://www.npmjs.com/package...
12、介绍 · better-scroll - 滚动插件。链接：http://ustbhuangyi.github.io/...
13、BetterScroll：可能是目前最好用的移动端滚动插件 - 掘金。链接：https://juejin.im/post/59b777...
14、Vue导出页面为PDF格式 - CSDN博客。链接：https://blog.csdn.net/pratise...
15、vue的无缝滚动组件。链接：https://github.com/chenxuan00...
16、vue相关的开源项目 - CSDN博客。链接：https://blog.csdn.net/aaa333q...
17、video插件：https://surmon-china.github.i...
以下为video.js实现的公共组件videoPlayer.vue：

<template>
    <section class="video-player-box">
        <!--video-player标签的class必须设置成“video-player vjs-custom-skin”，引入的样式才能起作用。-->
        <video-player class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @ended="onPlayerEnded($event)"
            @loadeddata="onPlayerLoadeddata($event)"
            @waiting="onPlayerWaiting($event)"
            @playing="onPlayerPlaying($event)"
            @timeupdate="onPlayerTimeupdate($event)"
            @canplay="onPlayerCanplay($event)"
            @canplaythrough="onPlayerCanplaythrough($event)"
            @ready="playerReadied"
            @statechanged="playerStateChanged($event)">
        </video-player>
    </section>
</template>

<script>
    require('video.js/dist/video-js.css');
    require('vue-video-player/src/custom-theme.css');
    import { videoPlayer } from 'vue-video-player';
    
    export default {
        props: {
            //播放视频的URL
            videoURL: {
                type: String,
                default: ''
            },
            //在视频开始播放之前显示的图像的URL
            posterURL: {
                type: String,
                default: ''
            },
            //是否暂停播放
            isPause: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                playerOptions : {
                    width: document.documentElement.clientWidth,//设置视频播放器的显示宽度（以像素为单位）
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放快进速度
                    autoplay: false, //自动播放视频
                    muted: false, // 关闭视频的声音通道（静音）。
                    loop: false, // 循环播放。
                    // 向浏览器建议在<video>加载元素后视频数据是否应该开始下载。支持的值是：
                    // 'auto'：立即开始加载视频（如果浏览器支持）。某些移动设备不会预加载视频以保护其用户的带宽/数据使用，这往往是最常见和推荐的值，因为它允许浏览器选择最佳行为。
                    // 'metadata'：仅加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据将通过下载几帧视频来加载。
                    // 'none'：不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。
                    preload: 'none',
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流体模式，并在计算播放器的动态大小时使用该值。该值应表示比率 - 由冒号（例如"16:9"或"4:3"）分隔的两个数字。
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: 'video/mp4',
                        src: 'https://imf-video-export.oss-cn-hangzhou.aliyuncs.com/video/d6f51f1f-6e49-4685-9256-758066b39f11.mp4' //要嵌入的视频源的源URL，必填项，缺失此属性会造成播放时底部controlBar控件都不工作
                    }],
                    playsinline: true,//支持小窗内联播放，IOS手机上的小窗口播放，安卓微信浏览器是X5内核，此属性不支持
                    // 视频格式测试：
                    // type: "video/webm", // ok,用ogg也可打开
                    // type: "video/ogg", // ok,用webm也可打开
                    // type: "video/3gp", //ok
                    // type: "video/mp4", // ok
                    // type: "video/avi", //打不开
                    // type: "video/flv", // 打不开
                    // type: "video/mkv", // 打不开
                    // type: "video/mov", // 打不开
                    // type: "video/mpg", // 打不开
                    // type: "video/swf", // 打不开
                    // type: "video/ts", // 打不开
                    // type: "video/wmv", // 打不开
                    // type: "video/vob", // 没转化
                    // type: "video/mxf", // 转化出错
                    // type: "video/rm", // 转化出错
                    poster: this.posterURL, //在视频开始播放之前显示的图像的URL。这通常是视频的一个框架或自定义标题屏幕。一旦用户点击“播放”，图像就会消失。
                    notSupportedMessage: '此视频暂无法播放，请稍后再试！', //允许覆盖Video.js无法播放媒体源时显示的默认消息
                    controlBar: {
                        timeDivider: true,//当前时间和持续时间之间的分隔符。如果在设计中不需要，可以隐藏。
                        durationDisplay: true,//显示时间
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                },

            }
        },
        computed: {
            player () {
                return this.$refs.videoPlayer.player
            }
        },
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
            //监听播放
            onPlayerPlay (player) {
                console.log(player);
                // this.$refs.videoPlayer.player.play();
            },
            //监听暂停
            onPlayerPause (player) {
                console.log(player);
                // this.$refs.videoPlayer.player.pause();
            },
            //监听播放状态改变
            playerStateChanged (player) {
                // console.log(player);
            },
            //监听媒体是否已到达结尾，播放完
            onPlayerEnded (player) {
                // console.log(player);
            },
            //DOM元素上的readyState更改导致播放停止。
            onPlayerWaiting (player) {
                // console.log(player);
            },
            //媒体不再被禁止播放，并且已开始播放。
            onPlayerPlaying (player) {
                // console.log(player);
            },
            //当播放器在当前播放位置下载数据时触发
            onPlayerLoadeddata (player) {
                // console.log(player);
            },
            //当前播放位置发生变化时触发。
            onPlayerTimeupdate (player) {
                // console.log(player);
            },
            //媒体的readyState为HAVE_FUTURE_DATA或更高
            onPlayerCanplay(player) {
                // console.log('player Canplay!', player)
            },
            //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
            onPlayerCanplaythrough(player) {
                // console.log('player Canplaythrough!', player)
            },
            //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
            playerReadied(player) {
                // seek to 10s
                console.log('example player 1 readied', player);
                // player.currentTime(0)
                // console.log('example 01: the player is readied', player)
            }


        },
        watch: {
            //更改视频URL
            videoURL(val) {
                if(val !== ''){
                    this.$refs.videoPlayer.player.src(val);
                }
            },
            //在视频开始播放之前显示的图像的URL
            posterURL(val) {
                if(val !== ''){
                    this.$refs.videoPlayer.player.poster(val);
                }
            },
            //是否暂停播放
            isPause(val) {
                console.log('isPause', val);
                if(val){
                    this.$refs.videoPlayer.player.pause();
                }
            },

        },
        components: {
            videoPlayer
        }
    }
</script>

<style lang="less" type="text/less">
    //修改播放按钮的样式
    .video-player-box{
        .video-js{
            .vjs-big-play-button{
                width: 2em;
                height: 2em;
                line-height: 2em;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                border-radius: 50%;
                margin: 0 !important;
                margin-top: 0 !important;
            }
        }
    }
</style>

大概就是这些配置即可完成基本的播放、暂停、视频列表切换播放（切换视频的逻辑在父组件写）等功能。但是移动端页面在微信浏览器打开会有个问题，点击视频播放按钮会默认全屏并且黑屏，video标签不能设置这两个属性，x5-video-player-type='h5' x5-video-player-fullscreen='true'，或者设置为空即可。但是video.js插件的官方文档没找到相关的option属性配置，所以后来放弃了这个插件，改为使用原生video标签来实现需求，可参考：

<template>
    <section class="video-player-box">
        //controlsList="nodownload" 此属性是取消浏览器原生video标签的下载功能。
        <video width="100%" ref="videoPlayer" controls controlsList="nodownload" playsinline="playsinline" webkit-playsinline="true" preload="none" :src="videoURL" :poster="posterURL"></video>
    </section>
</template>

<script>
    export default {
        props: {
            //播放视频的URL
            videoURL: {
                type: String,
                default: ''
            },
            //在视频开始播放之前显示的图像的URL
            posterURL: {
                type: String,
                default: ''
            },
            //是否暂停播放
            isPause: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
        },
        watch: {
            //更改视频URL
            videoURL(val) {
                if(val !== ''){
                    this.$refs.videoPlayer.src = val;
                }
            },
            //在视频开始播放之前显示的图像的URL
            posterURL(val) {
                if(val !== ''){
                    this.$refs.videoPlayer.poster = val;
                }
            },
            //是否暂停播放
            isPause(val) {
                if(val){
                    this.$refs.videoPlayer.pause();
                }
            },

        },
        components: {
        }
    }
</script>

<style lang="less" type="text/less">
</style>

这样的话，移动端页面在安卓微信浏览器里的播放效果就正常了，如果产品的播放视频功能不要求自定义样式，那么像这样用video原生标签就挺方便的，而且每个浏览器的video标签的样式都不一样，Safari的更好看些。