React + TailwindCSS + Vite.js = 天作之合？

概括

Vitejs 是什么？

项目设置

结论

对于那些厌倦了使用 create-react-app 来搭建新 React 项目的人来说，这篇文章将向你展示如何使用 Vitejs 来启动和运行 React 和 TailwindCSS。

概括

• Vitejs 是什么？
• 项目设置
• 结论

Vitejs 是什么？

Vitejs 旨在解决我们的工具中出现的一些缺陷。

Webpack、Gulp 和 Parcel 非常适合捆绑我们的代码，但是在启动开发服务器时速度非常慢，尤其是当您需要加载大量 JavaScript 代码时。

在更传统的构建工具中，捆绑器通常必须重新捆绑整个内容，应用程序越大，这将花费更长的时间。

即使采用热模块替换之类的技术，随着项目规模的增加，构建速度仍然会受到显著影响。

即使您第一次启动开发服务器，Vitejs 的速度也非常快。

编辑文件时，它也具有速度优势。更改几乎可以立即反映在浏览器中。

现在您已经对 Vitejs 有了一些了解，让我们开始设置我们的 React 项目。

项目设置

在本教程中，我将使用 React 作为我选择的前端框架，但您可以使用任何您喜欢的框架。

Vitejs 目前支持以下内容：

• 香草
• 香草味
• vue
• vue-ts
• 反应
• React-TS
• 预先行动
• preact-ts
• lit-元素
• lit-element-ts
• 苗条
• 苗条

不幸的是，在撰写本文时，Vitejs 不支持 Angular。

使用 Vitejs 进行 React 设置

设置 React 项目相当容易，只需选择要存储项目的目录，在那里打开终端并运行以下命令：

npm init @vitejs/app vite-react --template react

这将下载我们的 React 项目所需的项目文件。

再次强调，你可以使用任何你喜欢的技术。如果你想使用原生 JavaScript 创建项目，你可以使用：

npm init @vitejs/app vite-vanilla --template vanilla

就这么简单！

现在我们需要进入我们的目录并安装依赖项，毕竟这是 JavaScript。

cd vite-react

npm install

安装完所有内容后，我们现在可以使用以下命令启动我们的开发服务器：

npm run serve

只需片刻，我们就能看到终端显示出令人赏心悦目的景象：

现在是时候安装 TailwindCSS 了。

TailwindCSS 设置

这也是一个非常简单的过程。

首先，我们需要安装依赖项：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

成功安装后，我们可以使用以下命令创建 tailwind 配置文件：

npx tailwindcss init -p

这将创建一个 tailwind- 和一个 postcss-config 文件。

现在只需导航到您的 src 目录，打开您的 index.css 文件，删除所有代码并添加以下行：

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

就是这样！

我们现在只需使用 ctrl + C 停止开发服务器，然后使用 重新启动它npm run dev。

现在为了测试我们的设置，我们可以删除预定义的默认 jsx-code 并添加我们自己的小 tailwind-snippet。

我的 App.jsx 看起来像这样：

/* src/App.jsx */
import React from "react";
import "./App.css";

function App() {
  return (
    <div className="flex justify-center">
      <h1 className="font-bold text-2xl text-blue-900">
        React and Tailwind with Vitejs!
      </h1>
    </div>
  );
}

export default App;

结果如下：

通过这种方式，我们验证了我们的顺风设置确实有效。

结论

这就是本周的全部内容！

我希望您下周继续关注我的另一篇文章。

如果您喜欢这篇文章，请点赞并在评论中告诉我您将来有兴趣阅读什么样的内容。