前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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 開發一個寵物小精靈的戰鬥場景的教程，還是挺有意思的。( suo.im/1jwicW )
Vue.js 實用技巧：本文來自於餓了麼大前端的 cinwell， Vue.js 2.0 已經發布了有一段時間，生態鏈也日漸完善。作者在使用 Vue.js 開發專案時收集的一些工具和使用技巧，分享給各位。( 6me.us/alZ )
Vue.js 前端框架比較：本文是對常用的基於 Vue.js 的前端框架的比較。( 6me.us/5E8wN )
滴滴 webapp 5.0 Vue 2.0 重構經驗分享：滴滴的 webapp 是執行在微信、支付寶、手 Q 以及其它第三方渠道的叫車軟體。藉著產品層面的功能和視覺升級，我們用 Vue 2.0 對它進行了一次技術重構；本文即是本次重構中的經驗分享。( github.com/DDFE/DDFE-b… )
使用 Vue.js 與 Electron 構建桌面問卷應用：本文介紹瞭如何利用 Vue.js 與 Electron 來構建簡單的桌面問卷應用，作者首先介紹瞭如何使用 vue-cli 建立簡單的 Web 專案，然後討論瞭如何將專案執行在 Electron 中，最後闡述瞭如何將應用整體打包釋出。( parg.co/bQ3 )
Vue.js 2.2 完整 API 清單：本文是 Vue.js 2.2 中完整的 API 介紹，可以作為手冊隨時查閱 。（ parg.co/bhC ）
建立基於 Vue.js 的可複用元件：本系列文章關注於如何利用 Vue.js 建立可複用的元件，每一篇都會講解某個具體的介面元件，然後一步一步地介紹如何利用 Vue.js 來實現這些元件，順便也介紹 Vue.js 的各種原理與設計準則。( parg.co/b49 )
面向重度 jQuery 開發者的 Vue.js 介紹：本文是一位經驗豐富的開發者，在將原有的基於 jQuery 工程重構為基於 Vue.js 工程的過程中總結出的經驗與認識介紹。本文首先從零開始介紹如何搭建 Vue.js 基礎專案並且一步一步地實現應用的各種特徵，同時還對比了利用 Vue.js 與 利用 jQuery 實現的差異性以及二者在設計思想上的區別。( parg.co/bRN )
後 MVC 時代：在很長一段時間裡，MVC（Model-View-Controller）架構是構建應用的黃金法則，而近幾年隨著 React，Vue.js，Angular 等以元件為中心的庫的流行，MVC 架構在前端卻趨於平寂。開發者往往將模型、檢視與控制器耦合在單個實體內，而打破了傳統的 MVC 架構中的約束。類似於 Flux 或者響應式程式設計的設計思想也改變了應用狀態的處理方式，不同於 MVC 中的雙向繫結，而是資料在實體之間單向流動。本文即是討論在所謂後 MVC 時代的 GUI 應用架構的思考。( realm.io/news/the-po… )
在 Vue.js 專案中使用第三方庫：本文介紹瞭如何在基於單檔案模組的 Vue.js 專案中使用 Lodash、Moment、Axios 這些優秀的第三方庫或框架。本文遞進地介紹了譬如全域性變數引用、單檔案匯入、擴充套件 Vue 物件、外掛實現等多種方式。( parg.co/bf4 )
Vue.js 2 中的許可權驗證指南：本文介紹瞭如何快速構建 Vue.js 2 應用程式並且新增合適的許可權驗證模組。本文首先介紹了 Vue.js、Angular 以及 React 之間設計思想的對比，然後介紹了 Vue.js 2.0 中的核心概念與基本用法，最後以某個真實的登入控制案例介紹瞭如何為 Vue.js 應用中新增許可權驗證功能。( 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的渲染效能做測試，並解析渲染步驟，給出嘗試優化的方案和最終結論。( 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 實現離線模式、拍照、上傳圖片、實現推送、訪問裝置地址等內容。( parg.co/btH )
Vue.js 與外部互動：Vue.js 是非常優秀的網頁構建框架，不過我們往往會面臨著比較割裂的開發情況，即網頁中的一部分是交由 Vue.js 管理，而另一部分是交由其他指令碼或者外掛管理；這中情況在多團隊協同開發或者對舊版本的改造時可能會碰到。而本文則介紹了應該如何使用 Vue.js 與外部其他指令碼進行互動，譬如管理 head 、body 標籤、監聽鍵盤事件等等內容。( parg.co/bMw )
使用現代方法端到端測試 Vue.js 應用：端到端測試是 Web 測試中的重要組成部分，也是應用開發流程中不可或缺的部分；本文則介紹瞭如何使用 TestCafe 對 Vue.js 應用進行端到端測試。( parg.co/bV9 )
從 React 遷移到 Vue.js：React 與 Vue.js 都是非常優秀的前端框架，不同的團隊在不同的應用場景下可能有不同的偏好。而本文則記錄了作者從 React 遷移到 Vue.js 中的思考過程；本文首先介紹了 React 與 Vue.js 之間的異同，對比了二者常用的語法特點以及生態圈，並且討論了為何從 React 遷移到 Vue.js 的理由。( parg.co/bJ8 )
基於 Vuex 的 Vue 應用狀態管理：就如同其他基於元件的框架，對於基於 Vue 開發的應用隨著其體量與功能的增加，對於狀態的追蹤會變得日漸麻煩。而本文則分析了狀態管理的痛點以及深入淺出地介紹瞭如何利用 Vuex 進行 Vue 應用狀態管理。( parg.co/bJk )
Vue 2017 現狀與展望：5 月 20 日，在全球首屆 VueConf 上，Vue.js 作者尤雨溪介紹了 Vue.js 2017 的現狀，並對 Vue 的未來做了展望。本文是對此次演講的回顧。獲取更多Vue相關內容，請關注前端之巔公眾號並回復“Vue”。( parg.co/bJ6 )
Nuxt.js SSR 與許可權驗證指南：Nuxt.js 是基於 Vue.js 構建的服務端渲染框架，它允許開發者快速建立支援服務端渲染的應用；而本文則是介紹了利用 Nuxt.js 搭建應用並且為其新增許可權驗證模組的步驟。( parg.co/bic )
在 Vue.js 中使用過濾器：過濾器是 Vue 中常用的處理資料渲染結果的方式之一，我們首先需要明白過濾器並不是對於方法、推導值等的替代，畢竟它們並沒有真實地轉換資料，而只是對使用者的可視結果進行了處理。自 Vue 2.0 之後框架本身並無內建的過濾器，而本文則是介紹了基本的過濾器的使用語法以及幾個經典的使用場景。( css-tricks.com/using-filte… )
使用 Vue 與 NativeScript 開發跨端應用：目前標準的開發 NativeScript 應用的方式是使用樸素的 JavaScript 或者 Angular，而本文介紹瞭如何結合使用 Vue 與 NativeScript 來開發跨終端應用。本文首先闡述了 Vue.js 相較於 React 或者 Angular 的優勢，然後闡述了使用 Vue 語法來開發基礎 NativeScript 應用的步驟。( www.nativescript.org/blog/a-new-… )
基於 Firebase 與 Vue.js 構建基於地理位置的聊天室：本文介紹了基於 Firebase 與 Vue.js 構建某個基於地理位置搜尋與配對的聊天室應用的過程，應用釋出在這裡，還是挺有意思的應用。本文除了介紹 Vue.js 專案的基礎構建與語法之外，還介紹了所謂 Geohash 的知識與 Firebase 相關介面的使用。( parg.co/bLH )
在 Vue.js 中使用 Mixins：在專案開發中我們經常會碰到兩個元件的業務邏輯有所相似，可能共享相同的底層業務邏輯；此時我們就需要考慮如何來合理地劃分程式碼，即避免冗餘程式碼，也不能過度抽象。而本文則介紹瞭如何在 Vue.js 中使用 Mixins 來編寫可重複使用的功能程式碼片；Mixin 允許我們將部分程式碼片封裝到函式中然後動態地在多個元件中使用。( parg.co/b9S )
為什麼我選擇了 React 而不是 Vue？：本文作者闡述了自己在技術選型過程中更傾向於 React 的原因，本文帶有較強的主觀色彩，請讀者批判性閱讀。本文作者認為 React 與 Vue 雖然是相似的前端元件型庫，但是 Vue、Angular、Knockout 等框架依舊是以 HTML 為中心，使用指令來描述部分邏輯；而 React 則是以 JavaScript 為中心，完全使用 JavaScript 程式碼來描述邏輯。本文從模板、工具、狀態的可變性等角度來論證自己的觀點。( parg.co/b9H )
三分鐘互動式介紹 Vue.js：Vue.js 是近年來逐步流行的輕量級構建前端介面的元件庫，其相對平滑的學習曲線確保了開發者能夠快速入門使用。而本文作者則循序漸進地介紹了 Vue.js 基礎使用知識，並且在每一段中都包含了互動式程式碼演示；作者依次介紹了 Vue.js 中模板語法與資料繫結、常見指令以及響應使用者輸入等內容；更多 Vue 相關資料參考這裡。( parg.co/byU )
TDD 與 Vue.js：在真實的專案中我們免不了需要進行程式碼測試，而本文即分享如何在 Vue.js 中遵循測試驅動開發的基礎知識。本文首先利用 Vue CLI 的預設模板建立了一個簡單的元件，然後為其新增部分基礎功能，同時會為每個元素新增單元測試。( parg.co/byQ )
Vue.js 框架的優勢與缺陷（*僅代表原作者個人看法，若有翻譯不當之處請指正）：Vue.js 已經在國內的很多公司得到了廣泛應用，與 Google 的 Angular 以及 Facebook 的 React 鼎足而立，本文作者則是從自己的角度闡述了 Vue.js 目前的優勢與潛在缺陷所在。首先 Vue.js 的優勢在於其包體較小，良好的文件方便開發者理解與使用，並且能很快地整合到現有專案中，其靈活性與資料通訊機制也保證了專案的可擴充套件性。而目前來看 Vue.js 的缺陷則在於其開發者社群可能不如 React 等成熟，並且主要使用者以國人為主，與英語社群的交流存在一定語言障礙，同時其靈活性本身也是一種雙刃劍，對於某些開發者而言反而會造成困難；更多 Vue 相關資料參考這裡。( parg.co/byl )
利用 Webpack 加速 Vue.js 應用的四種姿勢：Webpack 是開發 Vue.js 單頁應用的必須工具之一，它能夠幫你處理複雜的編譯步驟從而簡化開發流程，並且能夠幫助你優化應用體積與效能表現。而本文中作者即從單檔案元件、優化 Vue 構建配置、瀏覽器快取管理、程式碼分割這四個角度討論瞭如何利用 Webpack 提供的特性來加速 Vue.js 應用。( parg.co/byC )
VueConf 觀後感：首屆官方舉辦的 Vue.js 大會剛剛落幕，本文即是作者對於自己參會之後的感想進行的簡要闡述。作者首先介紹了自己參與的數個 WorkShop 與演講，從 Evan You 對於 Vue.js 發展歷史與現狀的介紹，到基於 Vuex 的狀態管理、服務端渲染、程式碼分割等多個具體的技術實現。本文是非常不錯的對於 VueConf 的回顧，如果沒有參會或者尚未了解過議程的同學可以一看，並且選擇自己感興趣的議題檢視對應的膠片與演講視訊。 ( 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 。( parg.co/bX2 )
VueConf 觀後感：首屆官方舉辦的 Vue.js 大會剛剛落幕，本文即是作者對於自己參會之後的感想進行的簡要闡述。作者首先介紹了自己參與的數個 WorkShop 與演講，從 Evan You 對於 Vue.js 發展歷史與現狀的介紹，到基於 Vuex 的狀態管理、服務端渲染、程式碼分割等多個具體的技術實現。本文是非常不錯的對於 VueConf 的回顧，如果沒有參會或者尚未了解過議程的同學可以一看，並且選擇自己感興趣的議題檢視對應的膠片與演講視訊。 ( parg.co/ber )
百度 Web 生態構建：釋出基於 Vue 的 PWA 解決方案 LAVAS；將全面支援 Web AR ：在 Baidu Create 2017 Web 生態分論壇上，百度搜尋正式對外發布基於 Vue 的 PWA 解決方案 LAVAS，同時宣佈將全面支援 Web AR，此外，百度還對 MIP 的架構與原理、HTTPS 等技術進行了深度解析。( parg.co/bIZ )
基於 Vue.js 2 的分角色許可權驗證：本文作者因為 Vue.js 平滑的學習曲線與易於理解的官方文件而傾向於使用 Vue.js 進行前端開發工作，本文即是作者介紹如何利用 Vue.js 2 來為專案新增基於角色的許可權控制功能。作者在本文中首先介紹了基於角色的許可權控制的概念與設計，然後討論瞭如何使用 vue-cli 來構建基礎專案架構並且按特徵劃定目錄層次，最後介紹了關鍵部分的程式碼實現以及如何使用 Vuex 來管理應用狀態；更多 Vue 相關資料參考 https://parg.co/byL 。( parg.co/bIs )
基於 Vue.js 與 Laravel 構建實時儀表盤：本文是來自 Spatie 的工程師，介紹基於 Laravel 與 Vue.js 構建，實時的隊伍與事件資訊展示皮膚的實踐總結。本文首先介紹了歷史專案的不足以及目前專案的設計考量，然後討論了前端網格佈局的解決方案。接下來作者分別介紹了服務端基於 Laravel 與客戶端基於 Vue.js 的關鍵程式碼的實現；更多 Vue 相關資料參考 https://parg.co/byL 。( parg.co/bIJ )
Vue 直出記憶體洩露問題的追查實踐：近期，作者遇到了 Vue 直出記憶體洩露問題，並進行了追查。其專案背景是，作者在一次規模較大的運營活動中正好碰到了記憶體洩漏的問題，技術背景和業務背景分別如下：技術背景：node直出專案，直出用到了 Vue 的直出方案；業務背景：一次 PV 最高達到 1400W 的運營活動 qps 的壓力下，後期使得服務出現一定錯誤率。本文將回顧整個追查的實踐過程。( 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 個頁面的大型單頁面應用，涉及註冊、登陸、商品展示、購物車、下單等等，是一個完整的流程。挺不錯的學習參考資料。( github.com/bailicangdu… )
基於 Vue2 與 Element-UI的管理系統模板：基於Vue.js 2.x系列 + Element UI 的後臺管理系統解決方案。( github.com/lin-xin/man… )
vue-3d-model：一個展示三維模型的 Vue 元件，支援模型操作和模型點選事件，能自動縮放模型到合適大小並校正偏移，目前支援 obj、stl、dae 和 json 格式的模型。
awesome-github-vue：awesome-github-vue 是由 OpenDigg 整理並維護的 Vue 相關開源專案庫集合。( github.com/opendigg/aw… )
Eagle.js：Eagle.js 是基於 Vue.js 構建的建立 Web 中幻燈片的庫，支援動畫、主題、互動外掛等常用功能。( github.com/zulko/eagle… )
vue-recyclerview：vue-recyclerview 是基於 DOM 重用的能夠處理大型列表專案的 Vue 元件，它能夠用於構建高效能瀑布式列表或者無限列表。( github.com/hilongjw/vu… )
hacker-news-pwas：基於不同的前端框架實現的符合 PWA 應用特性的 Hacker News APP 的合集，包括了常見的 React、Angular、Vue、Preact 等多個版本，並且均在 Lighthouse 評測中達到 90 以上的評分。( parg.co/biQ )
Aurora：Aurora 是基於 Vue 2.2.0 版的元件庫, 提供了常見的網格佈局、按鈕、表單域、分頁、模態視窗等元件。
vue-table-component: vue-table-component 提供了輕量級、易於使用的 Vue.js 元件；該元件的一大特性在於其能夠自動快取使用者的篩選與排序結果，即使使用者重新整理了頁面該資料仍然可以保留使用。( github.com/spatie/vue-… )