Vue2.5打造簡潔視頻webapp(更新中。。。)

一、前言

由於疫情原因,在家待了很長時間,所以在這段時間裏對前端的知識進行了鞏固及學習,然而在學了一段時間以後,有一種掌握了一些技術但卻無處可施的感覺,於是腦海中就浮現了做一個項目的念頭。有了這個念頭之後,就開始想做什麼呢?在一次逛B站的時候,對不起,我對它動手了(仿嗶哩嗶哩視頻webapp)

從一開始對這個項目進行業務分析後,讓我有着堅定的決心要長期維護這個項目,這個項目無論是從數據接口,還是運用技術上,我都煞費心血的肝,中途遇到困難真的有想放棄的念頭,因爲這個項目的數據接口一開始就是一個難題,由於網上目前還沒有規範的相關數據接口文檔,但是最後還是克服了,等項目基本完善後會整理出在這個項目中使用的數據接口供大家參考。本人前端大白菜一棵,這個項目對我來說意義非凡,希望大家能支持。

項目源碼地址(後續將部署上線)

項目目的

本項目僅僅以學習爲目的開發,希望能借助這個項目將所學技術運用實踐出來,通過實踐以及在項目中遇到的問題,來提高自己的技術能力,通過做項目的方式尋找自己的不足,也希望這個項目能幫助到大家。

項目進度(進度30%)

首頁

  • switcher組件
  • 輪播圖組件
  • scroll組件(better-scroll二次封裝)
  • 視頻推薦列表
  • loading組件

視頻播放頁

  • 視頻播放器
  • 視頻簡介
  • 視頻推薦
  • 視頻評論

搜索頁

  • 熱門搜索標籤
  • 歷史搜索記錄
  • 防抖搜索關鍵詞及高亮顯示
  • 無法搜索具體內容
真實數據來源
  • 通過自己研究獲取的部分視頻數據
  • 由GitHub上的SocialSisterYi提供的部分視頻數據

本人才學疏淺,若有不足,歡迎指出!

二、項目介紹

項目整體架構

在這裏插入圖片描述
這是項目大體目前期望的整體架構,可能在後續開發中還會變化。。。

技術棧
  • vue2.5:一套用於構建用戶界面的漸進式框架
  • vue-router: Vue.js 官方的路由管理器
  • vue-lazyload:在應用程序中懶散加載圖像的Vue模塊
  • vue-awesome-swiper:基於swiper封裝的vue滑動特效插件
  • fastclick:消除物理點擊和在移動瀏覽器上觸發點擊事件之間300毫秒的延遲
  • better-scroll:解決移動端各種滾動場景需求的插件
  • axios:請求後端api數據
  • vuex:專爲 Vue.js 應用程序開發的狀態管理模式

三、功能介紹

首頁部分

在這裏插入圖片描述

視頻播放頁

在這裏插入圖片描述

搜索頁

在這裏插入圖片描述

四、未來期望

目前這個項目還有很多功能還未實現,所以在之後的時間裏儘快將剩餘功能實現,呈現出一個完善的webapp項目出來,同時我也非常樂意大家的star以及提pr的嘻嘻嘻,這個項目還在努力開發中,儘量呈現處最好的一面出來!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章