（4.2万字，重启2020）“从零到部署”Vue全栈电商应用系列教程---正式完结

作者：一只图雀
Github仓库：（前端^[1]，后端^[2]）
图雀社区主站（首发）：图雀社区^[3]
博客：掘金^[4]、知乎^[5]、慕课^[6]
公众号：图雀社区^[7]
联系我：关注公众号后可以加图雀酱微信哦
原创不易，❤️点赞+评论+收藏 ❤️三连，鼓励作者写出更好的教程。

源起

Vue 一开始完全是尤雨溪的一个个人兴趣项目。2013 年的时候他还在 Google Creative Lab，那时候前端框架还处于比较草莽的阶段，React 刚刚发布还没几个人知道，最成熟的是 AngularJS (Angular1)。他当时一方面是想自己实现一个简单的框架练练手，另一方面是想尝试一下用 ES5 的 Object. define Property 实现数据变动侦测。众所周知 AngularJS使用的是脏检查，而当时大部分的应用还需要支持 IE8，所以不能全面使用 ES5，而个人项目则不需要考虑这些。Vue 就是这样作为一个实验性质的项目开始的。

Vue的主要特点就和官网^[8]所介绍的那样：（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 实现迷你全栈电商应用（一）^[9]》，到 2020 年 03 月 17 日，正式发布系列最后一篇，也是整个系列的第八篇《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（终篇）^[10]》，历时 86 天，一共产出了 4.2 万字，获得点赞 394 个，阅读 23128 次，评论 73 条。

加星的代码仓库

因为图雀社区所有的实战技术教程都是使用图雀社区自研的开源写作工具：Tuture^[11] 写作而成，且都是基于一个项目进行写作的，所以 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 实现迷你全栈电商应用（一）^[12]》我们用 Vue 搭建了前端项目的骨架，实现了基于嵌套、动态路由的多页面跳转。

第二篇：《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（二）^[13]》我们通过基于 Node.js 平台的 Express 框架实现了后端 API 数据接口，并且将数据存储在 MongoDB 中。这样我们的网站就能够记录用户添加的商品，并且无论以后什么时候打开，都能获取我们之前的记录。

第三篇：《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）^[14]》我们讲解了 Vue 实例的 Props 和 Methods，接着我们又讲解了最常见的 Vue 模板语法，并通过实例的方式将这些模板语法都实践了一番，最后我们讲解了 Vue 组件的组合，并完成了我们的发表商品页面。

第四篇：《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）^[15]》我们使用了状态管理库 Vuex 并带大家熟悉了 Store、Mutation 和 Action 三大关键概念，然后升级了迷你商城应用的前端代码。

第五篇：《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（五）^[16]》我们带大家抽出了 Vue 组件从而简化页面逻辑，使用 Vuex Getters 复用本地数据获取逻辑。

第六篇：《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）^[17]》我们带大家一起学习了如何抽出 Getters 、 Mutations 和Actions 逻辑实现store的“减重”以及如何干掉 mutation-types 硬编码。

第七篇：《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（七）^[18]》我们基于element-ui组件库重构了项目的前端代码，改善迷你电商应用的界面效果，提高用户的体验感；并且从试错的角度带大家一起踩了代码重构造成的一系列坑。

第八篇：《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（终篇）^[19]》我们首先使用 Docker 来容器化应用，接着教大家配置了 MongoDB 的身份验证机制，给数据库添加一份安全守护，最后我们教大家使用阿里的云的容器镜像服务将整个全栈应用部署到了云端，使互联网上的用户可以访问我们的网站。

字数总览

文字数据

其中一共写作字数：4.2万字，在各篇分布如下：

《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（一）^[20]》：4806 字
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（二）^[21]》：3881 字
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）^[22]》：4080 字
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）^[23]》：5776 字
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（五）^[24]》：3421 字
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）^[25]》：7318 字
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（七）^[26]》：8933 字
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（终篇）^[27]》：4406 字

图示

图雀酱的话

我们系列教程的每篇文章的字数基本保持在 6k 以下，保证朋友们的学习热情不会因为字数过多而被磨灭；但是朋友们也知道，有时候灵感来了是无法控制的，所以少数的几篇长文也希望朋友们能够耐心阅读，一定不会辜负大家的期望哒❤️

阅读数总览

文字数据

其中一共收获阅读数：23201次，在各篇分布如下：

《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（一）^[28]》：6836 阅读数
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（二）^[29]》：4184 阅读数
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）^[30]》：2467 阅读数
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）^[31]》：2815 阅读数
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（五）^[32]》：1420 阅读数
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）^[33]》：1686 阅读数
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（七）^[34]》：1682 阅读数
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（终篇）^[35]》：2111 阅读数

图示

图雀酱的话

怎么系列文章，越往后阅读量越低呢？o(╥﹏╥)o 有没有大佬能捞我一下呀????

点赞总览

文字数据

其中一共收获点赞：394赞，在各篇分布如下：

《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（一）^[36]》：105 赞
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（二）^[37]》：57 赞
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）^[38]》：33 赞
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）^[39]》：47 赞
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（五）^[40]》：32 赞
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）^[41]》：32 赞
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（七）^[42]》：32 赞
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（终篇）^[43]》：56 赞

图示

图雀酱的话

辛苦付出的系列文章，大家给的赞????有点低啊，能不能让我看到你们的欢呼ヾ(@^▽^@)ノ

评论总览

文字数据

其中一共收获评论：73条，在各篇分布如下：

