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

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)從化,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

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

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

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

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

• Webpack

• PWA

• Full-stack with authentication

• Good documentation

• GraphQL

• Testing

等等。

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

1. 最適合Webpack

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

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

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

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

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

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

2.最適合的PWA

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

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

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

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

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

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

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

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

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

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

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

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

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

4.最適合文檔

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

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

不要讓這個應(yīng)用程序的簡潔默認(rèn)頁面欺騙你，它也有很多功能。我最喜歡的一些包括用于測試的模擬API，以及包含生成器，允許您自動添加單元測試來設(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í)，許多開發(fā)人員都希望在他們的新Vue項(xiàng)目中使用它。雖然沒有多少Vue模板，但如果您需要GraphQL，請務(wù)必查看Vuexpresso。

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

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

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

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

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

網(wǎng)站名稱：Vue.js項(xiàng)目模板有哪些-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/coodce.html