解決方案:推薦 16 個(gè)優(yōu)秀的 Vue 開(kāi)源項目

　　01cms和*敏*感*詞*

　　頁(yè)面工具包

　　Pagekit 是在 Vue.js 和 Symphony 框架的幫助下構建的開(kāi)源 cms。 cms 是模塊化的，因此您可以逐步擴展功能。 Pagekit 是在 MIT 許可下發(fā)布的，因此可以不受任何限制地自由修改、共享和重新分發(fā)。

　　本產(chǎn)品具有cms的所有主要和高級功能：

　　·具有網(wǎng)站性能的可定制*敏*感*詞*表板；

　　·網(wǎng)站內容編輯頁(yè)面；

　　·內置博客；

　　·HTML 和 Markdown 編輯器；

　　·文件管理器；

　　·用戶(hù)角色管理。

　　還有一些對開(kāi)發(fā)人員特別有用的東西和功能。該產(chǎn)品是使用簡(jiǎn)單的 ORM、模塊化架構和包管理構建的。還有一個(gè)內置的調試工具欄，可以幫助開(kāi)發(fā)人員監控性能、路由、數據庫查詢(xún)和調試內部系統事件，擴展甚至可以添加自己的功能?；蛘?，CLI 可用于執行系統更新、安裝和卸載擴展和主題，以及直接從終端清除緩存。

　　產(chǎn)品有強大的貢獻指南，團隊歡迎人們修復錯誤、翻譯或擴展cms的功能。社區并不大，但非常發(fā)達，并渴望幫助新人。

　　因此，這是一個(gè)非常強大的產(chǎn)品，具有非常全面的文檔和透明的貢獻指南。開(kāi)啟通往開(kāi)源世界之路的絕佳選擇。

　　02Vuepress

　　VuePress 是由 Vue.js 作者 EvanYou 創(chuàng )建的基于 Vue 的靜態(tài)站點(diǎn)*敏*感*詞*。在 VuePress 的幫助下，網(wǎng)站使用 VueRouter、Vue 和 webpack 創(chuàng )建。最初，該產(chǎn)品是作為編寫(xiě)技術(shù)文檔的工具而創(chuàng )建的，但現在它是一個(gè)小巧、緊湊且功能強大的無(wú)頭 cms 。在 VuePress 中，您使用 Markdown 編寫(xiě)內容，然后將其轉換為預渲染的靜態(tài) HTML 文件。

　　該項目有一個(gè)組織良好的捐贈指南和一個(gè)透明的工作流程。它還具有出色的問(wèn)題管理功能。社區有超過(guò) 300 名活躍的貢獻者可以為您提供支持。這是您開(kāi)始為開(kāi)源項目做貢獻的絕佳選擇。

　　03Vue店面

　　Vuestorefront 是一個(gè)面向電子商務(wù)的 PWA，幾乎可以連接到任何電子商務(wù)后端：它使用無(wú)頭架構。這包括流行的 BigCommerce 平臺、Magento、Shopware 等。 VueStorefront 的一些優(yōu)勢包括移動(dòng)優(yōu)先方法、服務(wù)器端渲染（有利于 SEO）和離線(xiàn)模式。

　　該產(chǎn)品擁有一個(gè)發(fā)達的社區：Slack 中有大約 2,000 名開(kāi)發(fā)人員和 180 多名活躍的貢獻者。這一點(diǎn)特別有價(jià)值，因為團隊有一個(gè)清晰的路線(xiàn)圖，所以你作為貢獻者可以選擇你可以做的任務(wù)?？偠灾?，這是一個(gè)非常有趣、支持和耗時(shí)的產(chǎn)品。

　　04Vuegg

　　Vuegg 允許您通過(guò)將組件直接拖放到可視化編輯器中并根據您的選擇移動(dòng)它們的大小來(lái)構建 Vue.js 項目。該項目的目的是將設計和原型設計合并到一個(gè)流程中。

　　顯著(zhù)特點(diǎn)：

　　通過(guò)拖放和移動(dòng)/調整大小來(lái)模擬/恢復組件；

　　·支持標準的鼠標和鍵盤(pán)組合；

　　·響應式預覽（移動(dòng)設備、平板電腦、網(wǎng)絡(luò )）；

　　·一套基本的HTML5元素；

　　·材料設計組件（vue-mdc-adapter）；

　　·Vuejs源碼生成（下載.zip）。

　　這個(gè)項目有一個(gè)清晰的路線(xiàn)圖，你可以直接在 Github 上看到。由于該項目相當新，因此在沒(méi)有貢獻指南的情況下仍有工作正在進(jìn)行，但您可以自由打開(kāi)任何問(wèn)題和 PR。

　　05網(wǎng)格體

