课程介绍(A000742):
Vite 因为其跨前端框架的能力和极其优越的性能,被称为下一代前端构建工具。如果你想在未来几年有更好的发展空间,那么最好尽早学会 Vite。 我们将从如何配置使用入手,深入到Vite的场景、插件以及源码,帮助大家系统掌握 Vite,全面提升对前端构建的认知,更能自行构建项目,为进阶前端架构师打下坚实的基础。
课程目录:
- 第1章 Vite 的概要介绍5 节 | 25分钟本章将向大家介绍什么是 Vite、Vite 的特色,并辅以介绍前端构建工具的发展历史进行对比,帮助同学们对 Vite 有个初步的印象。
- 视频:1-1 关于课程你需要了解的都在这里 (08:44)
- 视频:1-2 什么是 Vite (07:15)
- 视频:1-3 Vite 对比其他构建工具的优势 (08:52)
- 图文:1-4 【拓展知识】前端构建工具发展史
- 作业:1-5 【讨论题】谈谈你对于构建工具得认识
- 第2章 Vite 的基础应用9 节 | 111分钟本章中我们会学习,如何使用 Vite 搭建不同前端框架的项目,如何配置一些常见的功能比如 CSS、静态文件等来达到日常使用的目的。
- 视频:2-1 Vite 的优势 (10:22)
- 视频:2-2 Vite 创建 Vue3 项目 (12:22)
- 视频:2-3 Vite 创建 Vue2 的项目 (08:30)
- 视频:2-4 Vite 创建 React 的项目 (07:21)
- 视频:2-5 Vite 中使用 CSS 的各种功能 (15:47)
- 视频:2-6 Vite 中使用 Typescript (21:19)
- 视频:2-7 Vite 中处理静态资源的方法 (09:44)
- 视频:2-8 Vite 集成 eslint 和 prettier (12:38)
- 视频:2-9 Vite 中得 env 环境变量 (12:21)
- 第3章 Vite 的高级应用10 节 | 118分钟本章讲解 Vite 的一些高级功能,比如热更新,服务端渲染,集成到 node 服务中等,让同学们在遇到一些特殊情况时也能够得心应手。
- 图文:3-1 【知识拓展】什么是热更新
- 视频:3-2 Vite 中的 HMR 热更新功能 (14:02)
- 视频:3-3 Vite 的 glob-import 批量导入功能 (10:18)
- 视频:3-4 Vite 性能揭秘—预编译优化 (11:35)
- 视频:3-5 在非 Node 服务中集成 Vite (18:17)
- 视频:3-6 Nodejs 集成 Vite 开发时的 SSR (16:39)
- 视频:3-7 Node 集成正式 build 的 Vite 应用的 SSR (15:12)
- 视频:3-8 通过 SSR 功能实现静态站点导出 (11:54)
- 视频:3-9 Vite 配置项一览 (19:55)
- 作业:3-10 【任务题】使用vite更新一个你的现有项目
- 第4章 Rollup 系统学习11 节 | 137分钟Vite 的内核是围绕 Rollup 进行构建,因此,想要更好得理解 Vite 学习 Rollup 是必须的。本章将一起学习 Rollup 的核心应用。
- 视频:4-1 Rollup 介绍 (10:36)
- 图文:4-2 【知识拓展】ES Module详解
- 视频:4-3 Rollup 的命令行使用 (19:37)
- 视频:4-4 Rollup 配置文件使用 (18:38)
- 视频:4-5 Rollup 插件功能解析(上) (14:59)
- 视频:4-6 Rollup 插件功能解析(下) (19:28)
- 视频:4-7 Rollup 常用插件盘点 (13:32)
- 视频:4-8 Esbuild 的使用教程 (19:03)
- 视频:4-9 Esbuild 插件的开发方式 (20:43)
- 作业:4-10 【任务题】用rollup打包一个vue或者react项目
- 作业:4-11 【讨论题】谈谈你对esbuild未来的预测
- 第5章 Vite 插件系统详解9 节 | 123分钟本章详细介绍 Vite 的插件系统,包括插件能做什么、如何实现的、并通过讲解官方的Vite-Vue3-jsx 插件的源码来讲解 Vite 插件的实现原理。
- 视频:5-1 Vite 插件开发概述 (08:58)
- 视频:5-2 Vite 插件的执行时机 (09:22)
- 视频:5-3 Vite 插件 API 详解 (15:22)
- 视频:5-4 HMR-API 详细解析(上) (14:57)
- 视频:5-5 HMR-API 详细解析(下) (17:50)
- 视频:5-6 vite-vue3-jsx 插件概览 (09:49)
- 视频:5-7 vite-vue3-jsx 插件源码解析之配置和产出 (17:44)
- 视频:5-8 vite-vue3-jsx 插件详解之 HMR (18:18)
- 视频:5-9 vite-vue3-jsx 插件解析之 SSR (10:20)
- 第6章 实战 Vite 插件11 节 | 135分钟本章将带领同学们实现一个真实可用的 Vite 插件。应用该插件,可以轻松实现用 MDX语法来写页面,并且可实现主题切换内置组件等功能,让你快速搞定静态页面。
- 图文:6-1 【拓展知识】Ast语法树介绍
- 视频:6-2 MDX 语法介绍和插件设计 (08:05)
- 视频:6-3 MDX 的使用以及 mdx-loader 的原理 (16:07)
- 视频:6-4 MDX 如何配合 React 使用 (15:55)
- 视频:6-5 插件 Vue 版本基础实现 (13:45)
- 视频:6-6 Vue3 的 mdx 函数实现 (24:46)
- 视频:6-7 Vite-mdx 插件 vue3 联调 (10:08)
- 视频:6-8 Vite-mdx 插件集成 react (13:59)
- 视频:6-9 Vite-mdx 插件进一步完善 (08:14)
- 视频:6-10 独立开发 vite-mdx 插件并发布到 npm (17:52)
- 视频:6-11 解决发布 vite-mdx 插件的问题 (05:15)
- 第7章 Vite 源码解析10 节 | 139分钟本章将带领大家一起来从源码层面真正理解 Vite。我们会从 Vite的 dev server、热更新、如何编译文件这些角度来完整展示 Vite 的核心实现原理,让同学们不仅会用而是真正的理解 Vite
- 视频:7-1 Vite 源码解析-目录结构和构建 (11:17)
- 视频:7-2 启动Vite 的 createServer (19:37)
- 视频:7-3 resolveConfig 解析配置过程解析(上) (11:20)
- 视频:7-4 resolveConfig 解析配置过程解析(下) (11:54)
- 视频:7-5 pluginContainer 作用和源码解析 (14:04)
- 视频:7-6 JS 请求处理和模块图谱源码解析 (21:57)
- 视频:7-7 vite-dev-server 中的 HMR 处理 (15:45)
- 视频:7-8 vite 预编译优化源码解析 (25:24)
- 视频:7-9 总结 (06:51)
- 作业:7-10 【任务题】挑选vite的内部plugin,进行源码解析并分享
文件目录:
Vite 从入门到精通,玩转新时代前端构建法则完结无秘 |
│ ├─vite-main.zip 2.44MB |
│ ├─vite-vue3-master.zip 70.23KB |
│ ├─第1章 Vite 的概要介绍 |
│ │ ├─1-1 关于课程你需要了解的都在这里.mp4 30.98MB |
│ │ ├─1-2 什么是 Vite.mp4 69.61MB |
│ │ ├─1-3 Vite 对比其他构建工具的优势.mp4 59.06MB |
│ │ └─1-4 【拓展知识】前端构建工具发展史.pdf 402.15KB |
│ ├─第2章 Vite 的基础应用 |
│ │ ├─2-1 Vite 的优势.mp4 89.2MB |
│ │ ├─2-2 Vite 创建 Vue3 项目.mp4 124.02MB |
│ │ ├─2-3 Vite 创建 Vue2 的项目.mp4 68.88MB |
│ │ ├─2-4 Vite 创建 React 的项目.mp4 72.84MB |
│ │ ├─2-5 Vite 中使用 CSS 的各种功能.mp4 90.11MB |
│ │ ├─2-6 Vite 中使用 Typescript.mp4 123.24MB |
│ │ ├─2-7 Vite 中处理静态资源的方法.mp4 61.16MB |
│ │ ├─2-8 Vite 集成 eslint 和 prettier.mp4 82.07MB |
│ │ └─2-9 Vite 中得 env 环境变量.mp4 97.26MB |
│ ├─第3章 Vite 的高级应用 |
│ │ ├─3-1 【知识拓展】什么是热更新.pdf 397.9KB |
│ │ ├─3-2 Vite 中的 HMR 热更新功能.mp4 99.76MB |
│ │ ├─3-3 Vite 的 glob-import 批量导入功能.mp4 66.75MB |
│ │ ├─3-4 Vite 性能揭秘—预编译优化.mp4 80.32MB |
│ │ ├─3-5 在非 Node 服务中集成 Vite.mp4 167.3MB |
│ │ ├─3-6 Nodejs 集成 Vite 开发时的 SSR.mp4 97.37MB |
│ │ ├─3-7 Node 集成正式 build 的 Vite 应用的 SSR.mp4 90.26MB |
│ │ ├─3-8 通过 SSR 功能实现静态站点导出.mp4 68.78MB |
│ │ └─3-9 Vite 配置项一览.mp4 114.06MB |
│ ├─第4章 Rollup 系统学习 |
│ │ ├─4-1 Rollup 介绍.mp4 75.83MB |
│ │ ├─4-2 【知识拓展】ES Module详解.pdf 354.94KB |
│ │ ├─4-3 Rollup 的命令行使用.mp4 123.55MB |
│ │ ├─4-4 Rollup 配置文件使用.mp4 106.84MB |
│ │ ├─4-5 Rollup 插件功能解析(上).mp4 144.04MB |
│ │ ├─4-6 Rollup 插件功能解析(下).mp4 121.12MB |
│ │ ├─4-7 Rollup 常用插件盘点.mp4 95.3MB |
│ │ ├─4-8 Esbuild 的使用教程.mp4 111.08MB |
│ │ └─4-9 Esbuild 插件的开发方式.mp4 121.37MB |
│ ├─第5章 Vite 插件系统详解 |
│ │ ├─5-1 Vite 插件开发概述.mp4 28.3MB |
│ │ ├─5-2 Vite 插件的执行时机.mp4 77.16MB |
│ │ ├─5-3 Vite 插件 API 详解.mp4 85.15MB |
│ │ ├─5-4 HMR-API 详细解析(上).mp4 92.39MB |
│ │ ├─5-5 HMR-API 详细解析(下).mp4 102.41MB |
│ │ ├─5-6 vite-vue3-jsx 插件概览.mp4 55.09MB |
│ │ ├─5-7 vite-vue3-jsx 插件源码解析之配置和产出.mp4 99.76MB |
│ │ ├─5-8 vite-vue3-jsx 插件详解之 HMR.mp4 108.33MB |
│ │ └─5-9 vite-vue3-jsx 插件解析之 SSR.mp4 59.28MB |
│ ├─第6章 实战 Vite 插件 |
│ │ ├─6-1 【拓展知识】Ast语法树介绍.pdf 375.73KB |
│ │ ├─6-10 独立开发 vite-mdx 插件并发布到 npm.mp4 102.85MB |
│ │ ├─6-11 解决发布 vite-mdx 插件的问题.mp4 27.37MB |
│ │ ├─6-2 MDX 语法介绍和插件设计.mp4 61.22MB |
│ │ ├─6-3 MDX 的使用以及 mdx-loader 的原理.mp4 94.13MB |
│ │ ├─6-4 MDX 如何配合 React 使用.mp4 90.77MB |
│ │ ├─6-5 插件 Vue 版本基础实现.mp4 76.88MB |
│ │ ├─6-6 Vue3 的 mdx 函数实现.mp4 144.77MB |
│ │ ├─6-7 Vite-mdx 插件 vue3 联调.mp4 56.21MB |
│ │ ├─6-8 Vite-mdx 插件集成 react.mp4 80.63MB |
│ │ └─6-9 Vite-mdx 插件进一步完善.mp4 47.97MB |
│ └─第7章 Vite 源码解析 |
│ ├─7-1 Vite 源码解析-目录结构和构建.mp4 68.18MB |
│ ├─7-2 启动Vite 的 createServer.mp4 115.09MB |
│ ├─7-3 resolveConfig 解析配置过程解析(上).mp4 66.69MB |
│ ├─7-4 resolveConfig 解析配置过程解析(下).mp4 70.02MB |
│ ├─7-5 pluginContainer 作用和源码解析.mp4 78.42MB |
│ ├─7-6 JS 请求处理和模块图谱源码解析.mp4 121.01MB |
│ ├─7-7 vite-dev-server 中的 HMR 处理.mp4 89.24MB |
│ ├─7-8 vite 预编译优化源码解析.mp4 145.05MB |
│ └─7-9 总结.mp4 41.53MB |
本站所有资源均来自网络,版权归原作者所有,本站仅提供收集与推荐,若侵犯到您的权益,请【给我们反馈】,我们将在24小时内处理!