├─第1章 Vite 的概要介绍
│ 1-1 关于课程你需要了解的都在这里.mp4
│ 1-2 什么是 Vite.mp4
│ 1-3 Vite 对比其他构建工具的优势.mp4
│ 1-4 【讨论题】谈谈你对于构建工具得认识.png
│
├─第2章 Vite 的基础应用
│ 2-1 Vite 的优势 .mp4
│ 2-2 Vite 创建 Vue3 项目 .mp4
│ 2-3 Vite 创建 Vue2 的项目 .mp4
│ 2-4 Vite 创建 React 的项目 .mp4
│ 2-5 Vite 中使用 CSS 的各种功能 .mp4
│ 2-6 Vite 中使用 Typescript .mp4
│ 2-7 Vite 中处理静态资源的方法 .mp4
│ 2-8 Vite 集成 eslint 和 prettier .mp4
│ 2-9 Vite 中得 env 环境变量 .mp4
│
├─第3章 Vite 的高级应用
│ 3-1 图文[无]
│ 3-2 Vite 中的 HMR 热更新功能.mp4
│ 3-3 Vite 的 glob-import 批量导入功能.mp4
│ 3-4 Vite 性能揭秘—预编译优化.mp4
│ 3-5 在非 Node 服务中集成 Vite.mp4
│ 3-6 Nodejs 集成 Vite 开发时的 SSR.mp4
│ 3-7 Node 集成正式 build 的 Vite 应用的 SSR.mp4
│ 3-8 通过 SSR 功能实现静态站点导出.mp4
│ 3-9 Vite 配置项一览.mp4
│ 3-10 【任务题】使用vite更新一个你的现有项目 .png
│
├─第4章 Rollup 系统学习
│ 4-1 Rollup 介绍.mp4
│ 4-2 【知识拓展】ES Module详解 .jpg
│ 4-3 Rollup 的命令行使用.mp4
│ 4-4 Rollup 配置文件使用.mp4
│ 4-5 Rollup 插件功能解析（上）.mp4
│ 4-6 Rollup 插件功能解析（下）.mp4
│ 4-7 Rollup 常用插件盘点.mp4
│ 4-8 Esbuild 的使用教程.mp4
│ 4-9 Esbuild 插件的开发方式.mp4
│ 4-10 【任务题】用rollup打包一个vue或者react项目 .png
│ 4-11 【讨论题】谈谈你对esbuild未来的预测 .png
│
├─第5章 Vite 插件系统详解
│ 5-1 Vite 插件开发概述.mp4
│ 5-2 Vite 插件的执行时机.mp4
│ 5-3 Vite 插件 API 详解.mp4
│ 5-4 HMR-API 详细解析（上）.mp4
│ 5-5 HMR-API 详细解析（下）.mp4
│ 5-6 vite-vue3-jsx 插件概览.mp4
│ 5-7 vite-vue3-jsx 插件源码解析之配置和产出.mp4
│ 5-8 vite-vue3-jsx 插件详解之 HMR.mp4
│ 5-9 vite-vue3-jsx 插件解析之 SSR.mp4
│
├─第6章 实战 Vite 插件
│ 6-1 【拓展知识】Ast语法树介绍 .jpg
│ 6-2 MDX 语法介绍和插件设计.mp4
│ 6-3 MDX 的使用以及 mdx-loader 的原理.mp4
│ 6-4 MDX 如何配合 React 使用.mp4
│ 6-5 插件 Vue 版本基础实现.mp4
│ 6-6 Vue3 的 mdx 函数实现.mp4
│ 6-7 Vite-mdx 插件 vue3 联调.mp4
│ 6-8 Vite-mdx 插件集成 react.mp4
│ 6-9 Vite-mdx 插件进一步完善.mp4
│ 6-10 独立开发 vite-mdx 插件并发布到 npm.mp4
│ 6-11 解决发布 vite-mdx 插件的问题.mp4
│
└─第7章 Vite 源码解析
7-1 Vite 源码解析-目录结构和构建.mp4
7-2 启动Vite 的 createServer.mp4
7-3 resolveConfig 解析配置过程解析（上）.mp4
7-4 resolveConfig 解析配置过程解析（下）.mp4
7-5 pluginContAIner 作用和源码解析.mp4
7-6 JS 请求处理和模块图谱源码解析.mp4
7-7 vite-dev-server 中的 HMR 处理.mp4
7-8 vite 预编译优化源码解析.mp4
7-9 总结.mp4
7-10 【任务题】挑选vite的内部plugin，进行源码解析并分享 .png
有需要联系v；加客服窗口的联系方式
摘要：本文深入探讨Vite，一款新时代前端构建工具，从入门到精通，全面解析其核心特性和应用场景，帮助开发者玩转前端构建法则，提升开发效率。
1、Vite简介
随着前端技术的发展，构建工具的选择变得尤为重要。Vite，作为一款新一代前端构建工具，以其快速、轻量、模块化的特点，受到了广泛关注。Vite的核心优势在于其基于ESM（ES模块）的构建方式，能够提供更快的开发体验和更优的生产性能。
与传统构建工具相比，Vite在开发过程中具有以下特点：
1. 快速启动：Vite能够在几秒钟内启动开发服务器，极大地提高了开发效率。
2. 热更新：Vite支持热模块替换（HMR），在开发过程中可以实时预览代码更改，无需刷新页面。
3. 模块化：Vite支持ESM模块，使得代码组织更加清晰，易于维护。
2、Vite入门指南
对于初学者来说，掌握Vite的基本使用方法至关重要。以下是一些入门指南：
1. 安装Vite：通过npm或yarn安装Vite，并创建一个新项目。
2. 配置Vite：了解Vite配置文件（vite.config.js）的基本用法，包括加载器（loaders）、插件（plugins）等。
3. 开发环境：启动Vite开发服务器，并使用浏览器打开项目。
4. 生产环境：构建生产环境代码，并了解Vite在生产环境下的优化策略。
3、Vite高级特性
随着对Vite的深入了解，开发者可以尝试以下高级特性，进一步提升开发效率：
1. 插件开发：学习Vite插件开发，根据项目需求定制插件。
2. 优化配置：深入了解Vite配置文件，优化项目构建过程。
3. 多页面应用：使用Vite构建多页面应用，实现页面之间的数据共享和路由管理。
4、Vite应用场景
Vite适用于各种前端项目，以下是一些典型应用场景：
1. 单页面应用：Vite能够快速启动开发服务器，并支持热更新，非常适合单页面应用开发。
2. 多页面应用：Vite支持多页面应用构建，可以实现页面之间的数据共享和路由管理。
3. 组件库：Vite可以用于构建组件库，提高组件的复用性和可维护性。
总结：
本文从Vite简介、入门指南、高级特性和应用场景四个方面，全面解析了Vite这款新时代前端构建工具。通过学习本文，开发者可以快速掌握Vite的使用方法，并将其应用于实际项目中，提升开发效率。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
对占星塔罗感兴趣关注公众号