　　Gridsome 與 VuePress 有許多相似之處，但對數據源采用了不同且非常強大的方法。它允許您在應用程序中連接和使用許多不同類(lèi)型的數據，然后將這些數據統一到單個(gè) GraphQL 層中?；旧?，Gridsome 使用 Vue 提供前端功能，使用 GraphQL 進(jìn)行數據管理。

　　工作方法可以概括為以下三個(gè)步驟：

　　您以 Markdown、JSON、YAML 或 CVS 數據格式提供內容，或從 WordPress 或 Drupal 等導入內容。cms;

　　內容被轉換為提供集中數據管理的 GraphQL 層；

　　然后使用這些數據使用 Vue 構建您的應用程序。

　　在開(kāi)發(fā)方面，文檔有清晰的路線(xiàn)圖、描述良好的變更日志和貢獻指南。貢獻是一個(gè)不錯的選擇。

　　06UI 組件

　　驗證

　　

　　Vuetify 根據 MaterialDesign 規范提供了大量精心設計的組件 (80+)。 Vuetify 結合了 Vue.js 和 Material 的所有優(yōu)點(diǎn)。該框架與 RTL 和 VueCLI-3 兼容。 Vuetify 的所有組件都有很好的文檔記錄，并且有清晰的示例。它適用于 Vue 的服務(wù)器端渲染 (SSR)。 Vuetify 支持所有現代 Web 瀏覽器 - 甚至 IE11 和 Safari9+（使用多用途填充）。它還提供了現成的項目腳手架，因此您可以使用一個(gè)命令開(kāi)始構建您的 Vue.js 應用程序。

　　它提供了一組基于材料設計的組件，例如：

　　·按鈕；

　　·投資；

　　·卡片；

　　·桌子，

　　·列表。

　　Vuetify 背后有一個(gè)充滿(mǎn)活力的社區，有超過(guò) 500 名貢獻者創(chuàng )建了許多 Vuetify 插件。它具有成為優(yōu)秀開(kāi)源的所有主要組成部分：廣泛的文檔、貢獻指南、問(wèn)題管理。但在我們看來(lái)，很難做出貢獻，因為社區已經(jīng)很大了。

　　07Buefy

　　Buefy 為基于 Bulma 的 Vue.js 提供輕量級 UI 組件。 Buefy 有兩個(gè)核心原則：保持簡(jiǎn)單和輕量級。這也解釋了為什么它的唯一依賴(lài)項是 Vue 和 Bulma。盡管它只有 40 多個(gè)組件，但它為您提供了移動(dòng)優(yōu)先且響應迅速的 UI 組件。

　　特點(diǎn)：

　　·支持MaterialDesign圖標和FontAwesome；

　　·非常輕量級，除了Vue&Bu lma沒(méi)有內部依賴(lài)；

　　·大約 88KB min + gzip ;

　　·語(yǔ)義代碼輸出。

　　08Vue材質(zhì)

　　VUEMaterial 簡(jiǎn)單、輕巧并且完全按照 GoogleMaterial 設計規范構建。 VUE Materials 提供超過(guò) 56 種組件來(lái)構建不同類(lèi)型的布局。一件很棒的事情是材料設計框架具有非常詳盡的文檔。該框架非常輕量級，收錄完整的組件，并且完全符合 Google Material Design 指南。這種設計適合每個(gè)屏幕并支持所有現代瀏覽器。

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

　　09 應用

　　科爾

　　Koel 是一種個(gè)人音樂(lè )流媒體服務(wù)，您可以根據自己的需要進(jìn)行定制?？蛻?hù)端是用 Vue 編寫(xiě)的，后端是用 Laravel 編寫(xiě)的。針對 Web 開(kāi)發(fā)人員，koel 使用了一些更現代的 Web 技術(shù)，例如 flexbox、音頻和拖放 API 等等。

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

　　我們喜歡這個(gè)項目背后的想法，即制作由社區開(kāi)發(fā)的流媒體服務(wù)。所以，如果你熱愛(ài)音樂(lè )并想提高你的 Vue 技能，貢獻是一個(gè)不錯的選擇。

　　10Eagle.js

　　Eagle.js 是使用 Vue 構建的強大、靈活且獨特的幻燈片系統。它允許您在演示文稿中創(chuàng )建易于重復使用的組件、幻燈片和樣式。它還支持*敏*感*詞*、主題和交互式小部件，非常適合 Web 演示。微信搜索公眾號：Java后端編程，回復：java接收信息。

　　您可以使用此庫做的最重要的事情之一是將您的幻燈片放在一個(gè)單獨的文件中，然后在其他幻燈片中重復使用它。您還可以將特定幻燈片中的幻燈片導入到另一個(gè)幻燈片中。創(chuàng )建者還提供了幾個(gè)模板以輕松開(kāi)始開(kāi)發(fā)。

