每周三集前端免费视频
每年帮助超100万前端爱好者学习

Vue.js+Koa2移动电商实战视频教程

课程说明

这个教程将全面讲解Vue+Koa的实战项目,学完本教程能成为以前端技术为主的全栈程序员。
这套课程总时长会超过20小时,每节课会控制在15分钟左右。
- 文字版教程免费:一分钱不花你也可以学习全部内容,可能稍微辛苦一点。
- 视频加辅导收费:预售阶段前500小伙伴188元(预售指技术胖录制视频过程中,每周更新3-4集,并提供每周一次的直播指导)。超过500名购买376元,在预售结束后,直播指导和群解答也不提供,视频会在CSDN学院上架出售。

涉及的技术栈包括:Vue+Vuex+Router+Vant+Node+Koa2+Mongoose+MongoDB

课程将从零开始搭建一个移动电商系统,包括首页展示,类别展示,购物功能,注册登录,积分系统,签到制作,查找页面,后台接口设置,权限管理。

付款方式

点击纯金网站付款观看
付款后,扫码发送付款截图,技术胖邀请你进群学习。

1 发送付款截图给技术胖。
2. 技术胖邀请你进群,查看群公告。

项目完成效果图

首页 列表页
购物车 个人中心

课程特色

课程用新的授课方式,视频教程+直播解答+微信群互动

  • 特点一:课程代码全部在视频中当场编写,保证跟着视频可以做出来。
  • 特点二:每周一次的熊猫TV直播解决问题(间和房间号在微信群内公开,预售阶段提供直播指导,预售结束后停止指导)
  • 特点三:每天技术胖群内提供20分钟课程问题解答,保证你的问题有人回答。

如果所讲知识学不会,可以直接找技术胖微信退钱。

预售更新频率

每周更新3-4集,每周一次的视频直播解答,每天20分钟群内互动。
(如果你有任何问题,可以在文章下方留言)

第01节:前端环境的搭建

2018年4月16日晚更新第一节:
花点小钱看视频
当你看这套教程的时候,我希望已经有一定的基础知识。如果你没有那学习来并不轻松,幸运的是在博客上可以完全免费的通过视频教程把这些技术知识学会。点击下面链接就可以免费学习。
1. Vue的基础知识,技术胖的博客已经提供了很多Vue的免费视频
2. Koa2和Node.js的基础知识。技术胖也已经在博客中作了免费的视频教程。
3. MongoDB的基础知识,技术胖也为你准备好了免费教程。

为了降低教程难度,就算你没有看过以上基础教程,你只要跟着项目一起操作,多练习,也是可以完全上手视频中的项目的,这也算技术胖为自己设置的一个教程挑战吧。

前端开发环境搭建

教程中我们采用前后端分离的开发模式,也就是前端调用后端提供的JSON接口,让Vue和Koa2的代码没有任何的耦合。所以开发环境也是完全分离的,开发完成后你甚至可以分别部署到两个服务器上来进行运行。

1.建立前端文件夹

我在D盘的Code目录下建立了SmileVue文件夹。smile是微笑的意思,使用这个单词,我需要大家在学习完这套教程都对整个项目的理解和技术上的应用有一个层次的提供,露出微笑的表情。

你也可以利用终端的形式建立,打开终端进入D盘的code目录下,建立命令如下:

mkdir SmileVue

当然这个目录可以和我的不一样,你可以起一个自己喜欢的名字,也可以找一个自己喜欢的盘符位置。

目录建立好以后,打开代码编辑工具Visual Studio Code(以后简称VSCode)。并在VSCode中打开我们的项目。

2.使用vue-cli生成项目目录
使用vue-cli非常方便快速,它可以为我们生成基本的Vue的项目结构。

  • 检测npm版本,在终端输入 npm -v,尽量使用5.x以上版本。
  • 全局安装vue-cli,在终端里输入,npm install vue-cli -g
  • 在终端中输入 vue init webpack

等到上面这些都正确安装完成后,我们需要验证一下,我们安装是否成功。

3.测试环境是否安装成功

  • 使用npm run dev 进行测试环境的打开。
  • 在浏览器中输入 http://localhost:8080 进行测试。

在浏览器中打开页面,出现Vue的正常页面时,说明你的项目已经初始化成功了。下节课我们就可以愉快的进行编程了。

一个README.md的重要性

