大家好，我是Echa。

隨著社會(huì)的不斷進(jìn)步，科技不斷的發(fā)展。前端技術(shù)不斷的流行，Vue在國(guó)內(nèi)幾乎是家喻戶曉，前端程序員無(wú)人不知框架之一，其次就是React和Angular。

在前端圈內(nèi)人士經(jīng)常私信小編說(shuō)，怎么快速學(xué)習(xí)Vue、React和Angular框架來(lái)開(kāi)發(fā)項(xiàng)目呢？

其實(shí)關(guān)于這個(gè)話題小編之前有詳細(xì)的講過(guò)，請(qǐng)見(jiàn)這篇：推薦10個(gè)yyds的Vue 、React源碼解析開(kāi)源項(xiàng)目 有詳細(xì)的學(xué)習(xí)方法，有興趣的粉絲們可以看看。

今天小編繼續(xù)推薦15個(gè)超贊的Vue開(kāi)源項(xiàng)目，希望對(duì)粉絲們學(xué)習(xí)有所幫助，其次接私活也能養(yǎng)家糊口。

全文大綱

1. Habitica - 是習(xí)慣養(yǎng)成及生產(chǎn)力應(yīng)用，讓你 “游戲人生”
2. Reader - 是一個(gè)前端基于 Vue.js + Element 的閱讀工具
3. Eplee - 是一款基于 Vue + Electron 的 ePub 閱讀器
4. MarkText - 是一個(gè)基于 Vue + Electron 的簡(jiǎn)單而優(yōu)雅的開(kāi)源 markdown 編輯器
5. JeecgBoot-Vue3版前端源碼，采用 Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技術(shù)方案
6. Chatwoot -是一個(gè)開(kāi)源、自托管的用于即時(shí)消息渠道的客戶支持工具
7. filebrowser -是一個(gè)使用 Go + Vue 編寫(xiě)的工具
8. Slidev -是基于 Web 的幻燈片制作和演示工具
9. Hoppscotch - 是一種可以通過(guò) Web 服務(wù)的方式構(gòu)建 API 訪問(wèn)的工具
10. Wiki.js- 是一款基于 Node.js + Vue 技術(shù)棧的強(qiáng)大、可高度擴(kuò)展、開(kāi)源的 Wiki 系統(tǒng)。
11. Vue Material -提供超過(guò)56個(gè)組件來(lái)構(gòu)建不同類型的布局。
12. Koel-是一款個(gè)人音樂(lè)流媒體服務(wù)，您可以根據(jù)自己的需求進(jìn)行定制。
13. Quasar-是一個(gè)通用的Vue框架，允許您為具有相同代碼庫(kù)的不同平臺(tái)編寫(xiě)應(yīng)用程序
14. Bootstrap Vue 是一個(gè)基于引導(dǎo)程序庫(kù)的UI工具庫(kù)。
15. VeeValidate-是Vue.js的一個(gè)基于模板的驗(yàn)證框架，允許您驗(yàn)證輸入和顯示錯(cuò)誤。

Habitica

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

Habitica 是習(xí)慣養(yǎng)成及生產(chǎn)力應(yīng)用，讓你 “游戲人生”。游戲里的獎(jiǎng)懲措施能激勵(lì)你完成任務(wù)。Habitica 能夠幫助你達(dá)成目標(biāo)，變得健康，勤奮，快樂(lè)。Habitica 可以讓你如角色扮演游戲般對(duì)待你的目標(biāo)，對(duì)待你的生活。當(dāng)你成功時(shí)升級(jí)，當(dāng)你失敗時(shí)掉血，然后一直不斷地賺錢買武器和盔甲。Habitica 前端使用 Vue 編寫(xiě)。

 Reader

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

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

Eplee

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

Eplee 是一款基于 Vue + Electron 的 ePub 閱讀器，專注于通過(guò)簡(jiǎn)單美觀的 UI 提供干凈、無(wú)干擾的閱讀體驗(yàn)。

MarkText

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

MarkText 是一個(gè)基于 Vue + Electron 的簡(jiǎn)單而優(yōu)雅的開(kāi)源 markdown 編輯器，專注于速度和可用性。

JEECG BOOT

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

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

Chatwoot

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

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

特點(diǎn)

Chatwoot支持以下對(duì)話渠道：

