使用 React、Vite 和 Tailwind CSS 创建节省时间的模板🧩

# Web 开发 # 初学者 # 教程 # React

为什么要创建模板

**创建新的 React 项目既耗时又多余**。在本指南中，我将向您展示如何使用 Vite 和 Tailwind CSS 设置可重复使用的 React 模板。这种方法允许您跳过初始设置过程并直接进入未来项目的开发。

如果您想要快速入门，**我在这里创建了一个可立即使用的 GitLab 模板**。只需将其克隆到您的机器上，即可开始运行。

现在，让我们开始设置远程存储库。

设置远程存储库

登录您选择的版本控制平台 - 我将使用 GitLab，但任何其他选择都可以

创建新项目 - 在 GitLab 中，可以通过单击个人资料图片左上角的“+”图标来完成此操作选择“创建空白项目”选择项目名称、slug、+ 隐私级别

点击“创建项目”按钮

在蓝色“代码”按钮下，复制“使用 HTTPS 克隆”链接 - 我们很快就会需要它，所以请保留它

一切就绪！现在，当您克隆模板时，模板将自动链接到此远程存储库。

初始化模板

让我们探索创建模板的第一步

导航到要存储模板的文件夹：打开终端，更改为所需目录，例如 cd my-projects

克隆你的模板：用你在上一节中复制的模板替换，切换到新模板的目录 git clone 光盘

初始化 Vite 项目：

在 vite@latest 后使用 “.” 以防止 Vite 在克隆的 git repo npm create vite@latest 内创建额外的文件夹。

当 Vite 提示你选择项目选项时，选择“React”和“TypeScript”

**💡 注意：此时，我想删除许多默认的 Vite 文件 + 资产**

安装软件包

请随意自定义此部分。以下是我喜欢的包装组合：

tailwindcss - 实用优先的 CSS 框架

postcss - 处理并优化 CSS 文件

autoprefixer - 添加前缀以确保所有浏览器的 CSS 兼容性

Prettier - 自动格式化您的代码以提高可读性

prettier-plugin-tailwindcss - 确保一致的 Tailwind 类格式（个人最喜欢）

npm install -D tailwindcss postcss autoprefixer prettier prettier-plugin-tailwindcss

配置 Tailwind 和 Prettier

tailwind.config.js content：指定哪些文件类型应该使用 Tailwind 类 theme.extend：允许您创建自定义类

// -- tailwind.config.js --

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css - 导入 Tailwind 的基本样式、组件和实用程序类

// -- index.css --
@tailwind base;
@tailwind components;
@tailwind utilities;

.prettierrc - 允许 Prettier 格式化 Tailwind 类

// -- .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

提交并推送至远程仓库

你快完成了！为了真正实现可重复使用，我们需要将更改保存到远程仓库

git add .
git commit -m"Finish react template"
git push

最后说明

定期更新软件包 - 始终检查你的项目，以确保软件包未被弃用，并且更新不会破坏你的项目

克隆时删除 .git 文件——这可确保您对新项目的更改不会影响模板的远程存储库

结论

恭喜，通过创建 React 项目模板，您大大简化了设置过程，节省了宝贵的时间。现在，您可以专注于实际构建应用程序并将您的想法变为现实。

您觉得如何？我随时欢迎反馈和建议，因此请随时分享您的想法或提出问题！

CLIS.CC