Vue.js項目模板有哪些

這篇文章給大家分享的是有關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應用程序的樣板，具有開箱即用的身份驗證，包括用戶注冊和谷歌、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.js項目模板有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！