在一个实际项目中,特别是开源项目中是非常重要的。
所以我们要建立一个README.md文件,这个就是你项目的说明文件。
每个公司的书写要求有所不同,所以请根据实际情况编写。
我这里就记录每节课的讲述内容和项目的初始化方法了。

总结

第一节我们轻松一点,讲了用vue-cli建立我们的项目前端目录。虽然很简单,但如果你vue-cli还不会使用,那你需要花点时间把我以前讲的vue-cli的课程看一遍。这也是我为什么第一节课没有多讲的原因。
vue-cli免费视频教程(点击学习)

第02节:优雅引入Vant组件库

2018年4月18日晚更新第二节:
花点小钱看视频
在工作中,有很多自己的组件库,但是在开发这些前都会选择一套稳定的开源的作为轮子作为基础(大公司是有能力造自己轮子的)。因为我们要作电商系统,所以选择有赞的Vant作为Vue的基本组件和样式组件。

Vant简介

vant是有赞前端团队提供的Vue组件库。它的有点有以下5个:
1. 国人制造,复合中国网站样式和交互习惯;
2. 单元测试超过90%,有些个人的小样式组件是不作单元测试的;
3. 支持babel-plugin-import引入,按需加载插件,无需单独引入样式;
4. 支持TypeScript,这个是2018年前端最应该学的技术;
5. 支持SSR,服务端渲染也是可以使用这个组件库的;

安装Vant

npm i vant -S:这是简写形式。
npm install vant --save:这是完整写法。

如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装,用cnpm安装时我个人是会出现一些未知的问题的,所以我在实际项目中,都是用了这种安装方式。

安装好后,看一下我们的package.json文件,并确认一下版本,我这里使用的是1.0.5版本。如果以后版本有所升级,可能下面课程中的使用方法有所不同,这个需要注意。

引入Vant的第一种方法(不推荐)

安装好vant后,可以使用以前常用的方法进行引入-这是一种全局引入的方式。
直接在src/main.js进行全局引入。

简单的三行代码已经可以把Vant引入进来了,但是这并不够优雅,也使得最后打包发布时会增加包的大小,Vue的SPA首屏打开时本来就有些慢,所以不建议使用这种方法进行引入。

优雅的引入Vant

vant是支持babel-plugin-import引入的,它可以让我们按需引入组件模块,并且不用管理我们的样式,现在Vue项目组件库的主流引入方法。
安装babel-plugin-import

也可以使用完整写法

在.babelrc中配置plugins(插件)

按需使用Vant组件

我们设置好.babelrc后,就可以按需引入Vant框架了。比如现在我们引入一个Button组件.
在src/main.js里加入下面的代码:

有了这段代码之后,我们就可以在需要的组件页面中加入Button了.


总结:

本节重点在于引入Vant的方式,建议小伙伴课下自行了解一下babel-plugin-import.

第03节:移动端屏幕适配基础

2018年4月19日晚更新第二节:
花点小钱看视频
制作webapp时一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样,这让很多小伙伴很是头疼。在这里我介绍一下我平时工作中常用的适配方案,当然适配方案有很多种,所以你有更好的方法,也可以使用或者大家一起交流。

常见移动web布局适配方法

  • 固定高度,宽度百分比:这种方法只适合简单要求不高的webApp,几乎达不到大型项目的要求,属于过时的方法。
  • Media Query(媒体查询):现在比较主流的适配方案,比如我们常用的样式框架Bootstrap就是靠这个起家的,它能完成大部分项目需求,但是编写过于复杂。
  • flex布局:主流的布局方式,不仅适用于移动Web,网页上也表现良好,这也是现在工作中用的最多的布局方式,那我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。

rem单位介绍

