课程介绍
会编码的人有很多,能够提出解决方案的人少,想要高效开发,不仅要会编码,还要懂技术解决方案。

本课程深入学习 Vue3 全家桶 8 大核心模块,打牢基本功,底层原理,从组件化 到 架构设计。完成 前端 + 服务端 技术业务双闭环实战项目开发,收获对复杂项目多种核心技术解决方案,搞定商业项目中疑难杂症。唯有掌握稀缺技能,提升综合能力,形成差异化优势,才好跳出同质化竞争,获得更大的发展空间,拥有更多的选择权。

9 大核心模块 进阶式学习 构建 Vue3 完整知识体系

只有掌握体系化的知识,才能让你的技术之路走的更远

精选案例和组件封装让知识与实践相结合,底层原理讲解,知其然并知其所以然

只有掌握体系化的知识,才能让你的技术之路走的更远

前端+服务端技术 业务双闭环实战 收获企业级复杂项目开发能力

学习完整项目前后端开发流程,掌握移动端项目开发技巧和应用解决方案

项目讲解流程
项目所需技术铺垫
json-server 搭建后端服务
创建 vue 项目
通用功能搭建
页面开发
项目部署上线
页面开发流程
蓝湖APP UI 设计稿标注切图
UI 布局
后端接口开发
前端调用接口
数据渲染
优化和调试
项目介绍
本项目带你学习如何从技术选型、系统架构、API 接口设计、组件设计、后端接口开发、项目部署上线等多方面入手,实现一个水果外卖平台项目。
前端技术栈:Vue3、TypeScript、Vite、Vue Router 、Pinia 、Axios、Vant、VueUse、PostCss、EsLint、Prettier
后端服务技术栈:json-server + JWT + MockJS + SMS 阿里云短信服务

扫描二维码,查看艾鲜生项目

项目包含功能点
01

登录 + 注册页

表单验证

密码显示隐藏

验证码倒计时

短信验证码注册用户

短信验证码登录

02

首页 + 搜索页

地址位置定位

皮肤主题切换

带历史记录的搜索功能

特价秒杀、商品推荐

上拉刷新

下拉加载更多

03

商家 + 商品详情页

展示商家信息

商家优惠券

商品详情展示

商品分类展示

04

购物车页

购物车加减商品

删除购物车商品

单选和全选商品

清空购物车

购物车结算

05

订单页

显示收获信息

选择收获地址

订单分类展示

订单结算

订单取消

06

收获地址 和 我的页

删除收获信息

新增收获信息

修改收获信息

设置默认地址

显示用户信息

退出登录功能

项目中多种核心技术解决方案,解决你工作中最难搞定的问题

完整项目开发流程,掌握移动端开发技巧与方案

前端核心技术
ESLint + Prettier 统一项目代码风格
VantUi +Vue Use 第三方库安装与使用
Axios 二次封装,实现 API 接口调用设计
Axios 请求拦截器,在请求时携带 Token
Axios 响应拦截器,对状态码做统一处理
Pinia 实现全局共享用户和购物车信息
项目通用 CSS 设计
路由设计与实现
PostCSS 实现移动端适配
CSS 与 JS 览器兼容型处理
Token 实现身份校验
手机短信验证码注册和登录
上拉刷新和下拉加载更多
请求数据显示前 loading 效果
路由组件按需加载
前端路由权限控制
Vite 跨域代理请求配置
皮肤主题切换
带历史记录的索搜功能
如何记录用户登录状态
服务端核心技术
json-server 搭建服务端
静态资源的处理
MockJS 生成数据
token 生成与校验
如何开通阿里云短信服务
实现发送短信验证码接口
实现 token 身份认证中间件
实现统一响应数据格式中间件
设计受保护的 API
实现分页查询接口
nodemon 工具调试接口
REST CLient 插件调试接口
服务端跨域设置
项目涉及动画
全屏轮播图
滑动弹出层
倒计时功能
滑动菜单
图片懒加载
单选与全选
抛物线加购动画
左侧滑动删除
粘性菜单
选项卡功能
省市区三级联动
表单验证
项目部署与上线
真机测试
项目打包构建
阿里云、华为云服务购买与配置
域名备案解析
Linux 系统安装与基础配置
Nginx Web 服务器安装与基础配置
申请SSL证书服务
服务端线上部署
客户端线上部署
前后端联调

全新 Vue 课程学习模式 - 真实的 UI 设计稿、自定义 API 接口数据

通过 JSON 自定义数据接口,降低学习门槛、充分理解前后端分离开发。通过 json-server 搭建服务端 开发服务端 API 接口,提前进入企业真实项目开发模式

Vue 系统课 -《艾鲜生》项目 API 接口文档地址:https://www.arryblog.com/guide/doc/vue-api-doc.html

开发 API 接口
利用 json-server 搭建后端服务,开发项目所需 API 接口
RESTful API
提供完整的 API 接口文档
学习对接标准的 RESTful API
24 个 API 接口
覆盖全项目所需 API
从接口定义到接口开发
商业级 UI 设计
高颜值的 UI 设计
提供完整的 PSD 源文件
蓝湖设计稿、标注切图

与视频一一对应的图文教程,方便日常复习、面试和查阅

每节课都配有 与 视频 一 一 对应的完整在线图文教程、源代码、开发素材,方便日常复习、面试、项目开发过程中随时可查阅(不再去众多视频中查找),图文学习查询效率更高

超 42 万字详细解说 100+ 知识点

Babel 与 Webpack 课程大纲

查看完整目录

Vue3 核心基础大纲

查看完整目录

Vue3 组合式 API 与 插件开发大纲

查看完整目录

Vue3 动画 + VueRouter + Pinia 大纲

查看完整目录

TypeScript 课程大纲

查看完整目录

艾鲜生项目大纲

查看完整目录

项目部署与上线大纲

查看完整目录

课程专属 VIP 服务,个性化指导,不走弯路、提高学习效率

为同学们提供针对性的指导,找到适合自己的学习方式 和 路径规划,覆盖预习、学习、练习、项目实践、面试真题解析、复习 到 就业工作相关资料。

明星导师团

曾就职于一线大厂,腾讯、阿里、京东、百度、滴滴、携程、去哪儿网、唯品会等。

课程更重视企业最佳实践、底层原理、实战经验,企业工作中怎么做就怎么学、无缝衔接。

个性化学习路径规划指导
针对个人当前基础情况 和 学习投入时间,规划适合你的学习路径 和 学习方式,阶段性总结动态调整学习 及 练习节奏。
图文教程 + 视频 + 源码
每节课都配有 与 视频 一 一 对应的完整在线图文教程、源代码、开发素材,方便日常复习、面试、项目开发过程中随时可查阅(不再去众多视频中查找),图文学习查询效率更高
技术答疑 + 圈子交流
遇到技术问题,可跟授课老师 一对一交流,针对性解决个性化技术问题 以及 相关工作、项目经验。加入技术社群,与全球的同学(来自不同国家地区)交流拓展视野。
远程一对一协助问题解决
在日常练习 和 项目开发中遇到疑难杂症,各种难解的 Bug,老师会远程协助帮助同学一对一远程操作 和 视频语音解决问题。
专属技术博客
为同学们开发了专属技术博客,内容涵盖了最新中小企业 和 一线大厂 相关Web全栈相关技术实践、研究 与 知识分享,以及面试真题和答案解析等。
面试真题 + 就业指导
一对一简历指导,投递、注意事项,将所学知识 、项目、面试真题解析,萃取成适合自己 且 有竞争力的经验,找到自己真正的亮点。
适合人群
技术储备
个性化专属服务

课程导航