這篇文章給大家分享的是有關(guān)Vue.js項(xiàng)目模板有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

十多年的大冶網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整大冶建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“大冶網(wǎng)站設(shè)計(jì)”,“大冶網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

你要開(kāi)始一個(gè)重要的Vue項(xiàng)目嗎?為了確保您從一個(gè)堅(jiān)實(shí)的基礎(chǔ)開(kāi)始，您可以使用一個(gè)模板(也稱為樣板、骨架、啟動(dòng)器或腳手架)，而不是從npm init或vue init開(kāi)始。

許多經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員都以開(kāi)源模板的形式收集了關(guān)于構(gòu)建高質(zhì)量Vue應(yīng)用程序的經(jīng)驗(yàn)。這些模板包括最佳配置和項(xiàng)目結(jié)構(gòu)、最佳第三方工具和其他開(kāi)發(fā)最佳實(shí)踐。

與為靈活性進(jìn)行優(yōu)化的Vue CLI 3不同，模板是自定義的。因此，選擇一個(gè)適合您的開(kāi)發(fā)理念，并且具有與您需要的開(kāi)箱即用的特性大致相同的特性是很重要的。

選擇Vue模板的一些考慮事項(xiàng)包括:

• Webpack

• PWA

• Full-stack with authentication

• Good documentation

• GraphQL

• Testing

等等。

現(xiàn)在有很多great Vue.js模板，但是在本文中，我們將介紹5個(gè)包含新項(xiàng)目經(jīng)常需要的關(guān)鍵特性的模板。

1. 最適合Webpack

如果您需要一個(gè)可靠的Webpack設(shè)置，那么只需查看Vue CLI 2中包含的Webpack模板即可。GitHub上有近7000顆星星，Vue團(tuán)隊(duì)成員負(fù)責(zé)開(kāi)發(fā)和維護(hù)，這個(gè)模板是您創(chuàng)建高度優(yōu)化的webpack支持的SPA的最佳選擇。

這個(gè)模板利用了Webpack及其生態(tài)系統(tǒng)的許多前沿特性，包括熱重載、CSS提取、linting，當(dāng)然還有單文件組件加載。它還包括為開(kāi)發(fā)、生產(chǎn)甚至測(cè)試優(yōu)化的單獨(dú)配置。

作為Vue CLI 2的一部分，這是我們將提供的最不固執(zhí)己見(jiàn)的模板之一，因此不包含許多需要的額外功能，比如服務(wù)器端呈現(xiàn)。

如果你發(fā)現(xiàn)Webpack模板有點(diǎn)過(guò)分，你可以試試它的小兄弟，Webpack Simple模板。

鏈接: https://github.com/vuejs-templates/webpack

注意:即將離開(kāi)beta版的Vue CLI version 3已經(jīng)放棄了模板體系結(jié)構(gòu)，轉(zhuǎn)而支持插件，因此這個(gè)模板在技術(shù)上是不受歡迎的，但是仍然可以從Vue CLI 3的遺留設(shè)置中使用。在我們的文章Vue CLI 3中了解更多:前端開(kāi)發(fā)的游戲規(guī)則改變者。

2.最適合的PWA

你需要先進(jìn)應(yīng)用程序的高級(jí)用戶體驗(yàn)嗎?Vue Starter是一個(gè)用于服務(wù)器呈現(xiàn)的PWAs的SPA模板。它包括Vuex和Vue路由器，配置為使用服務(wù)器端呈現(xiàn)(SSR)開(kāi)箱即用。

這個(gè)項(xiàng)目在確保您部署的項(xiàng)目從一開(kāi)始就具有出色的UX方面投入了大量的精力，比如支持多種語(yǔ)言的國(guó)際化和Lighthouse評(píng)分90+，這要?dú)w功于SSR和service worker緩存。

此外，使用vue-meta管理文檔頭部標(biāo)簽用于SEO，而SSR確保您的頁(yè)面將被支持JavaScript內(nèi)容的搜索引擎索引。

