首页 实战 Vue3+Pinia+Vite+TS 还原高性能外卖APP项目
收藏

Vue3+Pinia+Vite+TS 还原高性能外卖APP项目

提升你的工业级业务实现能力,塑造你的业务思维,编程思维,设计思维

Vue3+Pinia+Vite+TS 还原高性能外卖APP项目

难度 入门 时长 23小时 学习人数 381 综合评分 8.59

Vue3 带来的改变,除了其自身新特性,还有相应的技术栈变化——比如 Pinia 将逐渐替代 Vuex 。本课程将带领大家使用 Vue3.2 + Pinia+ Vite + TS 高仿饿了么 Web App,帮助大家掌握 Vue3“全家桶”技术栈的同时,还掌握前端性能优化的常用方法和巧用设计模式应对复杂应用场景的能力。

one_pieces
讲师

大厂技术专家

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
课程目标

前端热门技术高仿饿了么项目,收获工业级项目实现能力

工业级项目实现能力/业务思维/编程思维/设计思维,4位一体全面提升

工业级项目实现能力
从项目新建、工程化规范、
mock server 搭建
到基础组件封装、业务组件开发、
项目部署
贯穿真实项目开发全流程,
扫除经验盲区
提升业务思维
高保真还原企业级项目开发
技术实现与技术原理兼顾并重
业务能力与技术深度双重提升
收获编程思维
组件化思想全程贯穿高质量项目开发
手敲36+个自研组件,从陌生到熟练
实践高效、易扩展的组件化思想
塑造设计思维
对标企业级别代码标准,
提高代码质量
能够使用设计模式处理复杂逻辑
更自如地应对实际项目中
可能遭遇的难题
课程亮点

精选高性能外卖 APP 项目实战,融技术/技巧/思维讲解于一体

前饿了么技术专家,带你高度还原项目,复现大厂开发经典场景

仿饿了么APP项目,带你学习如何从技术选型、系统架构、组件设计、设计模式、开发落地等多方面入手,实现一个高度还原产品体验的项目

项目新建

工程化规范配置

mock server 搭建

基础组件封装

业务组件开发

项目部署

从开发到部署,贯穿真实项目开发的全流程,扫除你的经验盲区

覆盖2023版最新 Vue3 生态圈热门技术,全程手敲代码,讲解清晰

不止步于业务实现,更深入原理,知其所以然,大幅提升技术深度

学习范本级的封装组件技巧,自主设计出工业级的高质量组件

严格贯彻生产级组件化开发思想,自研落地36+个高可用前端组件

7 个
接口模块

· 首页详情接口

· 首页搜索接口

· 商品列表接口

· 用户登录接口

· 我的详情接口

· 商家列表接口

· 商家详情接口

6 个
视图组件

· 首页视图组件

· 我的视图组件

· 搜索视图组件

· 登录视图组件

· 商家详情视图组件

· 商品详情视图组件

4+ 个
基础组件

· ScrollView 组件

· LoadingView 组件

· Popup 组件

· Overlay 组件

10+ 个
业务组件

· 金刚位组件

· 倒计时组件

· 滚动提示栏组件

· 商家列表组件

· 商家头部组件

· 商品列表组件

· 购物车组件口

· 添加移除购物车组件

· 组件

· 信息组件

9+ 个
Composition API

· useAsync

· useAuth

· useToggle

· useDebounce

· useCountDown

· useInterval

· useTimeout

· useLocalStorage

如何从多个维度思考实现“高质量”组件,课程中都有答案:

组件的可维护性?
组件的可读性?
扩展性、健壮性、通用性?
这个组件是否需要封装抽离?
这个组件是否和业务强关联?

5大经典设计模式真实落地,先人一步通向高手之路

学会性能优化 & 设计模式,掌握高级前端开发的核心技能

学习常见性能优化方式
提前预判并规避问题
useDebounce 避免多次请求
KeepAlive实现缓存
lazyLoad 图片懒加载
useLazyRender 避免无用组件渲染
了解主流的设计模式
用更优的逻辑解决开发问题
发布订阅模式,实现 EventEmitter类
组合模式,实现 Actions 类
责任链模式,实现事件冒泡处理
工厂模式,实现滚动动画类 Animater类
代理模式,实现 MScroll 类
课程大纲
第1章 课程简介
对课程进行简单的介绍。
第2章 Typescript 基础知识
本章将带领大家了解 TypeScript 的必要性,帮助大家学习 TypeScript 的基础类型和用法,包括 Interface、Class、Function、Enum、泛型等。
第3章 Git 使用
本章将介绍版本控制工具 Git,带领大家安装和配置 Git,帮助大家了解 Git 的使用以及学习常用的命令。
第4章 项目搭建及前期准备
本章将介绍 vite 工具,使用 vite 创建项目代码,同时配置诸如 eslint 等插件,对项目进行代码卡控。接着我们将搭建 Mock Server,配置自定义请求代理,完成前后端联调环境。
第5章 首页开发
本章开始正式的项目开发,我们将带领大家使用 vue-router 实现整体页面的框架,接着开发项目首页的基础和业务组件,包括 Search 搜索框、List 列表加载、ScrollBar 滚动提示栏、CountDown 倒计时等组件,同时我们将实现自定义 hooks,体验自定义 hooks 带来的好处。
查看完整目录

每个慕课网课程,都是一个专业的技术社区

个性化增值服务,学习有保障更高效

答疑专区+技术社区
连百度谷歌都搜不到的问题,在这里讲
师都将耐心详细解答,更有小伙伴一起
交流互动,共同进步。
独家“动态”教辅材料
丰富的专属教辅资料上传更新,通过课
程教案、原理图解、技术文档、演示案
例等各种教材,保障你的学习效果。
课程全套代码下载
提供课程全套源代码下载,包含:
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
实用图文资料
部分简单内容以图文形式呈现,与视频相
配合,既保障学习效果,又提高了学习效
率。
适合人群
1-2 年前端开发者
想要学习 Vue3 的前端开发者
有移动端 Web 开发需求的开发者
技术储备
掌握前端基础知识 HTML、CSS、JavaScript
有 Vue 相关基础及经验
有 Node.js、npm 使用经验
环境参数
Vue 3.2.27
脚手架 create-vue 3.3.1
构建工具 Vite 3.0.1
路由 Vue-Router 4.1.2
状态管理 Pinia 2.0.16
请求库 Axios 1.1.3
UI 组件库 Vant 3.6.2
TS 4.7.4
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题