開發人員查看使用SPA,Webpack,身份驗證,GraphQL,文檔和測試的Vue開發人員的資源。
你準備開始一個重要的Vue項目嗎?為了確保從堅實的基礎開始,您可以使用模板(也就是樣板,骨架,起動器或腳手架)而不是從npm init或開始vue init。
許多經驗豐富的開發人員已經掌握了以開源模板的形式構建高質量Vue應用程式的智慧。這些模板包括最佳配置和項目結構,最佳第三方工具以及其他開發最佳實踐。
與Vue CLI 3不同,Vue CLI 3針對靈活性進行了優化,因此模板具有觀點。因此,重要的是選擇符合您的開發理念並且具有開箱即用的大致相同的功能。
選擇Vue模板的一些注意事項包括:
WebpackPWA具有身份驗證的全棧好文檔GraphQLTesting
有很多很棒的Vue.js模板,但是,在本文中,我們將看看包含新項目通常需要的關鍵功能的5個模板。
1.最適合Webpack
如果你需要一個可靠的Webpack設置,那麼Vue CLI 2附帶的Webpack模板就是最好的。在GitHub上有近7000顆星,Vue團隊成員開發和維護,這個模板是創建高度優化的Webpack驅動的最好選擇。
該模板利用了Webpack及其生態系統的許多前沿功能,包括熱重載,CSS提取,linting以及單文件組件加載。它還包括針對開發,生產甚至測試而優化的獨立配置。
作為Vue CLI 2的一部分,這是我們將要展示的最不具意見的模板之一,因此不包括伺服器端渲染等許多理想的附加功能。
如果你發現Webpack模板有點過分,你可以試試它的小兄弟,Webpack Simple模板。
連結:https://github.com/vuejs-templates/webpack
注意:即將退出測試版的Vue CLI版本3已經放棄了模板體系結構,轉而使用插件,因此該模板在技術上將被棄用,但仍可從Vue CLI 3的舊版設置中獲取。了解更多信息文章Vue CLI 3:用於前端開發的遊戲改變者。
2.最適合PWA
您是否需要漸進式應用的卓越用戶體驗?Vue Starter是伺服器呈現的PWA的SPA模板。它包括Vuex和Vue Router,配置為開箱即用的伺服器端渲染(SSR)。
該項目已經考慮到確保您的部署項目從一開始就具有驚人的用戶體驗,如多語言支持的國際化和燈塔得分為90+,這要歸功於SSR和服務工作者的緩存。
此外,使用vue-meta的文檔頭標籤管理用於SEO,而SSR確保您的頁面將被支持JavaScript內容的搜尋引擎編入索引。
連結:https://github.com/devCrossNet/vue-starter
演示:https://vue-starter.herokuapp.com
如果您正在構建PWA,另一個不錯的選擇是VuePack,當然,還有Vue CLI 2 PWA模板。
3.最適合身份驗證
如果您需要用戶身份驗證,請查看Vue Express Mongo Boilerplate。該項目提供了一個全棧「MEVN」Web應用程式樣板,具有開箱即用的身份驗證,包括用戶註冊和Google,Facebook,Twitter和GitHub的社交登錄。
此模板遵循安全最佳實踐,使用OAuth 2,Helmet(添加安全HTTP標頭)和Express Validator進行輸入清理。它還為多個遠程日誌記錄服務提供支持。
對於資料庫,提供了Mongo和Mongoose。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。