用Vue仿了一個類似抖音的App

来源:https://www.cnblogs.com/codechen8848/p/18113672
-Advertisement-
Play Games

大家好,我是 Java陳序員。 今天,給大家介紹一個基於 Vue3 實現的高仿抖音開源項目。 關註微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典電腦電子書籍等。 項目介紹 douyin —— 一個基於 Vue、Vite 實現,模仿抖音的移動端短視頻項目。 這個項目的 ...


大家好,我是 Java陳序員

今天,給大家介紹一個基於 Vue3 實現的高仿抖音開源項目。

關註微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典電腦電子書籍等。

項目介紹

douyin —— 一個基於 Vue、Vite 實現,模仿抖音的移動端短視頻項目。

這個項目的作者原本是用來學習 Vue 練手的,經過不斷的優化更新,目前已經達到官方 App 的 80% 了。真乃我輩楷模!

項目地址:

https://github.com/zyronon/douyin

線上訪問:

https://dy.ttentau.top/home

如果是 PC 瀏覽器瀏覽訪問,請用手機模式。先按 F12 調出控制台,再按 Ctrl + Shift + M 切換到手機模式。

項目截圖

PS:大家都知道視頻中的網紅是誰嘛?

本地部署

環境準備: 該項目是基於 Vue 開發的,需要 Node 環境來運行。

1、安裝 NodeJS,參考官方文檔

2、安裝 pnpm 包管理工具

npm install -g pnpm

3、拉取項目代碼

git clone https://github.com/zyronon/douyin.git

4、進入項目根目錄並安裝依賴

cd douyin
pnpm install

5、啟動項目

pnpm run dev

6、瀏覽器訪問

http://localhost:3000

最後

推薦的開源項目已經收錄到 GitHub 項目,歡迎 Star

https://github.com/chenyl8848/great-open-source-project

或者訪問網站,進行線上瀏覽:

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支持,如文章對你有幫助還請點贊轉發支持下,謝謝!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、Text/Span 在HarmonyOS中,Text/Span組件是文本控制項中的一個關鍵部分。Text控制項可以用來顯示文本內容,而Span只能作為Text組件的子組件顯示文本內容。 Text/Span組件的用法非常簡單和直觀。我們可以通過Text組件來顯示普通文本,也可以通過Span組件來實 ...
  • 稍微有點 Linux 經驗的人一定會遇到過 “Too many open files” 錯誤,這個錯誤本質是 ulimit 設置不合理導致的。關於 ulimit 設置,有哪些需要註意的點呢?本文給大家做一個介紹,希望對大家有所幫助。 如何確認 ulimit 設置生效了? 很多人設置了 ulimit ...
  • 一、Progress Progress組件是一種用戶界面(UI)元素,用於向用戶顯示某些任務的進度。它通常以進度條的形式出現,顯示任務完成的百分比。Progress組件可以在確定任務持續時間未知的情況下提供有用的反饋,幫助用戶瞭解任務的狀態和進度。 在Web應用程式中,Progress組件通常是 ...
  • iOS項目環境搭建和依賴管理 一個項目總是會依賴一些庫, 有些是第三方的, 有些可能是項目自身為了復用拆出去的. 現有主流的iOS依賴有多種形式, 比如CocoaPods, Carthage和swift package. 本文是一些環境搭建和使用項目依賴相關的筆記. 全局環境準備 基本上iOS開發都 ...
  • 一、Toggle Toggle組件是一個互動式UI組件,用於切換兩種狀態之間的選擇或開關。它通常用於表示開關按鈕,例如在設置中啟用或禁用某些選項。 在Toggle組件中,用戶可以點擊按鈕來切換狀態,或者使用鍵盤或其他輸入設備上的快捷鍵。通常,Toggle組件會在用戶點擊或切換狀態時觸發一個事件, ...
  • 一、Radio Radio單選框是一種表單元素,允許用戶從一組選項中選擇一個選項。它由一個圓圈和一個標簽組成,用戶只能選擇其中一個選項。Radio單選框通常用於表單中,用於收集用戶選擇的信息,例如用戶性別、年齡、愛好等等。 Radio單選框的作用是允許用戶從有限的選項中進行選擇,使表單填寫更加快 ...
  • 安裝react-native-fs npm npm install react-native-fs --save yarn yarn add react-native-fs 安卓配置 android/settings.gradle ... include ':react-native-fs' pro ...
  • nvm nvm(Node Version Manager)是一個Node.js的版本管理器。 安裝nvm windows安裝nvm 1. 下載nvm 下載地址:nvm-windows,下載 nvm-noinstall 或者 nvm-setup.exe 如果使用 nvm-noinstall 可以運行 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式(靜態工廠模式)1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點:2. 總結:3 ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說,下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫,因此mysql數據發生改變時,Elasticsearch也必須跟著改變,這個就是Elasticsearch與my ...
  • 引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據,今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫,旨在最大程度地減少單元測試中的“安排(Arrange)”階段,以提高 ...
  • 經過前面幾個部分學習,相信學過的同學已經能夠掌握 .NET Emit 這種中間語言,並能使得它來編寫一些應用,以提高程式的性能。隨著 IL 指令篇的結束,本系列也已經接近尾聲,在這接近結束的最後,會提供幾個可供直接使用的示例,以供大伙分析或使用在項目中。 ...
  • 當從不同來源導入Excel數據時,可能存在重覆的記錄。為了確保數據的準確性,通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間,而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟: 1. 首先安裝免費.NET ...
  • C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式,使程式更加健壯和可靠。 異常處理的基本概念: 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • 優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解,包括JDK和第三方庫。 我花了很多時間來學習API,尤其是在閱讀了Effective Java 3rd Edition之後 ,Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發,而不是為常見的東西編 ...
  • 框架 · 使用laravel框架,原因:tp的框架路由和orm沒有laravel好用 · 使用強制路由,方便介面多時,分多版本,分文件夾等操作 介面 · 介面開發註意欄位類型,欄位是int,查詢成功失敗都要返回int(對接java等強類型語言方便) · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵,火星子都快出來了。司機跟那同事更熟一些,連我在內一共就三個人,同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了,馬上聽出來了,為那個無辜的企業經辦人辯護,實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責, ...