鏈接：https：//github.com/devCrossNet/vue-starter

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

如果你正在建造一個(gè)PWA，另一個(gè)不錯(cuò)的選擇是VuePack，當(dāng)然，還有Vue CLI 2 PWA templat

3.最適合身份驗(yàn)證

如果您需要用戶身份驗(yàn)證，請(qǐng)查看Vue Express Mongo樣本文件。該項(xiàng)目提供了一個(gè)完整的堆?！癕EVN”web應(yīng)用程序的樣板，具有開(kāi)箱即用的身份驗(yàn)證，包括用戶注冊(cè)和谷歌、Facebook、Twitter和GitHub的社交登錄。

此模板遵循安全最佳實(shí)踐，使用OAuth 2，Helmet（添加安全HTTP標(biāo)頭）和Express Validator進(jìn)行輸入清理。它還為多個(gè)遠(yuǎn)程日志記錄服務(wù)提供支持。

對(duì)于數(shù)據(jù)庫(kù)，提供了帶有Mongoose的MongoDB。repo還包含Docker配置，因此您可以輕松地啟動(dòng)一個(gè)實(shí)例。

鏈接：https：//github.com/icebob/vue-express-mongo-boilerplate

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

提示：如果您更喜歡使用Laravel作為經(jīng)過(guò)身份驗(yàn)證的Vue應(yīng)用程序的后端，請(qǐng)嘗試使用包含許多類似功能的Laravel Vue Boilerplate。

4.最適合文檔

許多模板失敗的原因是缺乏文檔。Vue Enterprise Boilerplate不是這樣。該項(xiàng)目由Chris Fritz創(chuàng)建和維護(hù)，他編寫了大部分Vue文檔，因此它組織良好并與Vue最佳實(shí)踐保持一致。

這個(gè)模板的文檔最棒的地方在于，它不僅解釋了包含了什么，而且通常還解釋了不包含什么，以及為什么不包含。例如，Chris解釋了為什么沒(méi)有TypeScript、Babel polyfill、Pug等模板中常見(jiàn)的模板。

不要讓這個(gè)應(yīng)用程序的簡(jiǎn)潔默認(rèn)頁(yè)面欺騙你，它也有很多功能。我最喜歡的一些包括用于測(cè)試的模擬API，以及包含生成器，允許您自動(dòng)添加單元測(cè)試來(lái)設(shè)置組件，視圖和布局。

Vue Enterprise Boilerplate還支持Vue CLI 3，因此可以使用其他Vue CLI 3插件輕松擴(kuò)展項(xiàng)目。

鏈接：https：//github.com/chrisvfritz/vue-enterprise-boilerplate

5. 最適合GraphQL

GraphQL現(xiàn)在風(fēng)靡一時(shí)，許多開(kāi)發(fā)人員都希望在他們的新Vue項(xiàng)目中使用它。雖然沒(méi)有多少Vue模板，但如果您需要GraphQL，請(qǐng)務(wù)必查看Vuexpresso。

這個(gè)項(xiàng)目使用GraphQL、Apollo和GraphiQL UI，這是一個(gè)用于研究GraphQL的瀏覽器內(nèi)IDE。此外，您還可以獲得一個(gè)配置良好的Webpack設(shè)置、Vuex和Vue路由器。您還可以獲得Storybook，它允許交互式開(kāi)發(fā)、測(cè)試和共享UI組件。

Vuexpresso唯一的缺點(diǎn)是它仍然相當(dāng)新，所以一定要有時(shí)間徹底測(cè)試你用它構(gòu)建的任何應(yīng)用程序。

鏈接：https：//github.com/Ethaan/vuexpresso

支持GraphQL的另一個(gè)樣板是Friendly Vue Starter，它還包括通過(guò)Critical提取的關(guān)鍵路徑CSS。

感謝各位的閱讀！關(guān)于Vue.js項(xiàng)目模板有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！