Vite零基础快速入门

适合人群：

本课程适合零基础想学习Vite的前端初学者、从Webpack迁移到Vite的开发者、需要快速搭建前端项目的工程师、以及希望提升开发构建效率的程序员。无论你是完全没接触过构建工具的小白，还是已经使用过Webpack但觉得配置繁琐，本课程都将带你从零开始，快速掌握Vite的核心概念和实战技能。

你将会学到：

学员将系统掌握Vite核心概念（Dev Server/预构建/生产构建）、Vite与传统构建工具对比、Vite项目创建与配置、CSS/静态资源处理、环境变量配置、插件系统使用、代理配置、生产环境打包部署等核心技能，具备使用Vite快速搭建前端项目的能力。

课程简介：

1. 为什么要学习本课程？

Vite是下一代前端构建工具，由Vue作者尤雨溪开发，已成为Vue官方推荐的项目脚手架。相比Webpack，Vite具有显著优势：

• 极速启动：冷启动时间远快于Webpack

• 毫秒级热更新：基于ESM的HMR，编辑即更新

• 简化配置：开箱即用，零配置即可上手

• 现代浏览器优先：充分利用原生ES模块特性

• 生态兼容：支持Vue、React、Svelte等主流框架

然而，很多学习者在学习Vite时遇到以下问题：

• 不知道Vite和Webpack的区别，该如何选择

• 项目创建后不知道如何配置

• CSS预处理、路径别名等常见需求不知如何实现

• 代理配置、环境变量等开发需求不熟悉

• 打包部署时遇到问题不知如何排查

本课程定位 “零基础快速入门” ，从Vite是什么讲起，通过实战演示带你快速掌握Vite的核心使用。

2. 课程特点

• 零基础友好：从构建工具概念讲起，无需Webpack基础

• 对比教学：Vite vs Webpack对比，理解设计差异

• 实战驱动：从项目创建到打包部署，完整流程演示

• 常见配置全覆盖：CSS、静态资源、别名、代理、环境变量

• 框架支持：Vue、React项目搭建演示

3. 主体大纲与设计思路

课程分为六大模块，共15节视频课：

模块一：Vite入门（3节）

• 什么是Vite？为什么需要Vite

• Vite vs Webpack对比

• Vite项目创建与运行

模块二：基础配置（3节）

• 配置文件详解（vite.config.js）

• 路径别名配置

• 开发服务器配置（端口/代理/https）

模块三：CSS与静态资源（3节）

• CSS预处理（Less/Sass/Stylus）

• PostCSS配置

• 静态资源处理（图片/字体/JSON）

模块四：环境变量与模式（2节）

• 环境变量配置（.env文件）

• 开发/生产模式切换

模块五：插件系统（2节）

• 常用插件介绍

• 自定义插件入门

模块六：生产构建与部署（2节）

• 生产环境打包

• 部署与性能优化