5個Vue.js項目的令人敬畏的模板

2021-01-07 智能甄選

開發人員查看使用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。

相關焦點

  • 【項目推薦】Vue.js
    作者是尤雨溪,寫下這篇文章時 vue.js版本為 1.0.7 。我推薦使用 sublime text 作為編輯器,關於這個編輯器可以看我這篇文章。在 package control中安裝Vuejs SnippetsVue Syntax Highlight推薦使用 npm 管理,新建兩個文件 app.html,app.js,為了美觀使用 bootstrap,我們的頁面模板看起來是這樣:<!
  • 深入理解 Vue 模板渲染:Vue 模板反編譯
    vue 文件的構成熟悉 vue 的同學應該都知道,vue 單文件模板中一般含有三個部分,template,script,style。但是在編譯後的 js 文件中,我們卻沒法在代碼中直接找到這三部分,如果我們想從編譯後的 js 中獲取原始模板,應該怎麼做?
  • Vue.js以業務為中心的常見面試題
    是什麼vue-router是vue.js的路由插件,(常用router-link和router-view)17.vue.js的生命周期共分8個階段:在實例初始化之後,數據觀測者data observer和event/watcher事件配置之前調用在實例創建完成後立即調用
  • 對比 12,000 個 Vue.js 開源項目發現最實用的 TOP45!
    2019 更是熱度不減,而作為近年來尤為熱門的前端框架,Vue.js 自是積累了大量關注。本文將為你介紹 2019 年最值得關注的 45 個 Vue.js 開源項目——Let's go!Vue.js 開源項目和庫,並從中挑選了最好的 45 個(佔比 0.37%)。
  • Vue.js 2.5 發布,而這個會玩的團隊已經自研出用 Vue 開發小程序的...
    更好地支持 SFC 中的函數式組件使用 vue-loader> = 13.3.0 和 Vue 2.5,在 * .vue 文件中定義為單個文件組件的函數式組件現在可以得到正確的模板編譯,Scoped CSS和熱重新加載支持。 這使得將葉子組件轉換為函數式的更為容易,從而進行性能優化。
  • 揭密vue.js的神秘之處,小程序跟vue有什麼關係
    微容用的微信小程序平臺採用開發思路是前後端分離,前端採用vue.js+h5+jq開發,後端採用MVE的思路,用php開發,用vue.js構建來微信小程序可視化前端之後,微容給大家介紹下vue的來源和特徵。
  • Vue.js 很難學?看看這個由 DCloud 與 Vue 官方合作推出的免費入門...
    這對於微小項目可能沒什麼感覺,甚至還很方便,但對於中大型但項目,更適合工程化開發模式的 Vue/react ,只要學會了就真的不會再回去了。這套在線觀看的免費入門視頻教程就是給你們準備的。Vue.js 是目前國內很火的前端框架,前端工程師招聘幾乎都要求掌握。
  • Vue.js布局
    動態Vue.js布局組件前言vue.js是漸進增強的視圖庫,可以作為.html頁面部分使用,也可以結合vue-router、vuex、axios用來構建單頁面或多頁面應用。
  • Vue.js 教程:構建一個特斯拉汽車餘電計算器
    作為本教程的起點,請克隆這個 Github 存儲庫:https://github.com/petereijgermans11/workshop-reactjs-vuejs然後轉至 vuejs-app 目錄。
  • Vuejs基礎之:實例、模板、計算、class與Style綁定
    1.5   生命周期圖示2.1   插值插值的簡單理解,即Vue.js通過模板的方式來編寫HTML,而模板中被Vue.js替換的部分,即是插值。2.1.5   過濾器•Vue.js 允許自定義過濾器,被用作一些常見的文本格式化(時間戳的日期轉換等等)。
  • CKEditor 4 編輯器已與 Vue.js 集成
    近日,CKEditor 團隊發布了與 Vue.js 框架原生集成的 CKEditor 4。這就意味著,開發者可以通過<ckeditor />標籤以 Vue.js 組件的形式使用 CKEditor 4 ,而作為 Vue.js 的原生組件,開發者可以更快地將其應用到網站上。
  • 使用Vue.js、Node和Okta構建安全的用戶管理
    有了React,表面上看起來很簡單的事情最終會成為令人沮喪的混亂。輸入Vue.js. 它按預期工作。它很快。文件是令人難以置信的。模板是雄辯的。關於如何處理狀態管理,有條件呈現,雙向綁定,路由等問題有一致的一致意見。我見過很多開發人員走這條路,所以今天我想帶你了解如何使用Vue.js和Node構建一個基本的應用程式。
  • 七種需要避免的Vue.js常見錯誤
    它不僅容易上手,還便於與第三方的庫、以及既有項目相集成。同時,Vue生態系統所支持的庫在與單文件組件(SFC)等工具結合使用時,Vue也能夠為複雜的單頁應用提供相應的驅動與功能。為了避免大家跌入同樣的「坑」中,我在此將其中常見的七大錯誤總結如下: 1.添加模板編譯器 在嘗試導入Vue.js時,我發現:即使自己遵循了官方指南的說明事項,組件的內聯(inline)模板也會返回空白頁面。
  • 推薦8 個漂亮實用的 vue.js 進度條組件
    為大家精心挑選了 8 個漂亮的 Progress Bars 組件,並附上 GitHub 連結和 vue.js 代碼示例,以及Vue3 快速深入全攻略。1.easy-circular-progress一個簡單的循環進度組件,帶有計數效果。
  • 「Vue.js開發連載一」Vue.js簡介
    一、簡介Vue.js(讀音 /vju/,類似於view)是一個構建數據驅動的web界面的漸進式框架。Vue。js的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件。它不僅易於上手,還便於與第三方庫或既有項目整合。
  • 面試官:聊聊對Vue.js框架的理解
    Vue.js的核心庫只關心視圖渲染,且由於漸進式的特性,Vue.js便於與第三方庫或既有項目整合。組件機制定義:組件就是對一個功能和樣式進行獨立的封裝,讓HTML元素得到擴展,從而使得代碼得到復用,使得開發靈活,更加高效。
  • 學點vue.js的東西,什麼都得學點,面試時說不定對方會問什麼
    那我今天就寫點vue的東西,寫教程其實就是最好的學習。咱們開始吧////////先得安裝vue,其實就跟jq一樣,用<script>標籤引入,就算安裝完了。就這樣:<script src="js/vue.min.js"></script>我看網上許多還有什麼vue項目目錄結構,什麼腳手架,...
  • 10 個實用的 Vue.js 工具和庫
    在其幫助下你可以輕鬆創建並直接配置和管理項目。VueCLI( https://cli.vuejs.org/ )2、VuePressVuePress 是 Vue 生態系統中的另一大重頭戲。Vuex( https://vuex.vuejs.org/ )5、NuxtNuxt 是常用的服務端渲染(SSR)方法。這個框架簡潔而直觀,可用來構建各種應用程式。它也是模塊化的,因此你可以只使用應用程式所需的那些模塊。
  • 深入認識 vue-cli:能做的不僅僅是初始化 vue 工程
    什麼是vue-cli引用vue-cli官方文檔的一句話:A simple CLI for scaffolding Vue.js projects.一個簡單的Vue.js工程命令行腳手架工具。vue-cli初始化項目的原理從官方文檔可以知道,vue-cli使用了download-git-repo這個工具去下載遠端git倉庫裡面的工程,如果加上了 --clone參數,則會在內部運行 git clone,通過克隆的方式把遠端git倉庫拉取到本地。
  • Vue.js——60分鐘組件快速入門(上篇)
    使用Vue.component()註冊組件時,需要提供2個參數,第1個參數時組件的標籤,第2個參數是組件構造器。4. Vue.component()方法內部會調用組件構造器,創建一個組件實例。5. 組件應該掛載到某個Vue實例下,否則它不會生效。