Vite 是一个现代化的前端构建工具和开发服务器，专为快速开发和优化 JavaScript 项目设计。它由 Vue.js 作者尤雨溪创建，具有以下特点：

相比 Webpack，Vite 的开发启动速度更快，配置更简单，非常适合现代前端开发。

Vite 简明教程

这个教程将带你快速创建一个 Vite 项目，运行开发服务器，并构建生产代码。总耗时约 5 分钟！

1. 安装 Node.js

确保你已安装 Node.js（版本 >= 18.0.0）。检查版本：

node -v

如果版本过低，下载最新 LTS 版本（https://nodejs.org/）或使用 nvm 安装：

nvm install 18
nvm use 18

2. 创建 Vite 项目

运行以下命令创建项目：

npm create vite@latest my-vite-project
  • 按提示选择框架（如 Vue、React、Vanilla）：

- 键入 Vanilla（纯 JavaScript）或 Vue 等。

cd my-vite-project
npm install

3. 启动开发服务器

运行开发服务器：

npm run dev

4. 项目结构

Vite 项目结构非常简单，以下是典型目录：

my-vite-project/
├── node_modules/        # 依赖
├── public/             # 静态资源（如图片）
├── src/               # 源代码
│   ├── main.js       # 入口文件
│   ├── App.vue      # 主组件（如果使用 Vue/React）
│   └── assets/      # 样式、图片等
├── index.html        # 入口 HTML
├── package.json      # 项目配置
└── vite.config.js    # Vite 配置文件

5. 编写简单代码

以 Vanilla JS 为例，编辑 src/main.js：

import './style.css'

document.querySelector('#app').innerHTML = `
  <h1>Hello, Vite!</h1>
  <button id="click-me">Click me</button>
`

document.querySelector('#click-me').addEventListener('click', () => {
  alert('You clicked me!')
})

6. 配置 Vite（可选）

Vite 的默认配置已足够，但你可以通过 vite.config.js 自定义。例如：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000, // 自定义端口
  },
  build: {
    outDir: 'dist', // 构建输出目录
  },
})

7. 构建生产代码

生成生产环境的优化代码：

npm run build
npm run preview

8. 部署（可选）

将 dist 目录中的文件上传到静态托管服务（如 Netlify、Vercel、GitHub Pages）即可部署。确保 index.html 在根目录。

常见问题

  • 启动失败（如 vite: command not found）：

- 确保运行 npm install 安装依赖。 - 使用 npx vite 或检查 package.json 的 scripts 是否包含 "dev": "vite"。 - 确认 Node.js 版本 >= 18。

  • 热更新不生效：

- 检查文件是否在 src 目录下。 - 确保没有语法错误（查看浏览器或终端错误信息）。

  • 需要更多功能：

- 添加插件（如 @vitejs/plugin-vue 用于 Vue）。 - 参考官方文档：https://vitejs.dev/

总结

你已经学会：

Vite 的速度和简单性让前端开发更高效！继续探索官方文档（https://vitejs.dev/）或尝试集成框架（如 Vue、React）以扩展项目。

← 返回目录