目前市場上經常使用的三大Vue桌面端UI組件庫:Element、iView、Ant Design Vue,內置的組件,基本能知足大部分項目所需的業務功能需求。css
如下爲經常使用業務功能需求、插件及教程整理(包含全家桶):html
一、axios - 簡書。連接:http://www.jianshu.com/p/df46...
二、vue中axios的封裝 - 火星黑洞 - 博客園。連接:https://www.cnblogs.com/ldlx-...
三、理解vuex -- vue的狀態管理模式 - 我的文章 - SegmentFault 思否。連接:https://segmentfault.com/a/11...
四、vuex最簡單、最詳細的入門文檔 - 前端研發工程師 - 梁曉誼 - SegmentFault 思否。連接:https://segmentfault.com/a/11...
五、Vuex,從入門到入門。連接:https://zhuanlan.zhihu.com/p/...
六、Vue:在Vue中使用echarts - 簡書。連接:https://www.jianshu.com/p/799...
七、作一個具備異步加載特性的 echarts-vue 組件 - DB.Reid - SegmentFault 思否。連接:https://segmentfault.com/a/11...
八、作一個可複用的 echarts-vue 組件(延遲動畫加載) - 簡書。連接:https://www.jianshu.com/p/222...
九、vue+mockjs 模擬數據,實現先後端分離開發 - Jason齊齊 - 博客園。連接:https://www.cnblogs.com/jason...
十、Vue使用less - CSDN博客。連接:https://blog.csdn.net/qq_3574...
十一、Vue中如何定義全局函數 - CSDN博客。連接:https://blog.csdn.net/sinat_1...
十二、vue.js - vue項目如何引入babel-polyfill - SegmentFault 思否。連接:https://segmentfault.com/q/10...
1三、另闢蹊徑:vue單頁面,多路由,前進刷新,後退不刷新 - 冰揚 - SegmentFault 思否。連接:https://segmentfault.com/a/11...
1四、Vue.js中 watch 的高級用法 - CSDN博客。連接:https://blog.csdn.net/wandoum...
1五、vue.js如何獲取自定義元素屬性參數值<div data-link="123">? - 知乎。連接:https://www.zhihu.com/questio...
1六、vue編程式路由實現新窗口打開 - 逍遙雲天 - 博客園。連接:https://www.cnblogs.com/xyyt/...
1七、vue-i18n ,vue項目中如何實現國際化 - CSDN博客。連接:https://blog.csdn.net/DOCALLE...
1八、Vue 後臺管理控制用戶權限的解決方案? - 知乎。連接:https://www.zhihu.com/questio...
1九、用addRoutes實現動態路由 | 前端路上。連接:https://refined-x.com/2017/09...
20、Vue 脫坑記 - 查漏補缺(彙總下羣裏高頻詢問的xxx及給出不靠譜的解決方案) - 掘金。連接:https://juejin.im/post/59fa92...
2一、2018 vue前端面試題 - 實現豐盛 - 博客園。連接:https://www.cnblogs.com/sicha...
2二、處理 Vue 單頁面 Meta SEO的另外一種思路。連接:https://zhuanlan.zhihu.com/p/...
2三、關於vue項目的seo問題 - CSDN博客。連接:https://blog.csdn.net/codeliu...
2四、Vue響應式原理源碼淺析 - 掘金。連接:https://juejin.im/post/59f2cf...前端
如下爲第三方插件及教程整理:vue
一、vue-lazyload - 圖片懶加載 - npm。連接:https://www.npmjs.com/package...
二、Moment.js - 日期格式化 中文網。連接:http://momentjs.cn/
三、Vue- 中國省市區三級聯動。連接:https://github.com/dwqs/vue-a...
四、vue-photo-preview - 全屏圖片預覽 - npm。連接:https://www.npmjs.com/package...
五、vue-ripple-directive——點擊水波紋。連接:https://www.npmjs.com/package...
六、qrcode.vue - 生成二維碼圖片 - npm。連接:https://www.npmjs.com/package...
七、clipboard - 實現複製文本到剪貼板功能 - npm。連接:https://www.npmjs.com/package...
八、vue 使用clipboard實現複製功能 - CSDN博客。連接:https://blog.csdn.net/guxuehu...
九、vue-count-to——數字跳動動畫。連接:http://panjiachen.github.io/c...
十、NProgress - 全站頂部loading進度條插件。連接:http://ricostacruz.com/nprogr...
十一、vue-fullpage.js - 全屏滾動插件 - npm。連接:https://www.npmjs.com/package...
十二、介紹 · better-scroll - 滾動插件。連接:http://ustbhuangyi.github.io/...
1三、BetterScroll:多是目前最好用的移動端滾動插件 - 掘金。連接:https://juejin.im/post/59b777...
1四、Vue導出頁面爲PDF格式 - CSDN博客。連接:https://blog.csdn.net/pratise...
1五、vue的無縫滾動組件。連接:https://github.com/chenxuan00...
1六、vue相關的開源項目 - CSDN博客。連接:https://blog.csdn.net/aaa333q...
1七、video插件:https://surmon-china.github.i...
如下爲video.js實現的公共組件videoPlayer.vue:ios
<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標籤來實現需求,可參考:git
<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的更好看些。github