　　該項目有一個(gè)貢獻指南，其中收錄您可以提供幫助的想法。我們認為這是一個(gè)值得花時(shí)間去做的好項目：它確實(shí)幫助了很多人進(jìn)行演示。此外，在 Eagle 的幫助下開(kāi)始學(xué)習 Vue 很容易。

　　11 工具包

　　Nuxt.js

　　Nuxt 是一個(gè)簡(jiǎn)單直接的框架，用于構建通用應用程序：服務(wù)器渲染應用程序、單頁(yè)應用程序、漸進(jìn)式 Web 應用程序，或者僅將其用作靜態(tài)站點(diǎn)*敏*感*詞*。它也是模塊化的，所以你可以只使用你的頁(yè)面需要的模塊。簡(jiǎn)而言之，Nuxt 讓您免于構建和優(yōu)化頁(yè)面的工作。 Nuxt.js 具有模塊化架構，有 50 多個(gè)模塊可供選擇。

　　特點(diǎn)：

　　·熱代碼重載；

　　·服務(wù)器端渲染或單頁(yè)應用或靜態(tài)生成，任君選擇；

　　·使用nuxt.config.js文件進(jìn)行配置；

　　·每頁(yè)代碼拆分；

　　·使用layouts/目錄自定義布局；

　　·僅加載關(guān)鍵的 CSS（頁(yè)面級別）。

　　Nuxt 成為 Vue 開(kāi)發(fā)不可或缺的一部分，擁有眾多貢獻者和廣泛的社區。我們會(huì )選擇為此工具做出貢獻，因為我們知道社區將幫助您發(fā)展技能并教給您一些新知識。

　　

　　12類(lèi)星體

　　Quasar 是一個(gè)通用的、支持 Vue 的框架，它允許您使用相同的代碼庫為不同的平臺編寫(xiě)應用程序：SPA、PWA、SSR 應用程序、混合移動(dòng)應用程序或多平臺桌面應用程序。類(lèi)星體有多達 81 個(gè)組件。

　　有一個(gè)很好的文檔和許多旨在提高性能和響應能力的組件。 Quasar 默認集成了最佳實(shí)踐（HTML/CSS/JS 縮小、緩存破壞、樹(shù)抖動(dòng)、源映射、延遲加載的代碼拆分、ES6 傳輸、代碼鏈接、可訪(fǎng)問(wèn)性），因此您可以主要關(guān)注應用程序的功能。它還提供了一個(gè) cli 工具，可以輕松地為新項目構建腳手架。

　　該框架有一個(gè)很棒的社區、支持聊天和論壇，以及明顯的貢獻指南。此外，您可以通過(guò)捐款來(lái)支持該工具。微信搜索公眾號：前端技術(shù)編程，回復：前端獲取信息。

　　13BootstrapVue

　　Boot Vue 是一個(gè)基于 Bootstrap 庫的 UI 工具包。它只是用 Vue 代碼替換常規引導組件中的 JavaScript。借助 BootstrapVue，您可以使用 Vue.js 和世界上最流行的前端 CSS 庫 - Bootstrapv4 在 Web 上構建響應式、移動(dòng)優(yōu)先和 ARIA 可訪(fǎng)問(wèn)的項目。它還可以輕松與 Nuxt.js 集成。

　　文檔內容廣泛，再加上 Discord 的強大社區支持，使其成為啟動(dòng)項目和參與貢獻的安全選擇。

　　14 開(kāi)發(fā)者工具

　　狀態(tài)

　　Statusfy 是一個(gè)完全開(kāi)源的狀態(tài)頁(yè)面系統。 Statusfy 站點(diǎn)是基于 Eleventy、Vue、Nuxt.js 和 TailwindCSS 構建的 Web 應用程序。

　　這很酷，因為：

　　·Markdown 支持；

　　·這是一個(gè)漸進(jìn)式網(wǎng)絡(luò )應用程序；

　　·多語(yǔ)言支持；

　　·易于定制。

　　對于社區管理和支持，該產(chǎn)品具有社區聊天、大量教程、提示、更新和博客。它還具有廣泛的文檔和貢獻指南。

　　我們建議對這個(gè)項目做出貢獻，因為它是一個(gè)非常棒的工具，可以讓開(kāi)發(fā)人員的生活變得非常輕松。此外，您將熟悉 Vue 的所有主要技術(shù)。

　　15Cachet

　　Cachet 是一個(gè)使用 Vue 和 Bootstrap 制作的強大的開(kāi)源狀態(tài)頁(yè)面系統。它內置了 10 種語(yǔ)言。Cachet 捆綁了一個(gè)簡(jiǎn)單（但功能強大）的 JSON API。此外，使用 Cachet，您可以提前安排活動(dòng)。在儀表板中，您可以設置指標 - 一種衡量某事的方法，無(wú)論是正常運行時(shí)間、錯誤率還是完全隨機的。