• 網(wǎng)站：使用我們的實(shí)時(shí)聊天小部件與您的客戶交談，并使用我們的SDK來(lái)識(shí)別用戶并提供上下文支持。
• 臉書(shū)：連接你的臉書(shū)頁(yè)面，開(kāi)始回復(fù)你頁(yè)面上的直接消息。
• Instagram：連接您的Instagram個(gè)人資料并開(kāi)始回復(fù)直接消息。
• 推特：連接你的推特個(gè)人資料，回復(fù)直接消息或提到你的推文。
• Telegram：連接您的Telegram機(jī)器人，并直接從一個(gè)儀表板回復(fù)您的客戶。
• WhatsApp：連接你的WhatsApp商業(yè)賬戶，并在Chatwoot中管理對(duì)話。
• Line：連接您的Line帳戶并管理Chatwoot中的對(duì)話。
• 短信：連接您的Twilio短信帳戶，并在Chatwoot回復(fù)短信查詢。
• API通道：使用我們的API通道構(gòu)建自定義通信通道。
• 電子郵件：將您的所有電子郵件查詢轉(zhuǎn)發(fā)到Chatwoot，并在我們的集成儀表板中查看。

File browser

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

filebrowser 是一個(gè)使用 Go + Vue 編寫(xiě)的工具，用于在瀏覽器中對(duì)服務(wù)器上的文件進(jìn)行管理?？梢允切薷奈募?，或者是添加刪除文件，甚至可以分享文件，是一個(gè)很棒的文件管理器，可以當(dāng)成網(wǎng)盤使用。

Slidev

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

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

Hoppscotch

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

Hoppscotch 是一種可以通過(guò) Web 服務(wù)的方式構(gòu)建 API 訪問(wèn)的工具，使用 Node.js + Vue 開(kāi)發(fā)，采用簡(jiǎn)約的 UI 設(shè)計(jì)，能實(shí)時(shí)發(fā)送和獲取響應(yīng)值，它的的前身是 Postwoman。Hoppscotch 功能與 Postman 類似，不僅支持 HTTP/HTTPS ，而且還支持 WebSocket、Socket.io、EventSourcee、MQTT、GraphQL。

hoppscotch目前支持以下方法：

• GET -- 請(qǐng)求檢索資源信息
• HEAD -- 檢索與GET請(qǐng)求相同的響應(yīng)頭，但沒(méi)有響應(yīng)主體。
• POST -- 服務(wù)器在數(shù)據(jù)庫(kù)中創(chuàng)建一個(gè)新條目。
• PUT -- 更新現(xiàn)有資源
• DELETE -- 刪除資源或相關(guān)組件。
• CONNECT -- 建立一條通往目標(biāo)資源識(shí)別的服務(wù)器的隧道。
• OPTIONS -- 描述目標(biāo)資源的通信選項(xiàng)。
• TRACE -- 沿著通往目標(biāo)資源的路徑執(zhí)行消息回環(huán)測(cè)試。
• PATCH -- 與PUT非常相似，但會(huì)對(duì)資源進(jìn)行部分更新。
• <custom> -- 一些API使用自定義的請(qǐng)求方法，如LIST。鍵入你的自定義方法。

Wiki.js

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

Wiki.js 是一款基于 Node.js + Vue 技術(shù)棧的強(qiáng)大、可高度擴(kuò)展、開(kāi)源的 Wiki 系統(tǒng)。其界面簡(jiǎn)潔美觀、權(quán)限管理靈活，支持多種編輯器、多種用戶驗(yàn)證方式、多種備份存儲(chǔ)方式、多種搜索引擎，支持國(guó)際化、自定義主題、流量分析等，適合做小團(tuán)隊(duì)的知識(shí)庫(kù)，適合管理和閱讀，支持協(xié)同創(chuàng)作。

Vue Material

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

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

路線圖、貢獻(xiàn)指南、良好的文檔和變更日志都在這里。對(duì)于喜歡UI項(xiàng)目的開(kāi)發(fā)人員來(lái)說(shuō)，這是一個(gè)不錯(cuò)的選擇。

Koel

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

Koel是一款個(gè)人音樂(lè)流媒體服務(wù)，您可以根據(jù)自己的需求進(jìn)行定制?？蛻舳耸褂肰ue編寫(xiě)，后端使用Laravel編寫(xiě)。針對(duì)網(wǎng)絡(luò)開(kāi)發(fā)人員，Koel采用了一些更現(xiàn)代的網(wǎng)絡(luò)技術(shù)——flexbox、音頻和拖放API等——來(lái)完成其工作。

