Vite实战指南

前言

Vite（法语意为“快速”）是由 Vue.js 作者尤雨溪开发的前端构建工具，旨在为开发者提供极速的开发体验。其核心原理基于浏览器原生 ES 模块导入（ESM），无需打包即可启动开发服务器，实现毫秒级冷启动，代码修改后通过按需编译实现极速热更新（HMR），显著提升开发效率。本文就在开发中的实战，仔细介绍下如何安装及使用。

一、环境准备

Windows系统
安装Node.js
访问https://nodejs.org/，下载LTS版本（推荐v18.x or +）。
安装时勾选自动配置环境变量，完成安装后验证：

node -v  # 显示版本号（如v18.16.0）
npm -v   # 显示npm版本号（如9.5.1）

配置npm镜像（可选）
若国内下载速度慢，可切换为淘宝镜像：

npm config set registry https://registry.npmmirror.com/

二、创建Vite项目

通过命令行初始化项目
打开CMD或PowerShell，执行以下命令（以Vue项目为例）：

npm create vite@latest my-vue-app --template vue

my-vue-app：项目名称（自定义）。
–template vue：指定Vue模板（可选react, svelte等）。
安装依赖
进入项目目录并安装依赖：

cd my-vue-app npm install