课程简介

初学者可以从 JavaScript 基础开始学习，然后逐步学习 Vue.js 和前端工程化

有一定基础的开发人员可以根据自己的兴趣和需求选择性学习

建议结合实际项目进行练习，以巩固所学知识

前端架构师 是一个非常全面的前端开发学习资源，涵盖了从基础到高级的各种知识点。建议所有前端开发人员收藏并学习

课程目录

• 01.第一期-制造Javascript语言
• 02.第二期：制造JavaScript语言
• 03.第三期：制造Javascript语言
• 04.第四期：Treeshaking实现
• 05.第五期-Treeshaking2
• 06.第六期-Treeshaking3
• 07.第七期-mini-vue01
• 08.第八期：mini-vue02-渲染器
• 09.练功房09：响应式
• 10.第10期—实现react任务调度器
• 16.第16期winter：toyjs（六）
• 17.第17期-winter：toyjs（七）
• 18.第18期-winter：toyjs（八）
• 170.02-Vue组件库-单元测试
• 19.第20期-手写Rollup第六次
• 20.第19期-手写Rollup第五次
• 21.01-组件通信
• 22.02-v-for和v-if优先级
• ….平价资源 666 root com
• 41.21-说说你对vuex的理解
• 42.22-从template到render做了什么
• 43.23-Vue实例挂载过程发生了什么
• 44.24-vue3设计目标和优化点
• 45.25-Vue3优化
• 46.26-单根节点
• 47.27-vuex-module
• 48.28-路由懒加载
• 49.29-ref和reactive异同
• 50.30-watch和watchEffect
• 51.31-SPA和SSR
• 52.32-vue-loader
• 53.33-自定义指令
• 54.34-$attrs和$listeners
• 55.35-v-once使用场景有哪些？
• 56.36-什么是递归组件
• 57.37-什么是异步组件
• 58.38-你如何处理Vue中的错误
• 59.39-如何从0实现Vuex
• 60.40-mutation和action的区别
• 61.41-长列表优化
• 62.42-监听vuex状态变化
• 63.1.1-前言：为什么要学习源码
• 64.1.2-学习源码的方法分享
• 65.1.3-搭建源码调试环境
• 66.1.4-Vue3源码整体结构
• 67.2.1.1-初始化流程解析-单步调试
• 68.2.1.2-初始化流程解析-查看调用栈信息
• 69.2.1.3-初始化流程-mount中做了什么
• 70.2.1.4-初始化流程-调试首次patch过程
• 71.2.1.5-初始化流程总结
• 72.2.2-思考：初始化流程的变化及原因
• 73.3.1.1-更新流程整体分析
• 74.3.1.2-断点调试更新流程
• 75.3.1.3-源码剖析更新流程
• 76.3.1.4-更新流程总结
• 77.3.2.1-Composition-API概述
• 78.3.2.2-Composition-API原理探究：setup执行顺序
• 79.3.2.3-Composition-API原理探究：如何与data等选项共存
• 80.3.2.4-Composition-API原理探究：生命周期钩子如何实现
• 81.3.2.5-Composition-API中其他有意思的点
• 82.3.3.1-Reactivity-API体验
• 83.3.3.2-响应式原理概论
• 84.3.3.3-响应式原理之reactive
• 85.3.3.4-响应式原理之ref
• 86.3.3.5-响应式原理之ReactiveEffect
• 87.3.3.6-响应式实现原理：computed
• 88.3.3.7-响应式实现原理：watch
• 89.3.3.8-Vue3中的响应式应用
• 90.3.4-响应式原理pk：Vue3-vs-Vue2
• 91.3.5-异步更新策略：nextTick工作原理
• 92.3.6-patch更新细节解析
• 93.4.1-编译器原理
• 94.4.2-Vue3编译过程解析
• 95.4.3-编译器优化策略
• 96.1.1-Vuex设计思路分析
• 97.2.1-创建Store实例
• 98.2.2-响应式的state
• 99.2.3-实现commit和dispatch
• 100.2.4-实现getters
• 101.2.5-实现严格模式
• 102.3.1-mini-vuex总结
• 103.1.1-vue-router设计思路分析
• 104.2.1-创建mini-router插件
• 105.3.1-实现RouterLink和RouterView组件
• 106.3.2-监听导航事件并响应变化
• 107.3.3-实现RouterView
• 108.4.1-总结
• 109.1.1-Vue设计思路分析
• 110.1.2-开发调试环境准备
• 111.2.1-初始化视图：创建App实例
• 112.3.1-实现渲染器renderer
• 113.4.1-实现数据响应式reactivity
• 114.4.2-在mini-vue中应用reactive
• 115.4.3-依赖收集和触发
• 116.5.1-高效更新：引入虚拟DOM
• 117.5.2-patch算法
• 118.5.3-mini-vue总结
• 119.1.0-为什么看vue2源码
• 11.第11期—winter：ToyJS（一）有限状态机fsm
• 12.第12期—winter：ToyJS（二）kmp前置
• 13.第13期—winter：ToyJS（三）kmp
• 14.第14期—winter：ToyJS（四）
• 15.第15期winter：toyjs（五）
• 120.1.1-vue2源码整体概述
• 121.1.2-调试学习法：搭建源码调试环境
• 122.1.3-源码学习法：寻找入口文件
• 123.1.4-实战：mini-vue构造函数
• 124.2.1-new-Vue做了什么
• 125.2.2-mount做了什么
• 126.2.3-生命周期钩子如何调用
• 127.2.4-父子组件谁先挂载
• 128.2.5-实战2：mini-vue初始化
• 129.3.1.1-对象响应式
• 130.3.1.2-响应式如何触发组件更新
• 131.3.2-实战3：mini-vue对象响应式
• 132.3.3-依赖收集
• 133.3.4-手写实战4：依赖收集
• 134.3.5-数组响应式
• 135.3.6-为什么需要Vue.set和Vue.del
• 137.3.8-手写实战6：数组响应式
• 138.3.9-拓展：Vue2响应式-vs-Vue3响应式
• 139.4.1-高效秘诀：异步更新
• 140.4.2-手写实战6：异步更新
• 141.4.3-拓展：宏任务和微任务
• 142.4.5-高效更新：引入虚拟DOM
• 143.4.4-拓展：深入理解nextTick
• 144.4.6-手写实战8：引入虚拟DOM
• 145.4.7-节点属性处理和手写实现
• 146.4.8-patch和diff算法
• 147.4.9-手写实战9：实现patch和diff
• 148.5.1-编译器的由来
• 149.5.2-编译器工作流程剖析
• 150.5.3.1-实战compile01：解析元素
• 151.5.3.2-实战compiler-解析文本
• 152.5.3.3-实战compiler：代码生成
• 153.6.1-组件机制剖析
• 154.6.2-事件实现机制
• 155.6.3-双向数据绑定原理
• 156.6.4-插槽工作原理
• 157.01-admin实战-整体介绍
• 158.02-admin实战-Vite环境初始化
• 159.03-admin实战-vue全家桶
• 160.04-admin实战-原子样式UnoCSS
• 161.05-admin实战-约定编程
• 162.07-admin实战-可配置布局管理
• 163.06-admin实战-按需引入
• 164.08-admin实战-i18n国际化
• 165.09-admin实战-路由进度条
• 166.10-admin管理-暗色夜间模式
• 167.11-Admin实战-菜单自动配置
• 168.Monorepo项目搭建
• 169.01-第一个组件
• 171.03-规范化
• 172.04-自动检查
• 173.05-CICD基础概念
• 174.06-持续集成实现
• 175.07-CD持续集成
• 176.08-如何编写README
• 177.09-完善软件包配置
• 178.03-09-Rollup实例与集成测试
• 179.03-08-手写Rollup-bundle模块打包
• 180.03-07-手写Rollup-Expand语句扩展
• 181.03-06-手写Rollup-Module对象
• 182.03-05-手写Rollup_analyse函数
• 183.03-04-手写Rollup-作用域对象
• 184.03-03-手写Rollup-小练习-打印作用域
• 185.03-02-手写Rollup-节点遍历器
• 186.03-01-手写Rollup-原型与AST语法树
• 187.01-01-手写Vite–基础功能
• 188.01-02-手写Vite-第三方库支持
• 189.01-03-手写Vite-Vue单文件组件支持
• 190.01-04-手写Vite–CSS文件支持
• 191.02-01-手写webpack-原型与Bundle
• 192.02-02-手写webpack-AST与模块分析
• 193.02-03-手写webpack-依赖分析与打包
• 194.01-手写-Nodemon-工具
• 195.01-Docker容器化
• 196.01-koa与中间件
• 197.02—EJS模版引擎
• 198.01-koa与中间件
• 199.02—EJS模版引擎
• 200.03-03-Oauth2三方认证
• 201.03-02-认证授权-token
• 202.03-01-认证授权-Cookie-Session-1080
• 203.Node-00-Node课程介绍
• 204.Node-01-运行与调试
• 205.Node-02-模块系统
• 206.Node-03-异步IO
• 207.Node-04-buffer-stream
• 208.Node-05-01-什么是网络
• 209.Node-05-02-tcp聊天室
• 210.Node-05-03-http服务器
• 211.Node-06-异步流程控制
• 212.Node-07-01-process主进程
• 213.Node-07-02-子进程
• 214.Node-07-03-cluster集群
• 215.08-内存泄漏排查
• 216.14.3-添加删除标签
• 217.14.2-实现Tabs基础功能
• 218.14.1-Tabs组件设计
• 219.0-导学
• 220.1-开源知识
• 221.2-Vue3组件化知识
• 222.3.1-项目创建和架构
• 223.3.2-代码规范eslint+prettier
• 224.3.3-基于vitepress的自动化文档
• 225.3.4-样式体系
• 226.4-TSX-in-Vue3
• 227.5.1-编写基础按钮
• 228.5.2.1-定义Button类型
• 229.5.2.2-编写按钮样式-type
• 23.03-简述Vue生命周期
• 230.5.3-样式重构
• 231.5.4-按钮尺寸
• 232.5.5-禁用状态
• 233.5.6-块级按钮
• 234.5.7-小总结
• 235.6.1-Vitest测试环境搭建
• 236.6.2-实战：为Button编写测试
• 237.7.1-全量打包
• 238.7.2-按需打包
• 239.7.3-发布组件库到npm
• 24.04-双绑使用和原理
• 240.8.1-为何需要CLI脚手架工具
• 241.8.2-初始化CLI工具
• 242.8.3-开发命令脚本
• 243.8.4-完善creat命令交互体验
• 244.8.5-组件目录创建
• 245.8.6-生成组件核心文件
• 246.8.7-生成类型，样式，测试和索引文件
• 247.9.1-Tree组件需求分析和设计
• 248.9.2-树形结构表示
• 249.9.3-Tree嵌套数据拍平处理
• 25.05-Vue中如何扩展一个组件
• 250.9.4-节点缩进、折叠功能实现
• 251.9.5-提取可复用逻辑到composables
• 252.9.6-hover效果、参照线
• 253.9.7-节点勾选
• 254.9.8-自定义图标
• 255.9.9-重构
• 256.9.10-节点新增删除操作
• 257.9.11-重构2：tree-composables拆分
• 258.9.12-节点懒加载
• 259.9.13-可拖拽树
• 26.06-子组件能否修改父组件数据
• 260.9.14.1-虚拟滚动原理
• 261.9.14.2-虚拟列表组件化并应用于树
• 262.10.1.1-Pagination需求和设计
• 263.10.2-实现交互逻辑usePage
• 264.10.3-Pagination基础功能
• 265.10.4-Pager基础逻辑
• 266.10.4.2-实现Pager中间页码
• 267.10.5-重构：抽取Pager组件
• 268.10.6-给Pagination添加功能
• 269.11.1-表单基础功能
• 27.07-Vue中如何做权限管理
• 270.11.2-表单项
• 271.11.3-垂直排列表单
• 272.11.4-标签尺寸和对齐
• 273.11.5.1-设置校验规则
• 274.11.5.2-触发校验
• 275.11.5.3-执行单项校验
• 276.11.5.4-执行全局校验
• 277.12.1-模态组件分析和设计
• 278.12.2-创建BaseModal
• 279.12.3-实现Modal
• 28.08-说说对Vue数据响应式的理解
• 280.12.4-Modal常用功能开发
• 281.13.1-图标组件设计
• 282.13.2-实现SIcon基本用法
• 283.13.3-设置图标尺寸和颜色
• 284.13.4-svg图标显示
• 285.13.5-内置图标
• 286.14.1-Tabs组件设计
• 287.14.2-实现Tabs基础功能
• 288.14.3-添加删除标签
• 289.15.1-Popover组件设计
• 29.09-虚拟DOM
• 290.15.2-封装BasePopover组件
• 291.15.3-实现Popover基础功能
• 292.15.4-实现Popover指示箭头
• 293.15.5-实现Popover定位功能
• 294.15.6-实现Popover自动定位功能
• 295.00-前端工程化概述
• 296.01-Npm包管理器
• 297.02-01-Monorepo
• 298.02-脚手架与CLI工具
• 299.03-模块化
• 30.10-diff算法
• 300.04-Rollup模块化
• 301.05-Babel编译器
• 302.06-01-单元测试理论
• 303.06-02-第一个单元测试
• 304.06-03-异步测试
• 305.06-04-Mock测试
• 306.06-05-Dom测试
• 307.06-06-快照测试
• 308.07-AST语法树
• 309.08-Git版本控制
• 31.11-vue3新特性
• 310.09-webpack核心概念
• 311.10-rollup基础
• 312.11-ESlint使用
• 313.12-Prettier使用
• 314.13-持续集成
• 315.14-调试工具
• 316.15-Polyfill垫片
• 317.16-代码覆盖率
• 318.17-E2E端到端测试
• 319.05-swagger、参数校验、登录注册
• 32.12-动态路由怎么使用
• 320.04-CRUD
• 321.02-Gitlab-&-Gitlab-runner
• 322.01-docker-&-k8s-init
• 323.01-基础Javascript环境搭建
• 324.02-Vue环境配置
• 325.03-Admin组装
• 326.04-构建性能-分析工具
• 327.05-构建性能-持久化缓存
• 328.06-构建性能-并行处理
• 329.07-构建性能-减少编译范围
• 33.13-你如何实现一个vue-router
• 330.08-构建性能-简化构建步骤
• 331.09-构建性能-使用高效编译器
• 332.10-页面性能-页面性能指标工具
• 333.11-页面性能-分包策略Chunk
• 334.12-页面性能-代码压缩
• 335.13-页面性能-动态加载
• 336.14-Webpack优化-Treeshaking
• 337.15-Webpack优化-作用域提升 – 副本
• 337.15-Webpack优化-作用域提升
• 338.16-HTTP缓存优化
• 339.17-静态资源内联与压缩
• 34.14-key的作用
• 340.18-页面优化-骨架屏
• 341.3.1-调试环境搭建和初始化流程cmproj
• 342.3.2-数据响应式原理
• 343.3.3-虚拟dom和patch算法
• 344.2.1.1-项目基础架构-样式组织、ui库和布局页
• 345.2.1.2-项目基础架构-动态导航
• 346.2.1.3-项目基础架构-请求封装
• 347.2.1.4-项目基础架构-权限控制
• 348.2.1.5-表格数据
• 349.2.1.6-图表可视化展示
• 35.15-nextTick
• 350.2.2-需求分析
• 351.2.3.1-玩家信息查询
• 352.2.3.2-分页和过滤查询
• 353.2.3.3-玩家信息管理
• 354.2.3.4-玩家信息创建和修改
• 355.2.3.5-头像上传
• 356.2.3.6-数据类型编写
• 357.2.3.7-办选率折线图
• 358.2.3.8-根据时间区间显示数据
• 36.16-computed-&-watch
• 360.1.1.2-模板语法
• 361.1.1.3-计算属性和侦听器
• 362.1.1.4-动态样式绑定
• 363.1.1.5-条件渲染和列表渲染
• 364.1.1.6-事件处理
• 365.1.1.7-表单输入
• 366.1.1.8生命周期
• 367.1.2.1-组件化基础
• 368.1.2.2-自定义事件
• 369.1.2.3-在组件上使用v-model
• 37.17-父子组件创建、挂载顺序
• 370.1.2.4-通过插槽分发内容
• 371.1.3.1-composition-api基本使用
• 372.1.3.2-setup详解
• 373.1.3.3-Reactivity-API
• 374.1.3.4-Reactivity-API-02
• 375.1.3.5-生命周期钩子
• 376.1.3.6-依赖注入
• 377.1.3.7-模板引用
• 378.1.4.1-混入
• 379.1.4.2-自定义指令
• 38.18-如何缓存和更新组件
• 380.1.4.3-Teleport
• 381.1.4.4-渲染函数
• 382.1.4.5-插件
• 383.1.5.1.1-全新开发构建工具—vite
• 384.1.5.1.2-范例：重构cart
• 385.1.5.2-vite中的资源加载
• 386.1.5.3-代码规范和格式化eslint+prettier
• 387.1.5.4-测试
• 388.1.5.5-在vite中使用ts
• 389.1.5.6-项目配置
• 39.19-如何从0到1架构一个Vue项目
• 390.1.5.7-项目打包、部署
• 391.1.6.1-vue-router4快速起步
• 392.1.6.2-动态路由匹配
• 393.1.6.3-嵌套路由
• 394.1.6.4-编程式导航
• 395.1.6.5.1-路由守卫01
• 396.1.6.5.2-路由守卫02
• 397.1.6.6-路由元数据
• 398.1.6.7-路由懒加载
• 399.1.6.8-composition-api
• 40.20-你知道哪些Vue最佳实践
• 400.1.6.9-缓存和过度动画
• 401.1.6.10-动态路由添加、删除
• 402.1.7.1-vuex快速起始
• 403.1.7.2.1-核心概念-状态State
• 404.1.7.2.2-核心概念-派生状态Getters
• 405.1.7.2.3-核心概念-状态变更Mutations
• 406.1.7.2.4-核心概念-动作Actions
• 407.1.7.3-模块化