該項(xiàng)目在Github上非常受歡迎，有52位貢獻(xiàn)者。不幸的是，沒(méi)有詳細(xì)的投稿指南，但作者在Github上寫(xiě)道，在你提交任何內(nèi)容之前，你需要打開(kāi)一個(gè)問(wèn)題。還可以選擇通過(guò)Opencollective贊助該項(xiàng)目。

我們喜歡這個(gè)項(xiàng)目背后的想法，即制作一個(gè)由社區(qū)開(kāi)發(fā)的流媒體服務(wù)。因此，如果你熱愛(ài)音樂(lè)并想發(fā)展你的Vue技能，這將是一個(gè)很好的選擇。

Quasar

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

Quasar是一個(gè)通用的Vue框架，允許您為具有相同代碼庫(kù)的不同平臺(tái)編寫(xiě)應(yīng)用程序：SPAs、PWA、SSR應(yīng)用程序、混合移動(dòng)應(yīng)用程序或多平臺(tái)桌面應(yīng)用程序。Quasar有多達(dá)81個(gè)組件。

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

該框架有一個(gè)很棒的社區(qū)，支持聊天和論壇，顯然還有一個(gè)貢獻(xiàn)指南。此外，您可以通過(guò)向他們捐款來(lái)支持該工具。

Bootstrap Vue

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

Bootstrap Vue是一個(gè)基于引導(dǎo)程序庫(kù)的UI工具包。它只是用Vue代碼替換了常規(guī)引導(dǎo)程序組件中的JavaScript。使用Bootstrap Vue，您可以使用Vue.js和世界上最流行的前端CSS庫(kù)Bootstrap v4在網(wǎng)絡(luò)上構(gòu)建響應(yīng)迅速、移動(dòng)優(yōu)先且可訪問(wèn)ARIA的項(xiàng)目。它還可以輕松地與Nuxt.js集成。

文檔內(nèi)容廣泛，加上Discord提供的強(qiáng)大社區(qū)支持，使其成為與某人一起啟動(dòng)項(xiàng)目并為其做出貢獻(xiàn)的安全選擇。

VeeValidate

Github：https://github.com/logaretm/vee-validate

eeValidate是Vue.js的一個(gè)基于模板的驗(yàn)證框架，允許您驗(yàn)證輸入和顯示錯(cuò)誤。

由于它是基于模板的，您只需要為每個(gè)輸入指定在值更改時(shí)應(yīng)該使用哪種驗(yàn)證器。這些錯(cuò)誤將在支持40多種語(yǔ)言環(huán)境的情況下自動(dòng)生成。許多規(guī)則都是現(xiàn)成的。

特點(diǎn)：

• 基于模板的驗(yàn)證，既熟悉又易于設(shè)置；
• i18n 40多個(gè)地區(qū)的支持和錯(cuò)誤消息；
• 異步和自定義規(guī)則支持；
• 用鉛字書(shū)寫(xiě)的；
• 沒(méi)有依賴關(guān)系。
• VeeValidate解決了表單驗(yàn)證的主要痛點(diǎn)，并以最靈活的方式解決了這些痛點(diǎn)：
• 能夠?yàn)橛脩舸蛟鞆?fù)雜的用戶體驗(yàn)；
• 大多數(shù)常見(jiàn)的驗(yàn)證都是內(nèi)置的；

跨領(lǐng)域驗(yàn)證；

• 實(shí)用程序，以增強(qiáng)您的窗體的可訪問(wèn)性和樣式；
• 本地化是內(nèi)置于核心的。
• 該團(tuán)隊(duì)歡迎每個(gè)人為項(xiàng)目做出貢獻(xiàn)，并提供了良好的文檔和貢獻(xiàn)指南。它也有幾個(gè)偉大的例子和偉大的社區(qū)。

最后

一臺(tái)電腦,一個(gè)鍵盤,盡情揮灑智慧的人生;幾行數(shù)字,幾個(gè)字母,認(rèn)真編寫(xiě)生活的美好;

一 個(gè)靈感,一段程序,推動(dòng)科技進(jìn)步,促進(jìn)社會(huì)發(fā)展。