（4.2萬字重啟2020）“從零到部署”Vue全棧電商應用系列教程---正式完結

作者：一隻圖雀

Github倉庫：（前端，後端）

圖雀社群主站（首發）：圖雀社群

部落格：掘金、知乎、慕課

公眾號：圖雀社群

聯絡我：關注公眾號後可以加圖雀醬微信哦

原創不易，❤️點贊+評論+收藏 ❤️三連，鼓勵作者寫出更好的教程。

源起

Vue 一開始完全是尤雨溪的一個個人興趣專案。2013 年的時候他還在 Google Creative Lab，那時候前端框架還處於比較草莽的階段，React 剛剛釋出還沒幾個人知道，最成熟的是 AngularJS (Angular1)。他當時一方面是想自己實現一個簡單的框架練練手，另一方面是想嘗試一下用 ES5 的 Object. define Property 實現資料變動偵測。眾所周知 AngularJS使用的是髒檢查，而當時大部分的應用還需要支援 IE8，所以不能全面使用 ES5，而個人專案則不需要考慮這些。Vue 就是這樣作為一個實驗性質的專案開始的。

Vue的主要特點就和官網所介紹的那樣：
（1） 簡潔 （2） 輕量 （3）快速 （4） 資料驅動 （5） 模組友好 （6） 元件化。該框架 Github Star 數高達 150K，是 Star 數最高的前端專案，並且 Vue 有著極為活躍的社群生態以及專職團隊進行維護以確保專案可以健康長久的發展。目前中國很多網際網路公司前端程式設計師的招聘要求都要求程式設計師掌握 Vue，像滴滴、美團、餓了麼等大廠也在重度使用 Vue 進行開發，並且有著像 Element 、mpvue、iView 這樣優秀的基於 Vue 開源專案存在，所以學習 Vue 是一個不錯的投資。

國內使用者

社群專案

努力與收穫

文章本身

為了響應 Vue 的 “社群共建” 理念，我們圖雀社群（加速技術的傳播）以社群技術佈道者的視角希望為加速 Vue 的傳播貢獻一份力量，於是從 2019 年 12 月 21 日，開始了 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用系列教程的規劃，併發布了第一篇教程《從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）》，到 2020 年 03 月 17 日，正式釋出系列最後一篇，也是整個系列的第八篇 《從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（終篇）》，歷時 86 天，一共產出了 4.2 萬字，獲得點贊 394 個，閱讀 23128 次，評論 73 條。

加星的程式碼倉庫

因為圖雀社群所有的實戰技術教程都是使用圖雀社群自研的開源寫作工具：Tuture 寫作而成，且都是基於一個專案進行寫作的，所以 Vue 全棧電商應用系列教程背後的原始碼也是經過驗證的且可以直接執行的，這也鼓勵了很多讀者去下載原始碼，自己跑服務，也因此給倉庫點了 Star，在這裡感謝你們的鼓勵：

前端倉庫：https://github.com/tuture-dev/vue-online-shop-frontend

後端倉庫：https://github.com/tuture-dev/vue-online-shop-backend

圖雀醬悄咪咪告訴你，程式碼倉庫有完整的 README 哦！可以幫助你快速把專案跑起來，所以無論是對原始碼有需求的同學還是希望結合程式碼看教程的同學，我們都可以滿足你啦?

當然如果讀到這裡的你忍不住衝動想點 Star 的話，圖雀醬也是非常歡迎的哦 （づ￣3￣）づ╭❤～

資料統計

為了幫助掘友們更好的學習 Vue 開發，整理是一種很好的方式，經過掘友的反饋和建議，圖雀社群決定將之前發的文章做一個總結，方便查漏補缺和系統學習，下面會列一個大綱，然後給出對應的摘要，接著給出對應的視覺化圖資料，展示此文章收穫的：閱讀、點贊、評論，以及對於的字數，幫助掘友建立一個體系化的同時，還能很方便的瞭解每篇文章的一個概要和資料詳情。

大綱

我們將在下面放上每篇文章的封面、連結和摘要，供讀者欣賞：

• 第一篇：《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）》我們用 Vue 搭建了前端專案的骨架，實現了基於巢狀、動態路由的多頁面跳轉。

• 第二篇：《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（二）》我們通過基於 Node.js 平臺的 Express 框架實現了後端 API 資料介面，並且將資料儲存在 MongoDB 中。這樣我們的網站就能夠記錄使用者新增的商品，並且無論以後什麼時候開啟，都能獲取我們之前的記錄。

• 第三篇：《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（三）》我們講解了 Vue 例項的 Props 和 Methods，接著我們又講解了最常見的 Vue 模板語法，並通過例項的方式將這些模板語法都實踐了一番，最後我們講解了 Vue 元件的組合，並完成了我們的發表商品頁面。

• 第四篇：《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（四）》我們使用了狀態管理庫 Vuex 並帶大家熟悉了 Store、Mutation 和 Action 三大關鍵概念，然後升級了迷你商城應用的前端程式碼。

• 第五篇：《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（五）》我們帶大家抽出了 Vue 元件從而簡化頁面邏輯，使用 Vuex Getters 複用本地資料獲取邏輯。

• 第六篇：《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（六）》我們帶大家一起學習瞭如何抽出 Getters 、 Mutations 和Actions 邏輯實現store的“減重”以及如何幹掉 mutation-types 硬編碼。

• 第七篇：《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（七）》我們基於element-ui元件庫重構了專案的前端程式碼，改善迷你電商應用的介面效果，提高使用者的體驗感；並且從試錯的角度帶大家一起踩了程式碼重構造成的一系列坑。