rem(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。

  • 适配原理:将px替换成rem,动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化,从而达到各种屏幕基本一直的效果体验。

现在我们作一个实验,你可以新建一个网页,并写入如下代码:

然后给html一个基本的样式:

上边我们使用了还是传统的使用px作为单位,我们在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的,我们再查看一下字体,发现大小是16px。

我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16px,那么换成rem单位,直接除以16就好。

页面并没有什么变化,也就是说我们掌握了换算关系。为了更好的说明这点,我们可以试着给html根样式加入字体大小,比如换成font-size:32px;。这时页面和字体都扩大了一倍。但是我们现在还是不能实现适配,因为我们根元素的字体是固定的。

JS控制适配屏幕

明白了REM的原理后,我们就可以使用这个特点来进行适应布局了,这也是现在比较主流的移动端web适配方案。当然你有更好的方案,也可以在文章下方进行留言。
三行JS代码完成适配:

总结

这节主要学习了移动端用Rem + JavaScript完成屏幕适配的方法。重点是理解Rem的特性,因为我们以后的程序都会使用Rem进行布局。这节课的内容虽然跟实战业务逻辑没什么关系,但是我希望小伙伴们一定要进行练习和掌握。

第04节:首页布局和路由设置

花点小钱看视频
这节开始布局首页,课程采用先静后动的原则,就是先用静态数据代替,然后使用Mock模拟数据,最后上真实的接口。这样的好处是,可以满足不同阶段不同岗位的小伙伴动能愉快的上手项目。

这节课的三个基础知识:
1. 首页路由的配置:这个如果有基础可以跳过学习的。
2. 建立首页组件(components):先把首页组件建立起来。
3. 讲解Vant的布局方法:我希望我这节课CSS的比重不占太多的课程内容,所以为了尽量少的涉及CSS,我们引入了第三方样式组件库。

user-scalable设置

先补一个上节课忘记加入的属性,在作移动端页面适配时,一般我们不希望用户自己缩放页面大小,我们可以在index.htmlmeta标签进行设置,加入user-scalable=no

首页路由的配置

打开路由配置页面:src/router/index.js,先删除vue-cli自动生成的HelloWorld.vue的配置,然后加入我们的路由配置.

这里的@代表的是项目的src目录。

建立首页组件

删除HelloWorld.vue文件,建立ShoppingMall.vue文件。编写如下代码:

这段代码手写是很麻烦的,我们可以利用VSCode的vue VSCode Snippets插件来解决,熟练掌握这个插件后,你写代码的速度会和思想统一,让代码飞起来。

写好这个可以使用npm run dev 进行预览一下。

Vant布局讲解

使用Vant的布局需要先进行按需引入,我们直接在/scr/main.js里引入RowCol组件。

他的布局是采用24格布局法,简单的理解,就是把页面均匀的分成24等分,然后我们控制这24个等分的比例就可以实现布局。

明白了这个编写方式,我们就可以愉快的布局了。

总结:
这节课学习了路由的建立、页面的快速建立方法和Vant的24格布局。这些在实际工作中都非常的常用,特别是Vue VSCode Snippets这个插件的使用会大大提高你的编码速度。

第05节:首页搜索区域的布局

2018年4月23日晚更新第五节:
花点小钱看视频
课程因为刚开始,我会带着大家写一些CSS样式,但是随着课程的不断深入,我会把CSS样式这个环境省略掉,大家可以直接到GitHub上clone项目,来查看CSS样式。

解决小问题

但页面很大的时候,我们作的移动适配方案会呈现很大的字体,这不是我们想要的。所以加一个判断,解决页面字体过大的问题。
index.htmlscript里加入判断页面的语句。

当页面宽度大于750px时,我们就把页面的宽度设置成750像素。

搜索条的布局(search bar)

*** 1. icon图标的下载 ***

利用van-rowvan-col我们快速布局一个搜索条的html骨架出来,代码如下。

并给他一些简单的样式

*** 2. icon图标的下载 ***

图标的下载我们依然在iconfont(网址:http://www.iconfont.cn/)进行下载,
找到自己喜欢的图标后,我们新建images文件夹,目录为src/assets/images,以后会把所有的项目图片都放到这里。

*** 3. 正确引入图片 ***
有很多小伙伴都在引入图片时摘了跟头,有的是开发时引入错误,有的是开发完成后,build时路径不对了。如果用require引入图片,在不作任何配置的情况下就可以基本解决你的图片路径问题。
先把图片用require引进到页面中:

然后通过绑定属性的方法插入图片

这时候进行预览,图片已经正常显示在浏览器中了。

*** 4. 写input和button ***

这里都是CSS样式和基本的html结构,所以直接上代码了。视频中我会作讲解说明,你可以完全拷贝下面的代码来看效果,然后进行修改学习。

第06节:首页轮播图的制作

这节课主要来制作轮播图区域(swiper),制作成功后,再了解一下Vant中swipe插件的全貌。

1.按需加载Swipe组件

按照惯例我们在使用Vant组件时需要把组件import进来。在/src/main.js下按需引入,代码如下:

现在我们/src/main.js的样子如下:

引入成功后,就可以写轮播图代码了。

2.下载这三张图片

我们作轮播图的三张图片,你可以先下载好。图片放到了七牛云上,你可以下载,也可以直接使用这些图片地址。


开始制作轮播图

首先我们在js部分写入一个data参数bannerPicArray,把图片地址放入到里边。
/src/components/pages/ShoppingMall.vue

模版文件如下

CSS代码:

这时候你会发现CSS样式并不是我们想要的效果,这主要是用Vant组件,他有一些默认的样式,所以我们要做一些CSS的修复操作。
overflow: hidden;,clear:both;

利用Vant实现图片轮播的懒加载

引入Vant的图片懒加载组件,以后我们的项目中会有很多远程图片,所以启用图片懒加载是必须的,那正好我们这里第一次开始用远程图片,就在这里学一下图片的懒加载

然后修改一下我们的template区域,加入v-lazy="banner.imageUrl"就可以图片的懒加了。

Chrome调试技巧 模拟慢速3G网络

视频中进行讲解,作为补充内容。

总结:这节课主要学习了Swipe组件的使用和图片懒加载的用处,最后还讲解了chrome浏览器下模拟slow 3G的情况。小伙伴一定要课下练习。


每周更新3-4集

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » Vue.js+Koa2移动电商实战视频教程
分享到: 更多 (0)

评论 43

  1. #30

    git 地址是什么呢?

    匿名18小时前回复
    • git地址已经在视频中给过了,请看视频。文章中不进行提供。

      技术胖16小时前回复
  2. #29

    胖哥是不是一个人买了好多人都能用吧

    匿名2天前回复
  3. #28

    good

    匿名2天前回复
  4. #27

    胖哥 17号给你微信支付了 加好友到现在一直没同意。。。

    匿名2天前回复
    • 你可以在QQ上联系我或者直接加我微信php100,再或者告诉我你的微信号我直接加你。都是可以的。

  5. #26

    hen很好啊 支持你啊 需要交多钱就看视频了

    匿名3天前回复
  6. #25

    胖哥,你网站这个评论区是什么插件吗还是自己写的?最近用vue搭了个博客,不知道评论区怎么写

    匿名3天前回复
  7. #24

    188是在线看?还是下载了看?

    匿名4天前回复
    • 现在是在纯金网站上看,APP上线后有缓存功能,就是你在有wifi情况下缓存,没网络的时候也可以看,比如在地铁上。

  8. #23

    胖哥现在还是188吗?

    匿名5天前回复
  9. #22

    有项目预览地址吗 我在线看一下

    匿名5天前回复
  10. #21

    胖哥,我支付了,微信上,通过一下

    匿名6天前回复
  11. #20

    有支付模块加入吗,后台统计管理功能有吗

    匿名6天前回复
    • 支付我会讲作的方法,但是由于需要企业身份才能注册,所以可能不会真实操作。
      后台只用Koa2提供前台使用接口,不作统计功能。

  12. #19

    这个项目前台后台都有的么

    匿名6天前回复
    • 前台使用Vue的SPA技术,后台使用Koa2提供前台需要的API接口。

  13. #18

    支付了,加我一下

    匿名6天前回复
  14. #17

    打了个赏,支持技术胖

    匿名7天前回复
  15. #16

    文字版是否持续更新

    匿名7天前回复
  16. #15

    牛逼牛逼 学习了~

    匿名1周前 (04-18)回复
  17. #14

    求更新啊 胖哥

    匿名1周前 (04-18)回复
  18. #13

    不错不错

    匿名1周前 (04-17)回复
  19. #12

    真是好东西

    匿名1周前 (04-17)回复
  20. #11

    胖哥,移动电商系统,是包括哪些呢?后台/PC端/移动端 ?

    匿名1周前 (04-17)回复
  21. #10

    学会了可以拿去当作面试的项目,哈哈

    匿名1周前 (04-17)回复
  22. #9

    求更新

    匿名1周前 (04-17)回复
  23. #8

    胖哥,付了款,加你好友了,同意一下

    匿名1周前 (04-17)回复
  24. #7

    好东西,赞一个,就是喜欢不讲虚的,直接上项目开怼

    匿名1周前 (04-17)回复
  25. #6

    匿名1周前 (04-17)回复
  26. #5

    匿名1周前 (04-16)回复
  27. #4

    好东西!

    匿名1周前 (04-16)回复
  28. #3

    你总要让我加个微信好友啊

    匿名1周前 (04-16)回复
  29. #2

    胖哥,4月10号,支付宝给你打赏了

    匿名1周前 (04-16)回复
  30. #1

    沙发

    匿名1周前 (04-16)回复