Vue.js2.5+cube-ui重构饿了么App / 掌握Vue最全版本应用与迭代,打造极致流畅的WebApp
ustbhuangyi

北京科技大学计算机硕士。曾任职百度,滴滴,现就职于 Zoom,擅长前端自动化、工程化、前端架构。知名开源库 better-scroll 作者。对Vue.js有很深的理解,对代码有洁癖,追求高质量的代码, 跟随这样的老师学习,学会技术的同时,还可以提升编写高可扩展、通用性强的代码的能力。

 
  • 课程目录
  • 课程介绍
  • 1-1 导学(必看,课程新用户建议从“一期”开始学习)

  • 2-1 Vue-cli 3.0 介绍

  • 2-2 目录介绍 & cube-ui 安装

  • 2-3 api 接口 mock

  • 3-1 目录结构 & header 组件

  • 3-2 axios 封装 & 数据获取

  • 3-3 header-detail & star 组件

  • 3-4 header-detail 交互

  • 4-1 tab 组件基础实现

  • 4-2 tab 组件上下联动

  • 4-3 tab 组件抽象和封装

  • 5-1 scroll-nav 组件应用

  • 5-2 shop-cart 组件

  • 5-3 cart-control 组件

  • 5-4 小球飞入动画实现

  • 5-5 侧边栏内容定制化

  • 5-6 购物车列表组件

  • 5-7 购物车 sticky 组件

  • 5-8 购物车列表功能完善

  • 5-9 弹层类组件优化

  • 6-1 商品详情页骨架开发

  • 6-2 商品详情页购物开发

  • 6-3 商品详情页评价列表开发

  • 6-4 商品详情页评价选择组件开发

  • 7-1 评价页面骨架开发和数据获取

  • 7-2 评价页面评价选择组件 mixin 抽取

  • 7-3 商家页面静态页面开发

  • 7-4 商家页面本地缓存封装实现

  • 8-1 create-api 原理介绍

  • 8-2 create-api 源码分析(1)

  • 8-3 create-api 源码分析(2)

  • 8-4 create-api 源码分析(3)

  • 8-5 create-api 源码分析(4)

  • 9-1 打包构建&性能优化

  • 9-2 搭建小型 node 服务代理接口

  • 9-3 部署到云服务器

  • 9-4 nginx 配置多项目部署方案

  • 10-1 课程总结

  • 11-1 课程简介

  • 11-2 课程安排

  • 12-1 Vuejs介绍-近年来前端开发趋势

  • 12-2 Vuejs介绍-MVVM框架

  • 12-3 Vuejs介绍-什么是Vuejs及Vuejs生态

  • 12-4 Vuejs介绍-对比Angular、React

  • 12-5 Vuejs介绍-Vuejs核心思想

  • 13-1 Vue-cli介绍

  • 13-2 Vue-cli安装

  • 13-3 项目运行

  • 13-4 项目文件介绍

  • 13-5 webpack打包(上)

  • 13-6 webpack打包(中)

  • 13-7 webpack打包(下)

  • 14-1 需求分析

  • 14-2 项目资源准备

  • 14-3 图标字体制作

  • 14-4 项目目录设计

  • 14-5 mock数据(模拟后台数据)

  • 15-1 组件拆分(上)

  • 15-2 组件拆分(中)

  • 15-3 组件拆分(下)

  • 15-4 Vue-router(上)

  • 15-5 Vue-router(下)

  • 15-6 1像素border实现

  • 16-1 Vue-resource应用(上)

  • 16-2 Vue-resource应用(下)

  • 16-3 外部组件(1)

  • 16-4 外部组件(2)

  • 16-5 外部组件(3)

  • 16-6 外部组件(4)

  • 16-7 外部组件(5)

  • 16-8 外部组件(6)

  • 16-9 详情弹层页(1)- 实现弹出层

  • 16-10 详情弹层页(2)- CSS Sticky footer

  • 16-11 详情弹层页(3)- star组件抽象(上)

  • 16-12 详情弹层页(3)- star组件抽象(下)

  • 16-13 详情弹层页(4)- star组件使用

  • 16-14 详情弹层页(5)- 小标题自适应经典flex布局实现

  • 16-15 详情弹层页(6)- header剩余组件实现(上)

  • 16-16 详情弹层页(6)- header剩余组件实现(下)

  • 17-1 布局编写

  • 17-2 左侧menu布局

  • 17-3 右侧食品列表布局(1)

  • 17-4 右侧食品列表布局(2)

  • 17-5 右侧食品列表布局(3)

  • 17-6 better-scroll运用(1)

  • 17-7 better-scroll运用(2)

  • 17-8 better-scroll运用(3)

  • 17-9 shopcart购物车组件(1)

  • 17-10 shopcart购物车组件(2)

  • 17-11 shopcart购物车组件(3)

  • 17-12 shopcart购物车组件(4)

  • 17-13 shopcart购物车组件(5)

  • 17-14 shopcart购物车组件(6)

  • 17-15 cartcontrol组件(1)

  • 17-16 cartcontrol组件(2)

  • 17-17 cartcontrol组件(3)

  • 17-18 购物车小球动画实现(1)

  • 17-19 购物车小球动画实现(2)

  • 17-20 购物车小球动画实现(3)

  • 17-21 购物车详情页实现(1)

  • 17-22 购物车详情页实现(2)

  • 17-23 购物车详情页实现(3)

  • 17-24 购物车详情页实现(4)

  • 18-1 商品详情页实现(1)

  • 18-2 商品详情页实现(2)

  • 18-3 商品详情页实现(3)

  • 18-4 商品详情页实现(4)

  • 18-5 商品详情页实现(5)

  • 18-6 split组件实现

  • 18-7 ratingselect组件(1)

  • 18-8 ratingselect组件(2)

  • 18-9 ratingselect组件(3)

  • 18-10 ratingselect组件(4)

  • 18-11 ratingselect组件(5)

  • 18-12 评价列表(1)

  • 18-13 评价列表(2)

  • 18-14 评价列表(3)

  • 18-15 评价列表(4)

  • 18-16 评价列表(5)

  • 18-17 评价列表(6)

  • 19-1 ratings组件开发-overview开发(1)

  • 19-2 ratings组件开发-overview开发(2)

  • 19-3 ratings组件开发-overview开发(3)

  • 19-4 ratings组件开发-评价列表(1)

  • 19-5 ratings组件开发-评价列表(2)

  • 19-6 ratings组件开发-评价列表(3)

  • 20-1 seller组件开发-overview开发(1)

  • 20-2 seller组件开发-overview开发(2)

  • 20-3 seller组件开发-公告与活动开发(1)

  • 20-4 seller组件开发-公告与活动开发(2)

  • 20-5 seller组件开发-BScroll应用

  • 20-6 seller组件开发-商家实景图

  • 20-7 seller组件开发-商家信息

  • 20-8 seller组件开发-收藏商家(1)

  • 20-9 seller组件开发-收藏商家(2)

  • 20-10 seller组件开发-收藏商家

  • 20-11 seller组件开发-体验优化

  • 21-1 webpack配置介绍

  • 21-2 nodejs调试

  • 22-1 课程总结

  • 23-1 1.0升级2.0 配置文件修改

  • 23-2 1.0升级2.0 源码修改(上)

  • 23-3 1.0升级2.0 源码修改(下)