《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（一）^[44]》：8 条
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（二）^[45]》：18 条
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）^[46]》：4 条
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）^[47]》：10 条
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（五）^[48]》：6 条
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）^[49]》：11 条
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（七）^[50]》：8 条
《从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（终篇）^[51]》：8 条

图示

图雀酱的话

我们的系列教程需要大家的意见与建议才能够达到更高的标准，进而才能帮助到更多热爱技术的朋友。希望大家不要吝啬自己的建议与想法，多多给我们评论，让我们碰撞技术的火花，共同进步哇????╭(╯^╰)╮????

结语

Vue 自身定位

Vue 的定位就是为前端开发提供一个低门槛，高效率，但同时又能够伴随用户成长的框架。所谓的 “伴随用户成长”，就是当一个新手用户入门的时候，Vue 尽可能地让这个过程简单直接，而当之后用户开始做更复杂的应用了，有更复杂的需求了，他会发现 Vue 依然能够提供良好的支持。这样 Vue 可以在新手成长到进阶的开发者的一路上都提供价值。在这个大目标的前提下，Vue 会根据 web 平台和 JavaScript 语言本身的进化不断改进自己，确保自身可以始终胜任这个使命。

关于图雀社区

Github CEO 曾说过：”开源已经胜利“。是的，世界各地的大大小小的厂商、个人、团体都在进行着开源活动，使用者开源产品；开源技术发展日新月异，然而与技术相匹配的文档/教程的发展却不那么乐观，永远是 ”铁打的技术，流水的文档/教程“。

很多技术会发展很多年，技术的根基不会变化，但是文档/教程的更新速度远远比不上技术的迭代速度，所以产生了技术出来，没有好的文档和教程，很多人就学不懂，不知道如何操作，导致技术传播的很慢。

而图雀社区^[52]带着 ”加速技术的传播“ 的使命，以能快速写作技术实战教程的 Tuture^[53] 开源写作工具作为载体，于 2019 年年底被发起，如今已经在掘金、知乎、慕课等平台小有名气，短短2-3个月，使用图雀社区自主研发的 Tuture 写作工具就已经写作了近 30 篇高质量技术实战教程，其中对于 React/Vue 更是各有长达 8 篇的系列教程，教程一经发布就广受欢迎，目前参与的人数也有 6 人，并且 Tuture 写作工具最近发布了 3.0.0，正在内测阶段，能够大大减轻写作技术实战教程的繁琐细节。我们在这里发起呼吁，希望能有更多的热爱分享和传播开源技术的人加入进来，一起改进 Tuture 写作工具，一起快速为开源技术产出教程，让我们一起为 ”予力内容创作，加速技术的传播，构建一个更加美好的世界“ 的愿景而奋斗！

如果你也想参与这场开源技术内容创作运动，可以通过以下渠道联系和加入我们：

图雀社区主站：http://tuture.co/
Gitter聊天室：https://gitter.im/tuture-dev/tuture#^[54]
反馈邮箱：feedback@mail.tuture.co^[55]
微信公众号「图雀社区」，可以关注并加图雀社区客服图雀酱哦：

参考资料

尤雨溪谈 Vue.js：缔造自由与真我
码云封面人物：https://zhuanlan.zhihu.com/p/58335278^[56]
草稿式图表绘制：https://github.com/jwilber/roughViz#Scatter^[57]
Vue 2017 现状与展望：https://img.w3ctech.com/VueConf-Beijing.pdf^[58]

参考资料

[1]

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

[2]

后端: https://github.com/tuture-dev/vue-online-shop-backend

[3]

图雀社区: http://tuture.co/

[4]

掘金: https://juejin.im/user/5b33414351882574b9694d28

[5]

知乎: https://www.zhihu.com/people/tuture-dev

[6]

慕课: https://www.imooc.com/u/8413857/articles

[7]

图雀社区: https://tuture.co/images/social/wechat.png

[8]

官网: http://cn.vuejs.org/

[11]

Tuture: https://github.com/tuture-dev/tuture

[12]

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（一）: https://juejin.im/post/5dfd851c6fb9a0163e248463

[13]

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（二）: https://juejin.im/post/5dff8da76fb9a01634475731

[14]

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）: https://juejin.im/post/5e10a4665188253a800423a5

[15]

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）: https://juejin.im/post/5e1967cd6fb9a02fbc4ac6e6

[16]

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（五）: https://juejin.im/post/5e40bd0ce51d4526fe650232

[17]

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）: https://juejin.im/post/5e5dac91e51d4527214bba0f

[18]

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（七）: https://juejin.im/post/5e65bf4c6fb9a07cbb6e4a4e

[19]

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（终篇）: https://juejin.im/post/5e6f954af265da573c0c9426

[52]

图雀社区: http://tuture.co/

[53]

Tuture: https://github.com/tuture-dev/tuture

[54]

https://gitter.im/tuture-dev/tuture#: https://gitter.im/tuture-dev/tuture#

[55]

feedback@mail.tuture.co: mailto:feedback@mail.tuture.co

[56]

https://zhuanlan.zhihu.com/p/58335278: https://zhuanlan.zhihu.com/p/58335278

[57]

https://github.com/jwilber/roughViz#Scatter: https://github.com/jwilber/roughViz#Scatter

[58]

https://img.w3ctech.com/VueConf-Beijing.pdf: https://img.w3ctech.com/VueConf-Beijing.pdf

● 一小时的时间，上手 Webpack● 你不知道的浏览器页面渲染机制● 爬虫养成记——先跨进这个精彩的世界（女生定制篇）

·END·

图雀社区

汇聚精彩的免费实战教程

关注公众号回复 z 拉学习交流群

喜欢本文，点个“在看”告诉我