首页
前端系统学习路线
核心基础教程

核心基础

HTML/HTML5 标签、属性

CSS/CSS3 基础样式、属性

综合 PC 端项目开发

Flex 弹性、Grid 网格布局

移动端、响应式项目开发

服务器部署

项目全面上云部署发布

代码规范

HTML/CSS代码规范

JavaScript 核心

CSS 布局 + JS 特效案例库

常见设计模式、设计原则

JS开发、优化技巧

npm 命令、JS 工具函数
核心知识梳理

核心基础

HTML/HTML5 核心标签、属性

CSS/CSS3 核心样式、属性

Flex 弹性、Grid 网格布局

多端响应式布局

移动端事件

JavaScript 核心 + ES6

JS基础 + 高级

ES6 基础 + 高级

前后端数据交互

小程序开发

小程序基础 + 实战

Vue 全家桶

Vue3.x 基础 + 实战

TypeScript + React 生态

TypeScript 基础 + 高级

React 基础 + 实战

Web 全栈学习路线

大厂必备完整版
面试题

面试方法论

如何搞定所有面试题

核心基础面试题

HTML5/CSS3

JavaScript+ES6

前端进阶面试题

浏览器、性能、安全

框架与全栈面试题

Vue、React面试题

全栈面试题

就业指导

求职前准备

求职方法论

收尾工作

入职前后注意事项
图文教程

Vue3 全家桶入门到实战，深入组件化到服务端 RESTful API，打造前后端分离商业级项目

深入 Vue3 全家桶底层原理，组件化、工程化进阶，从 0 到 1 完成前端 + 服务端、技术业务双闭环实战开发，搞定商业项目重难点技术解决方案，所学即是最佳实践

课程介绍

“

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

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

”

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

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

Babel 与 Webpack

常见的 DOS 命令

Node 相关知识

npm 基础教程

开发自己的 npm 包

Babel 基本使用

Webpack 基础

entry 入口配置

output 出口配置

loader 预处理器

plugins 插件

css 与 Js 兼容性处理

开发环境和生产环境优化
Vue3核心基础

模板语法

事件处理

计算属性

类与样式绑定

条件列表渲染

表单输入绑定

侦听器

自定义指令

生命周期

模板引用

组合式函数
Vue3 组件

组件基础

组件 props

组件 emits

透传属性

依赖与注入

插槽 slots

组件 v-model

单文件组件 css

动态组件与异步组件

暴露组件属性和方法
Vue3 生态全家桶

Vite前端构建工具

大型工程项目结构

单文件组件的使用

Vue Router 路由管理

Pinia 全局状态管理

TypeScript 类型标注
其它

Teleport 内置组件

KeepAlive 内置组件

Element Plus 组件库使用

VantUI 组件库使用

Vue 插件开发

Vue 渲染机制
Vue3 动画

单元素动画

列表动画

Animate.css 动画库

基于 css class 动画

基于侦听器动画
VueComposition API

Composition API 的产生背景

setup 函数的使用及函数参数

reactive + ref 等响应式API

watch 与 watchEffect

computed 计算属性

生命周期钩子
TypeScript

强类型语言 vs 弱语言类型

静态类型 vs 动态类型

类型的四象限、原始数据类型

包装对象类型、值类型

联合类型、交叉类型、复杂类型

索引类型、条件类型

数组、元组、any、unknown、never 类型

函数类型、symbol 类型、对象类型

Enum 类型、interface 接口类型

class 类型、泛型、类型断言、类型守卫

类型检查机制、类型兼容性、类型保护机制

TS 模块、namespace 命名空间、declare 关键字

d.ts 类型声明文件、高级类型、类型运算符

类型映射、TS 类型工具

TS 注释指令、tsconfig.json 配置文件

tsconfig.json 编译相关选项、tsc 命令行编译器

TS 工程实践，构建工具

ES6 与 CommonJS 的模块系统

TS 的命名空间、声明合并、声明文件

TS 编译工具、代码检查工具 TSLint 和 ESLint

Jest 单元测试
Vue项目开发

需求分析、技术选型

项目结构介绍

环境搭建与项目初始化

项目规范配置

项目兼容性处理

路由管理、状态管理

后端API接口开发

项目权限设计

API集成和数据交互

开发页面和组件

项目构建和部署上线
前后端分离项目云服务器部署

Vue 前端项目 + 服务端项目部署

云服务器购买与配置

Linux 下 Node 服务部署

数据库云部署

Nginx 反向代理

前后端多项目部署、性能优化

PM2 进程管理、log 日志

服务器域名备案、解析、DNS 验证

HTTPS 加密协议

域名 no-www 跳转 www 最佳实践

前后端联调

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

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

v-model 的内部实现原理

ref 与 reactive 方法底层实现原理

nextTick 与 $nextTick 实现原理

手写方法创建虚拟 DOM

Vue 渲染机制

更底层的 render 函数

Vue Router实现原理

IntersectionObserver 应用

Vite 的依赖预构建

底层原理深度剖析
二级下拉菜单

带历史记录的搜索功能

经典 todos

显示最新消息对话

列表添加、删除、排序时动画

根据屏幕大小渲染悬浮窗

导航加载进度条

登录及权限控制

. . . . . .

20+精选案例
Dialog 弹窗组件

Menu 无限下拉菜单组件

Message 消息提示组件

FancyList 高级列表组件

AddCart 加入购物车组件

Search 搜索组件

mitt 发布与订阅插件

Rate 星级评分插件

组件封装和插件开发
v-show 元素显示隐藏指令

v-style 元素添加style样式指令

v-debounce 防抖指令

v-drag 元素拖拽指令

v-LazyLoad 图片懒加载指令

useDebouncedRef 防抖ref

useAutoPx 自适应不同屏幕尺寸的px

useSmsCode 短信验证码逻辑

useAddCartAnimation 加购动画

自定义指令和 hooks

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

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

项目讲解流程: 项目所需技术铺垫; json-server 搭建后端服务; 创建 vue 项目; 通用功能搭建; 页面开发; 项目部署上线

页面开发流程: 蓝湖APP UI 设计稿标注切图; UI 布局; 后端接口开发; 前端调用接口; 数据渲染; 优化和调试

项目介绍: 本项目带你学习如何从技术选型、系统架构、API 接口设计、组件设计、后端接口开发、项目部署上线等多方面入手，实现一个水果外卖平台项目。; 前端技术栈：Vue3、TypeScript、Vite、Vue Router 、Pinia 、Axios、Vant、VueUse、PostCss、EsLint、Prettier; 后端服务技术栈：json-server + JWT + MockJS + SMS 阿里云短信服务

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

项目包含功能点

登录 + 注册页

表单验证

密码显示隐藏

验证码倒计时

短信验证码注册用户

短信验证码登录

首页 + 搜索页

地址位置定位

皮肤主题切换

带历史记录的搜索功能

特价秒杀、商品推荐

上拉刷新

下拉加载更多

商家 + 商品详情页

展示商家信息

商家优惠券

商品详情展示

商品分类展示

购物车页

购物车加减商品

删除购物车商品

单选和全选商品

清空购物车

购物车结算

订单页

显示收获信息

选择收获地址

订单分类展示

订单结算

订单取消

收获地址和我的页

删除收获信息

新增收获信息

修改收获信息

设置默认地址

显示用户信息

退出登录功能

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

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

前端核心技术: 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 插件调试接口; 服务端跨域设置