推薦15個超贊的Vue開源項目

作者：Echa攻城獅 2023-06-27 06:56:32

開源

Habitica 是習慣養成及生產力應用，讓你 “游戲人生”。游戲里的獎懲措施能激勵你完成任務。Habitica 能夠幫助你達成目標，變得健康，勤奮，快樂。Habitica 可以讓你如角色扮演游戲般對待你的目標，對待你的生活。

大家好，我是Echa。

隨著社會的不斷進步，科技不斷的發展。前端技術不斷的流行，Vue在國內幾乎是家喻戶曉，前端程序員無人不知框架之一，其次就是React和Angular。

在前端圈內人士經常私信小編說，怎么快速學習Vue、React和Angular框架來開發項目呢？

其實關于這個話題小編之前有詳細的講過，請見這篇：推薦10個yyds的Vue 、React源碼解析開源項目有詳細的學習方法，有興趣的粉絲們可以看看。

今天小編繼續推薦15個超贊的Vue開源項目，希望對粉絲們學習有所幫助，其次接私活也能養家糊口。

全文大綱

Habitica - 是習慣養成及生產力應用，讓你 “游戲人生”
Reader - 是一個前端基于 Vue.js + Element 的閱讀工具
Eplee - 是一款基于 Vue + Electron 的 ePub 閱讀器
MarkText - 是一個基于 Vue + Electron 的簡單而優雅的開源 markdown 編輯器
JeecgBoot-Vue3版前端源碼，采用 Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技術方案
Chatwoot -是一個開源、自托管的用于即時消息渠道的客戶支持工具
filebrowser -是一個使用 Go + Vue 編寫的工具
Slidev -是基于 Web 的幻燈片制作和演示工具
Hoppscotch - 是一種可以通過 Web 服務的方式構建 API 訪問的工具
Wiki.js- 是一款基于 Node.js + Vue 技術棧的強大、可高度擴展、開源的 Wiki 系統。
Vue Material -提供超過56個組件來構建不同類型的布局。
Koel-是一款個人音樂流媒體服務，您可以根據自己的需求進行定制。
Quasar-是一個通用的Vue框架，允許您為具有相同代碼庫的不同平臺編寫應用程序
Bootstrap Vue 是一個基于引導程序庫的UI工具庫。
VeeValidate-是Vue.js的一個基于模板的驗證框架，允許您驗證輸入和顯示錯誤。

Habitica

Github：https://github.com/HabitRPG/habitica

Habitica 是習慣養成及生產力應用，讓你 “游戲人生”。游戲里的獎懲措施能激勵你完成任務。Habitica 能夠幫助你達成目標，變得健康，勤奮，快樂。Habitica 可以讓你如角色扮演游戲般對待你的目標，對待你的生活。當你成功時升級，當你失敗時掉血，然后一直不斷地賺錢買武器和盔甲。Habitica 前端使用 Vue 編寫。

Reader

Github：https://github.com/hectorqin/reader

Reader 是一個前端基于 Vue.js + Element 的閱讀工具。其支持書架管理、搜索、書海、看書、換源、翻頁方式、手勢支持、自定義主題、自定義樣式、WebDAV同步、文字替換過濾、聽書、用戶配置備份恢復、漫畫、音頻、書源失效檢測、導入本地TXT、EPUB、UMD格式的書籍、書籍分組、RSS訂閱、定時更新書架、并發搜書、本地書倉等功能。

Eplee

Github：https://github.com/Janglee123/eplee

Eplee 是一款基于 Vue + Electron 的 ePub 閱讀器，專注于通過簡單美觀的 UI 提供干凈、無干擾的閱讀體驗。

MarkText

Github：https://github.com/marktext/marktext

MarkText 是一個基于 Vue + Electron 的簡單而優雅的開源 markdown 編輯器，專注于速度和可用性。

JEECG BOOT

Github：https://github.com/jeecgboot/jeecgboot-vue3

JeecgBoot—Vue3版前端源碼，采用 Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技術方案，包括二次封裝組件、utils、hooks、動態菜單、權限校驗、按鈕級別權限控制等功能。是JeecgBoot低代碼平臺的vue3技術棧的全新UI版本。

Chatwoot

Github：https://github.com/chatwoot/chatwoot

Chatwoot 是一個開源、自托管的用于即時消息渠道的客戶支持工具，可以幫助企業提供客戶支持。它是 Intercom、Zendesk、Salesforce Service Cloud 等的開源替代品。Chatwoot 對發生在不同溝通渠道的對話提供了一個綜合視圖。Chatwoot 的前端使用 Vue 編寫。

特點

Chatwoot支持以下對話渠道：

網站：使用我們的實時聊天小部件與您的客戶交談，并使用我們的SDK來識別用戶并提供上下文支持。
臉書：連接你的臉書頁面，開始回復你頁面上的直接消息。
Instagram：連接您的Instagram個人資料并開始回復直接消息。
推特：連接你的推特個人資料，回復直接消息或提到你的推文。
Telegram：連接您的Telegram機器人，并直接從一個儀表板回復您的客戶。
WhatsApp：連接你的WhatsApp商業賬戶，并在Chatwoot中管理對話。
Line：連接您的Line帳戶并管理Chatwoot中的對話。
短信：連接您的Twilio短信帳戶，并在Chatwoot回復短信查詢。
API通道：使用我們的API通道構建自定義通信通道。
電子郵件：將您的所有電子郵件查詢轉發到Chatwoot，并在我們的集成儀表板中查看。