　　Slack 擁有一個(gè)相當大的社區，其中有非?；钴S的貢獻者。開(kāi)始為開(kāi)源社區做出貢獻是個(gè)好主意 - 活躍的社區、中型項目、好主意。

　　16Vee驗證

　　VeeValidate 是一個(gè)基于模板的 Vue.js 驗證框架，允許您驗證輸入并顯示錯誤。

　　由于它是基于模板的，您只需為每個(gè)輸入指定在值更改時(shí)應使用哪個(gè)驗證器。將為支持的 40 多個(gè)區域自動(dòng)生成錯誤。許多規則開(kāi)箱即用。

　　特點(diǎn)：

　　·熟悉且易于設置的基于模板的驗證；

　　·i18n 支持和 40 多個(gè)地區的錯誤消息；

　　·異步和自定義規則支持；

　　·用 TypeScript 編寫(xiě)；

　　·沒(méi)有依賴(lài)關(guān)系。

　　VeeValidate 處理表單驗證的主要痛點(diǎn)，并以最靈活的方式處理它們：

　　·能夠為您的用戶(hù)設計復雜的用戶(hù)體驗；

　　·最常見(jiàn)的驗證是內置的；

　　·跨領(lǐng)域驗證；

　　·用于增強表單的可訪(fǎng)問(wèn)性和樣式的實(shí)用程序；

　　·本地化內置于核心。

　　團隊歡迎大家為項目做出貢獻，并擁有良好的文檔和貢獻指南。它也有一些很好的例子和一個(gè)很棒的社區。

　　結論

　　我們采集了 Vue 上最有用和最成熟的開(kāi)源項目。我們要再次指出：首先，在選擇受資助項目之前，請注意以下幾點(diǎn)： 文檔和貢獻指南 另外，選擇您喜歡的項目，無(wú)論是否受歡迎。如果您希望我們在此集合中收錄任何其他工具，請寫(xiě)信給我們。我們希望您分享此 文章 以幫助人們了解偉大的開(kāi)源項目。

　　解決方案:新網(wǎng)站怎么樣才能快速優(yōu)化排名呢？

　　網(wǎng)站上線(xiàn)后，有很多問(wèn)題需要面對。同樣要注意幾個(gè)工作流程，讓新站更快參與排名。一起來(lái)看看吧。

　　新網(wǎng)站如何快速優(yōu)化你的排名

　　一、很多缺失的內容

　　新站上線(xiàn)后，需要大量的內容。如果前期只有一個(gè)人優(yōu)化網(wǎng)站，那么需要每天定時(shí)更新內容，并確定每日更新文章的次數和頻率，讓蜘蛛根據爬取我們設置的更新時(shí)間。對于新站點(diǎn)，它不僅保持更新頻率，而且穩定蜘蛛爬行。同時(shí)，大量的內容需要有價(jià)值，字數必須達到一定的量，這樣蜘蛛的爬取才不會(huì )影響網(wǎng)站的總分。

　　

　　二、網(wǎng)站TKD 書(shū)面

　　網(wǎng)站上線(xiàn)前需要完成所有網(wǎng)站頁(yè)面的TDK，除了文章通過(guò)標題自行生成，最重要的是首頁(yè)和欄目頁(yè)面，通過(guò)我們的公式關(guān)鍵詞的順序和內容，幫助用戶(hù)通過(guò)搜索快速檢索到我們的網(wǎng)站。

　　新網(wǎng)站如何快速優(yōu)化你的排名

　　三、網(wǎng)站代碼簡(jiǎn)潔

　　

　　在制定網(wǎng)站框架之前，一定要想想網(wǎng)站上線(xiàn)后每天爬取的蜘蛛是否能完全爬取到我們的網(wǎng)站內容。如果你的站點(diǎn)代碼數量很大，而且大部分內容都是采集，對整個(gè)站點(diǎn)的排名有影響。我們能做的就是推出高質(zhì)量的內容。

　　四、網(wǎng)站用戶(hù)體驗

　　這是網(wǎng)站上線(xiàn)后最重要的考慮，因為網(wǎng)站上線(xiàn)后，會(huì )先被搜索引擎審核。審核后，將是用戶(hù)。如果用戶(hù)不滿(mǎn)意，首先影響排名的是轉化率。在做網(wǎng)站的時(shí)候，首先要考慮用戶(hù)的想法和需求，這樣頁(yè)面的留存率才會(huì )高。

　　新站上線(xiàn)后，我們能做的就是先填寫(xiě)內容，但在質(zhì)量上，我們需要保證滿(mǎn)足用戶(hù)的需求，這樣搜索引擎才會(huì )給我們一個(gè)好的排名根據總分網(wǎng)站.