每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

关于使用 React 的 Vite 项目的简单教程并部署该项目

在这篇文章中，我们将看看如何使用 Vite 和 React 制作一个简单的项目。作为奖励，我将向您展示如何部署我们的项目。

首先，让我们为我们的项目创建一个文件夹，并开始使用 Vite 及其模板创建一个项目。

mkdir ViteProject

cd ViteProject

npm create vite@latest

Vite会提示我们选择项目的名称、创建项目所使用的模板以及将使用的编译器。对于我们的示例，我选择了以下选项：




就是这样，我们的项目就创建好了！

让我们研究一下创建的项目的结构：






node_modules - 我们项目中分别使用的模块
public - 包含我们使用的媒体文件的目录
src - 包含项目代码的目录，我们将在其中添加我们的代码和组件
.gitignore - 描述 git 忽略的文件的文件
index.html - 用于挂载 React 应用程序的 HTML 文件
package-lock.json - 用于描述已安装依赖项的文件
package.json - 用于描述项目和依赖项、脚本命令和其他内容的vite.config.json文件 - 默认 vite 配置文件
让我们运行我们的项目，看看我们现在有什么。

在终端中运行命令

npm run dev

在终端中，我们将看到



在这张图片中，我们被告知 Vite 为我们的项目收集了多少以及我们可以在什么地址打开它。

打开地址后http://localhost:5173/我们会看到React的标准Vite模板，即：




是的！我们的项目已创建并启动，我们可以进一步开发它！

下面我们来看一下Vite的配置，看看它是怎么做到的。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

//
https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})

我们看到还是挺简单的，不像是类似webpack的配置。本例中使用了React的 Vite 插件，它使用了 esbuild 和 babel。您可以在该插件的页面上阅读有关该插件的更多详细信息。

支持 Sass 和 Tailwind
有了 Vite，我们可以轻松使用 Sass 和Tailwind，因为它们开箱即用！

我将App.css文件重命名为App.scss并为 h1 添加了内联样式。



但到目前为止，重启后，我们得到这个错误




这是因为我们没有在依赖项中安装 sass。

我们需要执行这个命令

npm install sass --save-dev

在那之后，我们看到样式已经应用到我们的 h1 标签上了！






至于Tailwind，我们也只需要完成Tailwind本身的安装，即：

安装顺风 CSS -npm install -D tailwindcss postcss
autoprefixernpxtailwindcss init -p
配置模板路径 - 在文件中tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}


添加 index.css

这就是您使用 Tailwind 所需的一切！

部署
为了部署我们的站点，您首先需要构建它。

这是通过命令完成的

npm run build

Vite构建的结果添加到dist目录中




对于建站后的后续测试，我们可以使用命令

npm run preview

对于部署，我们需要安装Vercel CLI

npm i -g vercel

并运行命令

vercel

您将被要求登录并询问有关您的项目的一系列问题，仅此而已！




我们的项目 - Vite React Vercel App

结论
最后，我想说的是，在本文中，我们分析了一种创建项目及其配置和部署的简单方法。这只是关于该主题的概述文章。希望它能帮助你并教你一些东西！