前端每週清單半年盤點之 Vue.js 篇

前端每週清單半年盤點之 Vue.js 篇

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單；本文則是對於半年來發布的前端每週清單中的 Vue.js 相關的教程實踐與開源項目的盤點，能夠查看這裏得到往期清單或者其餘盤點篇。

教程實踐

• 基於 Vue 與 DeepStream 構建實時 CRUD 應用：Vue 是專一於 JavaScript UI 的漸進式庫，它提供了開發現代 Web 應用的各類先進的特性。而隨着移動互聯網的發展，實時技術也愈發重要；各類各樣的提供抽象接口的實時服務器扮演着愈加重要的做用，其中DeepStream 就是開源的、免費的而且性能表現至關優秀的實時服務器。而本文就利用 Vue 與 DeepStream 這兩個開源工具構建實時交互的應用。
• Vue.js 組件樣式指南：該樣式指南提供了一種統一架構 Vue.js 代碼的建議，其目標是達成易於開發者與團隊成員理解以及尋找東西、易於 IDE 來審查代碼而且提供幫助、易於重用開發構建工具、易於獨立地緩存與使用代碼塊。該指南借鑑了 RiotJS樣式指南，主要還包含了如下幾個部分：基於模塊開發、Vue 組件命名，等等。
• 基於 Vue.js 開發一個 Pokemon Battle 指南: 本文是很是詳細的如何利用 Vue.js 開發一個寵物小精靈的戰鬥場景的教程，仍是挺有意思的。( http://suo.im/1jwicW )
• Vue.js 實用技巧：本文來自於餓了麼大前端的 cinwell， Vue.js 2.0 已經發布了有一段時間，生態鏈也日漸完善。做者在使用 Vue.js 開發項目時收集的一些工具和使用技巧，分享給各位。( http://6me.us/alZ )
• Vue.js 前端框架比較：本文是對經常使用的基於 Vue.js 的前端框架的比較。( http://6me.us/5E8wN )
• 滴滴 webapp 5.0 Vue 2.0 重構經驗分享：滴滴的 webapp 是運行在微信、支付寶、手 Q 以及其它第三方渠道的打車軟件。藉着產品層面的功能和視覺升級，咱們用 Vue 2.0 對它進行了一次技術重構；本文便是本次重構中的經驗分享。( https://github.com/DDFE/DDFE-... )
• 使用 Vue.js 與 Electron 構建桌面問卷應用：本文介紹瞭如何利用 Vue.js 與 Electron 來構建簡單的桌面問卷應用，做者首先介紹瞭如何使用 vue-cli 建立簡單的 Web 項目，而後討論瞭如何將項目運行在 Electron 中，最後闡述瞭如何將應用總體打包發佈。( https://parg.co/bQ3 )
• Vue.js 2.2 完整 API 清單：本文是 Vue.js 2.2 中完整的 API 介紹，能夠做爲手冊隨時查閱 。（ https://parg.co/bhC ）
• 建立基於 Vue.js 的可複用組件：本系列文章關注於如何利用 Vue.js 建立可複用的組件，每一篇都會講解某個具體的界面組件，而後一步一步地介紹如何利用 Vue.js 來實現這些組件，順便也介紹 Vue.js 的各類原理與設計準則。( https://parg.co/b49 )
• 面向重度 jQuery 開發者的 Vue.js 介紹：本文是一位經驗豐富的開發者，在將原有的基於 jQuery 工程重構爲基於 Vue.js 工程的過程當中總結出的經驗與認識介紹。本文首先從零開始介紹如何搭建 Vue.js 基礎項目而且一步一步地實現應用的各類特徵，同時還對比了利用 Vue.js 與 利用 jQuery 實現的差別性以及兩者在設計思想上的區別。( https://parg.co/bRN )
• 後 MVC 時代：在很長一段時間裏，MVC（Model-View-Controller）架構是構建應用的黃金法則，而近幾年隨着 React，Vue.js，Angular 等以組件爲中心的庫的流行，MVC 架構在前端卻趨於平寂。開發者每每將模型、視圖與控制器耦合在單個實體內，而打破了傳統的 MVC 架構中的約束。相似於 Flux 或者響應式編程的設計思想也改變了應用狀態的處理方式，不一樣於 MVC 中的雙向綁定，而是數據在實體之間單向流動。本文便是討論在所謂後 MVC 時代的 GUI 應用架構的思考。( https://realm.io/news/the-pos... )
• 在 Vue.js 項目中使用第三方庫：本文介紹瞭如何在基於單文件模塊的 Vue.js 項目中使用 Lodash、Moment、Axios 這些優秀的第三方庫或框架。本文遞進地介紹了譬如全局變量引用、單文件導入、擴展 Vue 對象、插件實現等多種方式。( https://parg.co/bf4 )
• Vue.js 2 中的權限驗證指南：本文介紹瞭如何快速構建 Vue.js 2 應用程序而且添加合適的權限驗證模塊。本文首先介紹了 Vue.js、Angular 以及 React 之間設計思想的對比，而後介紹了 Vue.js 2.0 中的核心概念與基本用法，最後以某個真實的登陸控制案例介紹瞭如何爲 Vue.js 應用中添加權限驗證功能。( https://auth0.com/blog/vuejs2... )
• 實測Vue SSR的渲染性能：避開20倍耗時：Vue SSR是Vue.js 2.0引入的直出渲染方案，本文將全面解析virtual-dom-based 及 string-based 的原理並對其進行對比。Vue SSR的模板是virtual-dom-based，因此QQ空間Hybrid業務作Vue 2.0的改造的同時，模板類型也從以前的a類轉換成b類。 本文是在實際業務場景中對Vue SSR的渲染性能作測試，並解析渲染步驟，給出嘗試優化的方案和最終結論。( https://parg.co/bNv )
• 基於 Vue.js、Webpack、Material Design 打造 PWA 應用：PWA 應用已經受到了愈來愈多的關注與實踐，而本系列文章則介紹瞭如何使用 Vue.js、Webpack 以及 Material Design 打造 PWA 應用。本系列文章包含七個部分，分別介紹了基於 Vue.js、Webpack 與 Material Design Lite 建立單頁應用、使用 Vue-Resource 與 VueFire 進行數據交互、使用 Service Workers 實現離線模式、拍照、上傳圖片、實現推送、訪問設備地址等內容。( https://parg.co/btH )
• Vue.js 與外部交互：Vue.js 是很是優秀的網頁構建框架，不過咱們每每會面臨着比較割裂的開發狀況，即網頁中的一部分是交由 Vue.js 管理，而另外一部分是交由其餘腳本或者插件管理；這中狀況在多團隊協同開發或者對舊版本的改造時可能會碰到。而本文則介紹了應該如何使用 Vue.js 與外部其餘腳本進行交互，譬如管理 head 、body 標籤、監聽鍵盤事件等等內容。( https://parg.co/bMw )
• 使用現代方法端到端測試 Vue.js 應用：端到端測試是 Web 測試中的重要組成部分，也是應用開發流程中不可或缺的部分；本文則介紹瞭如何使用 TestCafe 對 Vue.js 應用進行端到端測試。( https://parg.co/bV9 )
• 從 React 遷移到 Vue.js：React 與 Vue.js 都是很是優秀的前端框架，不一樣的團隊在不一樣的應用場景下可能有不一樣的偏好。而本文則記錄了做者從 React 遷移到 Vue.js 中的思考過程；本文首先介紹了 React 與 Vue.js 之間的異同，對比了兩者經常使用的語法特色以及生態圈，而且討論了爲什麼從 React 遷移到 Vue.js 的理由。( https://parg.co/bJ8 )
• 基於 Vuex 的 Vue 應用狀態管理：就如同其餘基於組件的框架，對於基於 Vue 開發的應用隨着其體量與功能的增長，對於狀態的追蹤會變得日漸麻煩。而本文則分析了狀態管理的痛點以及深刻淺出地介紹瞭如何利用 Vuex 進行 Vue 應用狀態管理。( https://parg.co/bJk )
• Vue 2017 現狀與展望：5 月 20 日，在全球首屆 VueConf 上，Vue.js 做者尤雨溪介紹了 Vue.js 2017 的現狀，並對 Vue 的將來作了展望。本文是對這次演講的回顧。獲取更多Vue相關內容，請關注前端之巔公衆號並回復「Vue」。( https://parg.co/bJ6 )
• Nuxt.js SSR 與權限驗證指南：Nuxt.js 是基於 Vue.js 構建的服務端渲染框架，它容許開發者快速建立支持服務端渲染的應用；而本文則是介紹了利用 Nuxt.js 搭建應用而且爲其添加權限驗證模塊的步驟。( https://parg.co/bic )
• 在 Vue.js 中使用過濾器：過濾器是 Vue 中經常使用的處理數據渲染結果的方式之一，咱們首先須要明白過濾器並非對於方法、推導值等的替代，畢竟它們並無真實地轉換數據，而只是對用戶的可視結果進行了處理。自 Vue 2.0 以後框架自己並沒有內置的過濾器，而本文則是介紹了基本的過濾器的使用語法以及幾個經典的使用場景。( https://css-tricks.com/using-... )
• 使用 Vue 與 NativeScript 開發跨端應用：目前標準的開發 NativeScript 應用的方式是使用樸素的 JavaScript 或者 Angular，而本文介紹瞭如何結合使用 Vue 與 NativeScript 來開發跨終端應用。本文首先闡述了 Vue.js 相較於 React 或者 Angular 的優點，而後闡述了使用 Vue 語法來開發基礎 NativeScript 應用的步驟。( https://www.nativescript.org/... )
• 基於 Firebase 與 Vue.js 構建基於地理位置的聊天室：本文介紹了基於 Firebase 與 Vue.js 構建某個基於地理位置搜索與配對的聊天室應用的過程，應用發佈在這裏，仍是挺有意思的應用。本文除了介紹 Vue.js 項目的基礎構建與語法以外，還介紹了所謂 Geohash 的知識與 Firebase 相關接口的使用。( https://parg.co/bLH )
• 在 Vue.js 中使用 Mixins：在項目開發中咱們常常會碰到兩個組件的業務邏輯有所類似，可能共享相同的底層業務邏輯；此時咱們就須要考慮如何來合理地劃分代碼，即避免冗餘代碼，也不能過分抽象。而本文則介紹瞭如何在 Vue.js 中使用 Mixins 來編寫可重複使用的功能代碼片；Mixin 容許咱們將部分代碼片封裝到函數中而後動態地在多個組件中使用。( https://parg.co/b9S )
• 爲何我選擇了 React 而不是 Vue？：本文做者闡述了本身在技術選型過程當中更傾向於 React 的緣由，本文帶有較強的主觀色彩，請讀者批判性閱讀。本文做者認爲 React 與 Vue 雖然是類似的前端組件型庫，可是 Vue、Angular、Knockout 等框架依舊是以 HTML 爲中心，使用指令來描述部分邏輯；而 React 則是以 JavaScript 爲中心，徹底使用 JavaScript 代碼來描述邏輯。本文從模板、工具、狀態的可變性等角度來論證本身的觀點。( https://parg.co/b9H )
• 三分鐘交互式介紹 Vue.js：Vue.js 是近年來逐步流行的輕量級構建前端界面的組件庫，其相對平滑的學習曲線確保了開發者可以快速入門使用。而本文做者則按部就班地介紹了 Vue.js 基礎使用知識，而且在每一段中都包含了交互式代碼演示；做者依次介紹了 Vue.js 中模板語法與數據綁定、常見指令以及響應用戶輸入等內容；更多 Vue 相關資料參考這裏。( https://parg.co/byU )
• TDD 與 Vue.js：在真實的項目中咱們免不了須要進行代碼測試，而本文即分享如何在 Vue.js 中遵循測試驅動開發的基礎知識。本文首先利用 Vue CLI 的默認模板建立了一個簡單的組件，而後爲其添加部分基礎功能，同時會爲每一個元素添加單元測試。( https://parg.co/byQ )
• Vue.js 框架的優點與缺陷（*僅表明原做者我的見解，如有翻譯不當之處請指正）：Vue.js 已經在國內的不少公司獲得了普遍應用，與 Google 的 Angular 以及 Facebook 的 React 鼎足而立，本文做者則是從本身的角度闡述了 Vue.js 目前的優點與潛在缺陷所在。首先 Vue.js 的優點在於其包體較小，良好的文檔方便開發者理解與使用，而且能很快地集成到現有項目中，其靈活性與數據通訊機制也保證了項目的可擴展性。而目前來看 Vue.js 的缺陷則在於其開發者社區可能不如 React 等成熟，而且主要使用者以國人爲主，與英語社區的交流存在必定語言障礙，同時其靈活性自己也是一種雙刃劍，對於某些開發者而言反而會形成困難；更多 Vue 相關資料參考這裏。( https://parg.co/byl )
• 利用 Webpack 加速 Vue.js 應用的四種姿式：Webpack 是開發 Vue.js 單頁應用的必須工具之一，它可以幫你處理複雜的編譯步驟從而簡化開發流程，而且可以幫助你優化應用體積與性能表現。而本文中做者即從單文件組件、優化 Vue 構建配置、瀏覽器緩存管理、代碼分割這四個角度討論瞭如何利用 Webpack 提供的特性來加速 Vue.js 應用。( https://parg.co/byC )
• VueConf 觀後感：首屆官方舉辦的 Vue.js 大會剛剛落幕，本文便是做者對於本身參會以後的感想進行的簡要闡述。做者首先介紹了本身參與的數個 WorkShop 與演講，從 Evan You 對於 Vue.js 發展歷史與現狀的介紹，到基於 Vuex 的狀態管理、服務端渲染、代碼分割等多個具體的技術實現。本文是很是不錯的對於 VueConf 的回顧，若是沒有參會或者還沒有了解過議程的同窗能夠一看，而且選擇本身感興趣的議題查看對應的膠片與演講視頻。 ( https://parg.co/ber )
• 選擇與支持 Vue.js 的理由：本文是來自 Monterail 的前端工程師、Vue.js 資深開發者 Damian Dulisz 分享他選擇與支持 Vue.js 的理由。本文不只僅從開發者的角度闡述了 Vue.js 對其的吸引力，還從產品經理的視角、Vue.js 社區發展的角度闡述了 Vue.js 的巨大潛力。本文是一篇不錯的介紹 Vue.js 最新變化與進展，而且對常見的 Vue.js 的部分誤解進行了闡述的文章；更多 Vue 相關資料參考 https://parg.co/byL 。( https://parg.co/bX2 )
• VueConf 觀後感：首屆官方舉辦的 Vue.js 大會剛剛落幕，本文便是做者對於本身參會以後的感想進行的簡要闡述。做者首先介紹了本身參與的數個 WorkShop 與演講，從 Evan You 對於 Vue.js 發展歷史與現狀的介紹，到基於 Vuex 的狀態管理、服務端渲染、代碼分割等多個具體的技術實現。本文是很是不錯的對於 VueConf 的回顧，若是沒有參會或者還沒有了解過議程的同窗能夠一看，而且選擇本身感興趣的議題查看對應的膠片與演講視頻。 ( https://parg.co/ber )
• 百度 Web 生態構建：發佈基於 Vue 的 PWA 解決方案 LAVAS；將全面支持 Web AR ：在 Baidu Create 2017 Web 生態分論壇上，百度搜索正式對外發布基於 Vue 的 PWA 解決方案 LAVAS，同時宣佈將全面支持 Web AR，此外，百度還對 MIP 的架構與原理、HTTPS 等技術進行了深度解析。( https://parg.co/bIZ )
• 基於 Vue.js 2 的分角色權限驗證：本文做者由於 Vue.js 平滑的學習曲線與易於理解的官方文檔而傾向於使用 Vue.js 進行前端開發工做，本文便是做者介紹如何利用 Vue.js 2 來爲項目添加基於角色的權限控制功能。做者在本文中首先介紹了基於角色的權限控制的概念與設計，而後討論瞭如何使用 vue-cli 來構建基礎項目架構而且按特徵劃定目錄層次，最後介紹了關鍵部分的代碼實現以及如何使用 Vuex 來管理應用狀態；更多 Vue 相關資料參考 https://parg.co/byL 。( https://parg.co/bIs )
• 基於 Vue.js 與 Laravel 構建實時儀表盤：本文是來自 Spatie 的工程師，介紹基於 Laravel 與 Vue.js 構建，實時的隊伍與事件信息展現面板的實踐總結。本文首先介紹了歷史項目的不足以及目前項目的設計考量，而後討論了前端網格佈局的解決方案。接下來做者分別介紹了服務端基於 Laravel 與客戶端基於 Vue.js 的關鍵代碼的實現；更多 Vue 相關資料參考 https://parg.co/byL 。( https://parg.co/bIJ )
• Vue 直出內存泄露問題的追查實踐：近期，做者遇到了 Vue 直出內存泄露問題，並進行了追查。其項目背景是，做者在一次規模較大的運營活動中正好碰到了內存泄漏的問題，技術背景和業務背景分別以下：技術背景：node直出項目，直出用到了 Vue 的直出方案；業務背景：一次 PV 最高達到 1400W 的運營活動 qps 的壓力下，後期使得服務出現必定錯誤率。本文將回顧整個追查的實踐過程。( https://parg.co/bIN )
• Vue.js 2.4.0 發佈：Vue.js 2.4.0 版本提供了內置的服務端渲染與異步組件支持，從而保證了在服務端渲染中也能使用異步組件，而再也不是侷限於路由中使用。此外該版本還簡化了包裝組件的寫法、提供了 v-on 等一系列新的指令或者 API 特性，而且修復了老版本中存在的錯誤；更多詳細內容可參考原文，或者閱讀 Vue.js 2.4.0 中的 4 個重大變化一文。
• Vue.js 項目中使用 TypeScript：Vue.js 是優秀的漸進式前端框架，而 TypeScript 則能夠爲項目添加靜態類型檢測的特性，本文便是介紹如何在 Vue.js 項目中使用 TypeScript。本文以 Vue.js 中的單文件組件爲例，首先討論了 tsconfig.json 的基本配置以及如何引入 Webpack 並配置合適的 loader；而後介紹了 TypeScript 的基礎用法，更多 Vue.js 相關資料參考 https://parg.co/byL 。
• Vue.js 組件的實踐分享：本文是來自 Morningstar 的工程師，分享的他們利用 Vue.js 進行前端組件化開發時的實踐經驗；主要是它們對於 Vue.js 組件編寫的心得。做者首先介紹了組件不一樣生命週期回調的含義，而後介紹了從簡單到複雜組件的狀態與數據管理，接下來介紹了 Slot 與 Minxin 在組件重用上的具體用法等內容；更多 Vue.js 相關資料參考 https://parg.co/byL 。
• 使用 Vue.js 與 Chart.js 構建漂亮的圖表：圖表是現代網站與應用的重要組成，它們可以幫助你更有張力地呈現數據；本文便是介紹如何利用 Chart.js 與 Vue.js 來有效地，針對不一樣格式的圖表進行可視化數據呈現。本文首先介紹了使用 vue-cli 構建基本的項目骨架，而後引入了 vue-router 進行路由劃分，接下來介紹了利用 vue-chartjs 庫依次構建常見的線型圖、餅圖、氣泡圖、柱狀圖等常見的圖表；更多 Vue.js 相關資料參考 https://parg.co/byL 。
• Vue.js 中安全地使用 jQuery 插件：實際上咱們並不推薦在界面中同時使用 jQuery 與 Vue.js，不過在項目開發中有時候咱們沒法避免地須要同時使用，本文便是討論如何安全地使用 jQuery 插件。本文以某個時間日期選擇插件爲例，首先討論了引入 jQuery 存在的潛在風險，而後一步步地介紹了初始化插件、將插件包裹在 Vue.js 組件內、如何在插件與組件之間進行數據交互等內容；更多 Vue.js 相關資料參考 https://parg.co/byL 。
• Vue.js 與 NativeScript 初窺：NativeScript 框架最值得稱道的便是其擴展性，它目前已經支持原生 JavaScript、Angular、Vue.js 等多種框架或者編碼方式，同時將來還計劃支持 Preact 等框架。本文便是介紹如何使用 NativeScript 與 Vue.js 協同開發，首先介紹瞭如何使用 NativeScript 命令行工具建立項目，而後引入 Vue.js 插件以及如何運行該項目；更多 Vue.js 相關資料參考 https://parg.co/byL 。
• Vue.js 2 單元測試指南：本文主要介紹如何利用 Jasmine 爲 Vue.js 2 應用搭建完整的單元測試；這裏選用 Jasmine 的緣由是它自己的性能較好，而且 Vue.js 自己也是使用該測試框架。本文首先介紹了環境搭建與待測試的組件構成，而後依次介紹了配置測試環境、如何根據組件的業務功能邏輯選定測試點、如何編寫不一樣目標的測試用例等內容；更多 Vue.js 相關資料參考 https://parg.co/byL 。
• 深刻 Vue.js 響應式原理：本文做者從 Java 與 C# 中經典的 Getters/Setters 引入，討論了 Vue.js 中從組件渲染函數、數據的 Getter、Setter 劫持、監聽器的控制以及重渲染觸發整個生命流程。更多 Vue.js 相關資料參考 https://parg.co/byL 。

開源項目

• vue2-elm：基於 vue2 + vuex 構建一個具備 45 個頁面的大型單頁面應用，涉及註冊、登錄、商品展現、購物車、下單等等，是一個完整的流程。挺不錯的學習參考資料。( https://github.com/bailicangd... )
• 基於 Vue2 與 Element-UI的管理系統模板：基於Vue.js 2.x系列 + Element UI 的後臺管理系統解決方案。( https://github.com/lin-xin/ma... )
• vue-3d-model：一個展現三維模型的 Vue 組件，支持模型操做和模型點擊事件，能自動縮放模型到合適大小並校訂偏移，目前支持 obj、stl、dae 和 json 格式的模型。
• awesome-github-vue：awesome-github-vue 是由 OpenDigg 整理並維護的 Vue 相關開源項目庫集合。( https://github.com/opendigg/a... )
• Eagle.js：Eagle.js 是基於 Vue.js 構建的建立 Web 中幻燈片的庫，支持動畫、主題、交互插件等經常使用功能。( https://github.com/zulko/eagl... )
• vue-recyclerview：vue-recyclerview 是基於 DOM 重用的可以處理大型列表項目的 Vue 組件，它可以用於構建高性能瀑布式列表或者無限列表。( https://github.com/hilongjw/v... )
• hacker-news-pwas：基於不一樣的前端框架實現的符合 PWA 應用特性的 Hacker News APP 的合集，包括了常見的 React、Angular、Vue、Preact 等多個版本，而且均在 Lighthouse 評測中達到 90 以上的評分。( https://parg.co/biQ )
• Aurora：Aurora 是基於 Vue 2.2.0 版的組件庫, 提供了常見的網格佈局、按鈕、表單域、分頁、模態窗口等組件。
• vue-table-component: vue-table-component 提供了輕量級、易於使用的 Vue.js 組件；該組件的一大特性在於其可以自動緩存用戶的篩選與排序結果，即便用戶刷新了頁面該數據仍然能夠保留使用。( https://github.com/spatie/vue... )