为什么使用Vite

大多数开发人员默认将Create React App (CRA)作为构建工具，用于在 React 中创建新项目并设置开发服务器。它提供了无需任何配置的构建设置。

Create React App 在运行在 webpack 上，它在提供服务之前捆绑了整个应用程序。因此，在大型代码库中，应用程序运行需要更多时间，并且文件更改反映在热更新HMR上需要很长时间。

不同与 CRA ,Vite 不会在提供服务之前构建整个应用程序。它将应用程序模块分为两部分：依赖项和源代码。

依赖项使用esbuild （用 Go 语言编写）预先捆绑，比基于 JavaScript 的捆绑器快 10 到 100 倍；由于依赖关系不会改变，它们也可以被缓存，这样就可以完全跳过预捆绑。

源代码通过原生 ESM提供：源代码通常包含需要转换的非纯 JavaScript（例如 JSX、CSS），但并非所有都需要同时加载。所需的代码根据浏览器路由（基于路由的代码拆分）得到服务。

这些差异导致使用 Vite 初始化、更新和构建 React 应用程序时体验更快。

第 1 步 – 创建您的项目文件夹

打开您的终端，然后导航到您要构建项目的文件夹——例如 Desktop。在终端中输入以下命令，然后enter：

1
npm create vite@latest your-project-name -- --template react

上面的命令将创建您的项目文件夹。 ‌

your-project-name应该替换为您的项目名称。我的项目名称是food-app

‌请注意，我们曾经-- --template react指定我们正在使用 Vite 构建 React 应用程序。

第 2 步 – 进入到项目文件夹

在您的终端中输入以下命令，然后enter：

1
cd food-app

‌此命令将导航到您的项目文件夹。你应该有这个：

在终端中输入“cd food-app”以导航到“food-app”文件夹

第 3 步 – 安装 Tailwind CSS 和其他依赖项

在您的终端中输入以下命令，然后enter：

1
npm install -D tailwindcss postcss autoprefixer

输入此命令以安装 tailwindcss、postcss 和 autoprefixer 依赖项

此命令将安装以下内容：

  • Tailwind CSS 框架
  • Post CSS，它提供插件来执行不同的功能，例如 Vanilla CSS 中的前缀
  • Autoprefixer，这是一个 PostCSS 插件，用于解析 CSS 并将前缀添加到 CSS 规则。

您的文件夹在 VSCode 中应该如下所示：‌

确认您的 ‌ 中有以下package.json：

请注意第 19 - 21 行的 autoprefixer、postcss 和 tailwindcss 依赖项。当您阅读本文时，版本号可能已更改。

第 4 步 – 生成配置文件

在您的终端中输入以下命令，然后enter：

1
npx tailwindcss init -p

此命令将生成 tailwindcss 配置文件

此命令生成tailwind.config.cjs配置postcss.config.cjs文件，也称为配置文件。它们帮助您与项目互动并自定义所有内容。

第 5 步 – 配置 源路径

将路径添加到文件中的所有模板文件tailwind.config.cjs。模板文件包括 HTML 模板、JavaScript 组件和其他包含 Tailwind 类名称的源文件。这是为了确保为相应的元素生成 vanilla CSS。

你tailwind.config.cjs现在看起来像这样：

当前名为 tailwind.config.cjs 的配置文件，它包含 module.export 对象以使用内容、主题和插件等属性自定义 tailwind

将其添加到您的内容部分。

1
2
3
4
"./index.html",


"./src/**/*.{js,ts,jsx,tsx}",

添加到 content 属性的字符串以逗号分隔

所以你的文件现在应该是这样的：


更新内容属性后的配置文件

第 6 步 – 将 Tailwind 指令添加到您的 CSS

Tailwind 指令是自定义的特定于 Tailwind 的语句，用于指示 CSS 如何运行。您需要为 Tailwind 的三个层添加指令。

@tailwind base注入Tailwind的基础样式和插件注册的基础样式，@tailwind components注入Tailwind的组件类和插件注册的组件类，同时@tailwind utilities注入Tailwind的实用类和插件注册的实用类。

将以下语句添加到您的./src/index.css文件中：

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

添加到 index.css 文件的三个指令 - @tailwind base、@tailwind components 和 @tailwind utilities

您的index.css文件包含一些默认样式。您可以清除所有内容并粘贴上面的三行指令。

第 7 步 – 启动您的 Vite 服务器

npm run dev使用终端中的命令运行构建过程。您应该在终端中收到以下消息：

运行提供本地主机链接、网络和帮助的 Vite 服务器后收到的消息。

按住ctrl键并单击本地的链接 – 这里是 http://127.0.0.1:5174。如果您这样做，它将在您的浏览器中打开一个新选项卡。

首次运行时的网页截图

我们的样式被破坏了，因为我们清除了文件中的默认 CSSindex.css以输入我们的指令。

第 8 步 – 开始编写 Tailwind CSS

您可以开始使用 Tailwind 的实用程序类来设计您的内容。导航到您的App.jsx文件，您应该在下面看到：


App.jsx 文件的屏幕截图

清除从第 9 行开始的 return 元素，并将其替换为下面的文本以测试您的 Tailwind 以了解它是否正常工作。输入这个：

1
<h1 className="text-3xl font-bold underline text-center">Hello world!</h1>

带有 tailwind css 类名的 h1 元素

现在你有这个：

将 h1 元素添加到 App.jsx 文件

根据上图，text-3xl font-bold text-red-500 underline text-center已作为类名添加到div元素中。这是编写 Tailwind CSS 样式的标准。

您可以在此处了解有关 Tailwind 类名的更多信息。您的浏览器应该会自动更新。

添加h1元素后的网页截图

您现在可以开始构建您的 React 项目并使用 Tailwind CSS 设置它们的样式。

🚀 关于我

戳
👩‍💻 🧠👯‍♀️🤔 💬 📫😄 ⚡️