从零开始学Vite，快速搭建你的第一个前端项目-原创手记-慕课网

概述

Vite是一款高性能的前端构建工具，专为提供极速开发环境启动与编译速度而设计，优化开发者体验。相较于传统工具，Vite利用ES模块与浏览器缓存机制加速资源加载与热模块替换，实现无感开发。本文将全程指导您从安装Node.js开始，直至使用Vite创建并优化首个项目，最终实现高效前端应用开发。

引入 Vite

了解 Vite 的基本概念

Vite 是一款高性能的前端构建工具，旨在提供极快的开发环境启动速度和编译速度，以提升开发者在开发过程中的体验。与传统的构建工具如 Webpack 和 Gulp 相比，Vite 采用了更现代的开发模式，利用了 ES 模块（ESM）的特性，通过使用浏览器的缓存机制和原生的模块化系统来加速资源加载和热模块替换，从而实现无感知的开发体验。

Vite 与传统前端构建工具的区别

开发体验：Vite 提供了更快的开发循环（开发-保存-预览），通过监听文件变化并快速编译更新，而无需等待构建完成。
资源加载：Vite 通过缓存预加载资源，如 CSS 和 JavaScript，来减少首次加载时间。
热更新：Vite 支持实时热更新，更改的代码在浏览器中即时生效，无需重新加载页面。

安装 Vite

如何安装 Node.js

为了使用 Vite，你需要首先安装 Node.js。访问 Node.js 官方网站下载并安装最新版本的 Node.js。安装完成后，确保你的环境中有 Node.js 的全局可执行文件。

使用 npm 或 yarn 安装 Vite

在命令行终端中，运行以下命令以全局安装 Vite：

npm install -g @vitejs/cli

或者使用 yarn：

yarn global add @vitejs/cli

配置 Vite 的基础环境

在项目目录下初始化 Vite 项目，首先确保你已经创建了一个项目文件夹。然后，在项目根目录下运行以下命令：

vite create my-project

这将生成一个包含基本结构的 Vite 项目。进入生成的项目目录：

cd my-project

此时，你已经准备好开始使用 Vite 进行开发了。

创建首个 Vite 项目

使用 Vite CLI 创建新项目

要创建一个使用 Vite 的新项目，请在命令行终端中输入：

vite create my-vite-project

这会为你的项目生成所有必要的文件结构。进入项目目录：

cd my-vite-project

项目结构介绍

一个典型的 Vite 项目结构如下：

my-vite-project/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── index.html
│   ├── main.ts
│   └── styles/
├── .vite/
│   └── config.ts
└── package.json

src 文件夹：包含所有源代码，如 HTML、CSS 和 JS 文件。
public 文件夹：存放静态资源和入口 HTML 文件。
.vite 文件夹：Vite 的配置文件。
package.json：项目依赖和构建脚本的配置。

使用 Vite 进行基本开发

编写 HTML、CSS 和 JS 文件

在 src 目录下创建一个基本的 HTML 和 CSS 文件，如下：

`src/index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vite Project</title>
    <link rel="stylesheet" href="assets/style.css">
</head>
<body>
    <div id="app">
        <h1>Hello Vite!</h1>
        <p>点击按钮以加载动态内容。</p>
        <button id="load-button">加载内容</button>
    </div>
    <script src="main.js"></script>
</body>
</html>

`src/styles/style.css`

body {
    font-family: Arial, sans-serif;
}

#app {
    text-align: center;
}

h1 {
    color: #333;
}

`src/main.js`

document.querySelector("#load-button").addEventListener("click", function() {
    document.querySelector("#app").innerHTML = "动态内容加载成功!";
});

实现基本的页面跳转

为了实现页面跳转，可以修改 main.js 文件：

document.querySelector("#load-button").addEventListener("click", function() {
    window.location.href = "other-page.html";
});

然后，在 public 文件夹中创建一个 other-page.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Other Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            text-align: center;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>这是其他页面</h1>
    <p>你来到了一个不同的地方。</p>
</body>
</html>

编译和热更新功能的介绍

运行 npm start 或 yarn start 命令启动 Vite 的开发服务器。此时，任何对 src 文件夹下的文件进行的修改都会自动编译并实时更新浏览器中的内容，无需手动刷新。

优化 Vite 项目

了解 Vite 的缓存机制

Vite 通过缓存预加载资源来加速首次加载时间。你可以使用浏览器的开发者工具查看缓存列表，了解哪些资源已经被加载到了缓存中。

使用 Vite 插件进行扩展

Vite 支持插件系统，允许开发者通过添加插件来扩展其功能。例如，可以通过添加 vite-plugin-eslint 插件来自动检查 JavaScript 代码的语法错误。

安装插件：

npm install --save-dev @vitejs/plugin-eslint

在配置文件中添加插件：

import { defineConfig } from 'vite';
import eslint from '@vitejs/plugin-eslint';

export default defineConfig({
  plugins: [
    eslint({
      include: ['src/**/*.ts'],
      config: {
        env: {
          browser: true,
        },
      },
    }),
  ],
});

项目性能优化的简单策略

代码分割：使用 Vite 的代码分割功能按需加载 JavaScript 模块，减少页面初始加载体积。
懒加载：对于非必要的资源，如图片、字体等，可以使用懒加载策略，以提高页面性能。
压缩优化：确保在构建阶段使用适当的压缩工具来压缩 CSS 和 JS 文件，减少文件体积。

发布 Vite 项目

构建生产环境代码

在完成开发并进行必要的优化后，使用以下命令构建生产环境代码：

vite build

构建完成后，在 dist 文件夹中找到构建后的代码。

部署到服务器或静态网站托管平台

将 dist 文件夹的内容部署到你的服务器或静态网站托管平台（如 GitHub Pages、Netlify 或 Vercel）。确保所有必要的静态文件和应用代码都在同一目录下。

通过遵循上述步骤，你不仅能够快速搭建并优化 Vite 项目，还能有效地部署到生产环境，为用户提供快速且流畅的前端体验。随着对 Vite 的深入学习和实践，你将能够更高效地构建和维护复杂的前端应用。