Vue.js全版本(涵盖1.0,2.0,最新2.5),全流程(开发到部署)实战教学

慕课网超人气Vue课程,迎来史上最强更新,这是属本课程的独家福利,加量不加价哦!

  • 高仿饿了么App媲美原生App的流畅体验

    项目已上线 扫码来体验

  • 代码少,开发快感受组件化、模块化的妙用

    学会使用 Vue.js 及开源组件库开发WebApp,对整个前端工程化、组件化、模块化的开发方式有所了解

  • 学员好评如潮课程质量不靠吹嘘靠口碑

    慕课网学员人数最多的Vue课程,你可以自行去看看课程评价,大家说好才是真的好

  • 上线级高质量代码教你最优质的代码写法

    讲师为滴滴D8,以上线代码的标准写代码,让你切实感受扩展性、通用性强的优质代码

以版本为经,以项目为纬,贯穿式讲解

在版本迭代中看透Vue的前世今生,在项目开发中感受Vue的优化提升

  • 以Vue1.0开发整个饿了么WebApp

  • 这是很多企业的实际需求项目最初由Vue1.0开发,当下面临升级

1.最新的Vue.js 2.5.x 版本开发整个项目、 最新的Vue-cli 3.0脚手架工具。 2.cube-ui 中 create-api 模块原理分析, 打包构建优化方案介绍。 (cube -ui 为滴滴公司开源组件库)

以外卖App商家页面为主线,融合核心业务模块,完美高仿“饿了么”

  • 项目的需求分析

  • 脚手架工具

  • 数据mock

  • 架构设计

  • 代码编写

  • 自测

  • 编译打包

  • 部署发布

外卖App商家页面为主线

以外卖App商家页为主线,引出开发所涉及的各种相关知识点,让同学们了解一个项目从0到1的整个过程,干货满满

外卖App核心的商家模块

提取外卖App最核心的商家模块(包括商品、评论、商家介绍等各模块),完全高仿“饿了么”外卖APP,让你更能领略Vue.js组件化的魅力

Vue.js最全技术栈

  • Vue.js

    组件封装

    组件通讯

    插槽

    过渡动画

    mixin

  • Vue cli

    开发调试

    webpack配置

    接口mock

    打包构建分析

  • cube-ui

    create-api

    TabBar

    Popup组件

    Dialog组件

    Scroll组件

    slide

    ScroolNav

    ScrollNavBar

  • 设计思想与模式

    学会使用Vue.js的过渡编写酷炫的

    交互动画

    了解移动端设备像素比的概念

    学会制作并使用图标字

    学会解决移动端1px边框问题

    学会移动端经典的css sticky

    footer布局

    学会flex弹性布局

学员专享增值服务

问答专区

关于课程的问题都可在问答区随时提问,讲师会进行

集中答疑

源码开放

课程案例代码完全开放给你,你可以根据所学知

识,自行修改、优化

适合人群

对于前端工程师,无论你现在是否用得到Vue.js,

你都应该提前掌握Vue.js

一旦你开始使用Vue.js,一定会对它爱不释手

技术储备要求

具有一定自学能力,相当于有一年左右前端开发经验或

用过其它前端框架进行过项目开发

有一定前端基础,了解JS、CSS、

HTML基础知识,了解Vue.js基础知识