5個很棒的Vue.js專案模板

你要開始一個重要的Vue專案嗎?為了確保您從一個堅實的基礎開始，您可以使用一個模板(也稱為樣板、骨架、啟動器或腳手架) ，而不是從npm init或vue init開始。

許多經驗豐富的開發人員都以開源模板的形式收集了關於建立高品質Vue應用程式的經驗。這些範本包括最佳配置和專案結構、最佳第三方工具和其他開發最佳實務。

與為靈活性進行最佳化的Vue CLI 3不同，模板是自訂的。因此，選擇一個適合您的開發理念，並且具有與您需要的開箱即用的特性大致相同的特性是很重要的。

選擇Vue範本的一些考量包括：

• Webpack

• PWA

• Full-stack with authentication

• Good documentation

• GraphQL

• Testing

等等。

現在有許多great Vue.js模板，但在本文中，我們將介紹5個包含新專案經常需要的關鍵特性的模板。

1. 最適合Webpack

#如果您需要一個可靠的Webpack設置，那麼只需查看Vue CLI 2包含的Webpack模板即可。 GitHub上有近7000顆星星，Vue團隊成員負責開發和維護，這個模板是您創建高度優化的webpack支援的SPA的最佳選擇。

這個模板利用了Webpack及其生態系統的許多前緣特性，包括熱重載、CSS提取、linting ，當然還有單一文件元件載入。它還包括為開發、生產甚至測試優化的單獨配置。

作為Vue CLI 2的一部分，這是我們將提供的最不固執己見的模板之一，因此不包含許多需要的額外功能，例如伺服器端呈現。

如果你發現Webpack模板有點過分，你可以試試它的小兄弟，Webpack Simple模板。

連結: https://github.com/vuejs-templates/webpack

注意:即將離開beta版的Vue CLI version 3已經放棄了模板體系結構，轉而支持插件，因此這個模板在技術上是不受歡迎的，但是仍然可以從Vue CLI 3的遺留設定中使用。在我們的文章Vue CLI 3中了解更多:前端開發的遊戲規則改變者。

2.最適合的PWA

你需要先進應用程序的高級用戶體驗嗎?Vue Starter是一個用於伺服器呈現的PWAs的SPA模板。它包括Vuex和Vue路由器，配置為使用伺服器端呈現(SSR)開箱即用。

這個專案在確保您部署的專案從一開始就具有出色的UX方面投入了大量的精力，例如支援多種語言的國際化和Lighthouse評分90 ，這要歸功於SSR和service worker快取。

此外，使用vue-meta管理文件頭標籤用於SEO，而SSR確保您的頁面將被支援JavaScript內容的搜尋引擎索引。

連結：https：//github.com/devCrossNet/vue-starter

示範：https：//vue-starter.herokuapp.com

#如果你正在建造一個PWA，另一個不錯的選擇是VuePack，當然，還有Vue CLI 2 PWA templat

3.最適合身份驗證

如果您需要使用者驗證，請查看Vue Express Mongo樣本檔案。該專案提供了一個完整的堆疊「MEVN」web應用程式的樣板，具有開箱即用的身份驗證，包括用戶註冊和Google、Facebook、Twitter和GitHub的社交登入。

此範本遵循安全最佳實踐，使用OAuth 2，Helmet（新增安全HTTP標頭）和Express Validator進行輸入清理。它還為多個遠端日誌記錄服務提供支援。

對於資料庫，提供了具有Mongoose的MongoDB。 repo也包含Docker配置，因此您可以輕鬆地啟動一個實例。

連結：https：//github.com/icebob/vue-express-mongo-boilerplate

示範：http：//vemapp.moleculer.services/

#提示：如果您喜歡使用Laravel作為經過驗證的Vue應用程式的後端，請嘗試使用包含許多類似功能的Laravel Vue Boilerplate。

4.最適合文件

許多範本失敗的原因是缺乏文件。 Vue Enterprise Boilerplate不是這樣。該專案由Chris Fritz創建和維護，他編寫了大部分Vue文檔，因此它組織良好並與Vue最佳實踐保持一致。

這個範本的文件最棒的地方在於，它不僅解釋了包含了什麼，而且通常還解釋了不包含什麼，以及為什麼不包含。例如，Chris解釋了為什麼沒有TypeScript、Babel polyfill、Pug等模板中常見的模板。

不要讓這個應用程式的簡潔預設頁面欺騙你，它也有很多功能。我最喜歡的一些包括用於測試的模擬API，以及包含生成器，可讓您自動添加單元測試來設定組件，視圖和佈局。

Vue Enterprise Boilerplate也支援Vue CLI 3，因此可以使用其他Vue CLI 3外掛程式輕鬆擴充專案。

連結：https：//github.com/chrisvfritz/vue-enterprise-boilerplate

5. 最適合GraphQL

#GraphQL現在風靡一時，許多開發人員都希望在他們的新Vue專案中使用它。雖然沒有太多Vue模板，但如果您需要GraphQL，請務必查看Vuexpresso。

這個專案使用GraphQL、Apollo和GraphiQL UI，這是一個用於研究GraphQL的瀏覽器內IDE。此外，您還可以獲得一個配置良好的Webpack設定、Vuex和Vue路由器。您還可以獲得Storybook，它允許互動式開發、測試和共享UI元件。

Vuexpresso唯一的缺點是它仍然相當新，所以一定要有時間徹底測試你用它建立的任何應用程式。

連結：https：//github.com/Ethaan/vuexpresso

#支援GraphQL的另一個樣板是Friendly Vue Starter ，它還包括透過Critical提取的關鍵路徑CSS。

相關推薦：vue教學

#

以上是5個很棒的Vue.js專案模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！