• 第八篇：《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（終篇）》我們首先使用 Docker 來容器化應用，接著教大家配置了 MongoDB 的身份驗證機制，給資料庫新增一份安全守護，最後我們教大家使用阿里的雲的容器映象服務將整個全棧應用部署到了雲端，使網際網路上的使用者可以訪問我們的網站。

字數總覽

文字資料

其中一共寫作字數：4.2萬字，在各篇分佈如下：

• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）》：4806 字
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（二）》：3881 字
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（三）》：4080 字
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（四）》：5776 字
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（五）》：3421 字
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（六）》：7318 字
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（七）》：8933 字
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（終篇）》：4406 字

圖示

圖雀醬的話

我們系列教程的每篇文章的字數基本保持在 6k 以下，保證朋友們的學習熱情不會因為字數過多而被磨滅；但是朋友們也知道，有時候靈感來了是無法控制的，所以少數的幾篇長文也希望朋友們能夠耐心閱讀，一定不會辜負大家的期望噠❤️

閱讀數總覽

文字資料

其中一共收穫閱讀數：23201次，在各篇分佈如下：

• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）》：6836 閱讀數
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（二）》：4184 閱讀數
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（三）》：2467 閱讀數
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（四）》：2815 閱讀數
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（五）》：1420 閱讀數
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（六）》：1686 閱讀數
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（七）》：1682 閱讀數
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（終篇）》：2111 閱讀數

圖示

圖雀醬的話

怎麼系列文章，越往後閱讀量越低呢？o(╥﹏╥)o 有沒有大佬能撈我一下呀?

點贊總覽

文字資料

其中一共收穫點贊：394贊，在各篇分佈如下：

• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）》：105 贊
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（二）》：57 贊
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（三）》：33 贊
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（四）》：47 贊
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（五）》：32 贊
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（六）》：32 贊
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（七）》：32 贊
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（終篇）》：56 贊

圖示

圖雀醬的話

辛苦付出的系列文章，大家給的贊?有點低啊，能不能讓我看到你們的歡呼ヾ(@^▽@)ノ

評論總覽

文字資料

其中一共收穫評論：73條，在各篇分佈如下：

• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）》：8 條
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（二）》：18 條
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（三）》：4 條
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（四）》：10 條
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（五）》：6 條
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（六）》：11 條
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（七）》：8 條
• 《 從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（終篇）》：8 條

圖示

圖雀醬的話

我們的系列教程需要大家的意見與建議才能夠達到更高的標準，進而才能幫助到更多熱愛技術的朋友。希望大家不要吝嗇自己的建議與想法，多多給我們評論，讓我們碰撞技術的火花，共同進步哇?╭(╯^╰)╮?

結語

Vue 自身定位

Vue 的定位就是為前端開發提供一個低門檻，高效率，但同時又能夠伴隨使用者成長的框架。所謂的 “伴隨使用者成長”，就是當一個新手使用者入門的時候，Vue 儘可能地讓這個過程簡單直接，而當之後使用者開始做更復雜的應用了，有更復雜的需求了，他會發現 Vue 依然能夠提供良好的支援。這樣 Vue 可以在新手成長到進階的開發者的一路上都提供價值。在這個大目標的前提下，Vue 會根據 web 平臺和 JavaScript 語言本身的進化不斷改進自己，確保自身可以始終勝任這個使命。

關於圖雀社群

Github CEO 曾說過：”開源已經勝利“。是的，世界各地的大大小小的廠商、個人、團體都在進行著開源活動，使用者開源產品；開源技術發展日新月異，然而與技術相匹配的文件/教程的發展卻不那麼樂觀，永遠是 ”鐵打的技術，流水的文件/教程“。

很多技術會發展很多年，技術的根基不會變化，但是文件/教程的更新速度遠遠比不上技術的迭代速度，所以產生了技術出來，沒有好的文件和教程，很多人就學不懂，不知道如何操作，導致技術傳播的很慢。

而圖雀社群帶著 ”加速技術的傳播“ 的使命，以能快速寫作技術實戰教程的 Tuture 開源寫作工具作為載體，於 2019 年年底被髮起，如今已經在掘金、知乎、慕課等平臺小有名氣，短短2-3個月，使用圖雀社群自主研發的 Tuture 寫作工具就已經寫作了近 30 篇高質量技術實戰教程，其中對於 React/Vue 更是各有長達 8 篇的系列教程，教程一經發布就廣受歡迎，目前參與的人數也有 6 人，並且 Tuture 寫作工具最近釋出了 3.0.0，正在內測階段，能夠大大減輕寫作技術實戰教程的繁瑣細節。我們在這裡發起呼籲，希望能有更多的熱愛分享和傳播開源技術的人加入進來，一起改進 Tuture 寫作工具，一起快速為開源技術產出教程，讓我們一起為 ”予力內容創作，加速技術的傳播， 構建一個更加美好的世界“ 的願景而奮鬥！

如果你也想參與這場開源技術內容創作運動，可以通過以下渠道聯絡和加入我們：

• 圖雀社群主站：http://tuture.co/
  
• Gitter聊天室：https://gitter.im/tuture-dev/tuture#
• 反饋郵箱：feedback@mail.tuture.co
• 微信公眾號「圖雀社群」，可以關注並加圖雀社群客服 圖雀醬哦：

參考資料

• 尤雨溪談 Vue.js：締造自由與真我
• 碼雲封面人物：https://zhuanlan.zhihu.com/p/58335278
• 草稿式圖表繪製：https://github.com/jwilber/roughViz#Scatter
  
• Vue 2017 現狀與展望：https://img.w3ctech.com/VueConf-Beijing.pdf