File browser

Github：https://github.com/filebrowser/filebrowser

filebrowser 是一個使用 Go + Vue 編寫的工具，用于在瀏覽器中對服務器上的文件進行管理。可以是修改文件，或者是添加刪除文件，甚至可以分享文件，是一個很棒的文件管理器，可以當成網盤使用。

Slidev

Github：https://github.com/slidevjs/slidev

Slidev 是基于 Web 的幻燈片制作和演示工具。它旨在讓開發者專注在 Markdown 中編寫內容，同時擁有支持 HTML 和 Vue 組件的能力，并且能夠呈現像素級完美的布局，還在你的演講稿中內置了互動的演示樣例。它使用了功能豐富的Markdown文件來生成精美的幻燈片，具有即時重載的體驗。它還擁有很多內置的集成功能，如實時編碼、導出 PDF、演講錄制等。Slidev 基于 Vue 3 + Vite + VueUse 等技術實現。

Hoppscotch

Github：https://github.com/hoppscotch/hoppscotch

Hoppscotch 是一種可以通過 Web 服務的方式構建 API 訪問的工具，使用 Node.js + Vue 開發，采用簡約的 UI 設計，能實時發送和獲取響應值，它的的前身是 Postwoman。Hoppscotch 功能與 Postman 類似，不僅支持 HTTP/HTTPS ，而且還支持 WebSocket、Socket.io、EventSourcee、MQTT、GraphQL。

hoppscotch目前支持以下方法：

GET -- 請求檢索資源信息
HEAD -- 檢索與GET請求相同的響應頭，但沒有響應主體。
POST -- 服務器在數據庫中創建一個新條目。
PUT -- 更新現有資源
DELETE -- 刪除資源或相關組件。
CONNECT -- 建立一條通往目標資源識別的服務器的隧道。
OPTIONS -- 描述目標資源的通信選項。
TRACE -- 沿著通往目標資源的路徑執行消息回環測試。
PATCH -- 與PUT非常相似，但會對資源進行部分更新。
<custom> -- 一些API使用自定義的請求方法，如LIST。鍵入你的自定義方法。

Wiki.js

Github：https://github.com/requarks/wiki

Wiki.js 是一款基于 Node.js + Vue 技術棧的強大、可高度擴展、開源的 Wiki 系統。其界面簡潔美觀、權限管理靈活，支持多種編輯器、多種用戶驗證方式、多種備份存儲方式、多種搜索引擎，支持國際化、自定義主題、流量分析等，適合做小團隊的知識庫，適合管理和閱讀，支持協同創作。

Vue Material

Github：https://github.com/vuematerial/vue-material

Vue Material 輕便，完全按照Google Material 設計規范建造。Vue Material提供超過56個組件來構建不同類型的布局。它的一個偉大之處在于，材料設計框架有真正徹底的文檔。該框架非常輕，具有完全符合谷歌材料設計指南的全系列組件。這種設計適合每一個屏幕，并支持每一個現代瀏覽器。

路線圖、貢獻指南、良好的文檔和變更日志都在這里。對于喜歡UI項目的開發人員來說，這是一個不錯的選擇。

Koel

Github：https://github.com/koel/koel

Koel是一款個人音樂流媒體服務，您可以根據自己的需求進行定制。客戶端使用Vue編寫，后端使用Laravel編寫。針對網絡開發人員，Koel采用了一些更現代的網絡技術——flexbox、音頻和拖放API等——來完成其工作。

該項目在Github上非常受歡迎，有52位貢獻者。不幸的是，沒有詳細的投稿指南，但作者在Github上寫道，在你提交任何內容之前，你需要打開一個問題。還可以選擇通過Opencollective贊助該項目。

我們喜歡這個項目背后的想法，即制作一個由社區開發的流媒體服務。因此，如果你熱愛音樂并想發展你的Vue技能，這將是一個很好的選擇。

Quasar

Github：https://github.com/quasarframework/quasar

Quasar是一個通用的Vue框架，允許您為具有相同代碼庫的不同平臺編寫應用程序：SPAs、PWA、SSR應用程序、混合移動應用程序或多平臺桌面應用程序。Quasar有多達81個組件。

這里有一個很棒的文檔和一組龐大的組件，設計時考慮到了性能和響應能力。Quasar默認集成了最佳實踐（HTML/CSS/JS縮小、緩存破壞、樹抖動、源映射、帶延遲加載的代碼拆分、ES6泄漏、代碼linting、可訪問性），因此您可以主要關注應用程序的功能。它還提供了一個CLI工具，可以輕松地構建新項目。

該框架有一個很棒的社區，支持聊天和論壇，顯然還有一個貢獻指南。此外，您可以通過向他們捐款來支持該工具。

Bootstrap Vue

Github：https://github.com/bootstrap-vue/bootstrap-vue

Bootstrap Vue是一個基于引導程序庫的UI工具包。它只是用Vue代碼替換了常規引導程序組件中的JavaScript。使用Bootstrap Vue，您可以使用Vue.js和世界上最流行的前端CSS庫Bootstrap v4在網絡上構建響應迅速、移動優先且可訪問ARIA的項目。它還可以輕松地與Nuxt.js集成。

文檔內容廣泛，加上Discord提供的強大社區支持，使其成為與某人一起啟動項目并為其做出貢獻的安全選擇。