Repolode
提交项目
chihebnabil

chihebnabil/lovable-boilerplate

基于 React、Vite 和 TypeScript 的脚手架，集成 shadcn/ui、Tailwind 与 Supabase，并附带 AI 编码助手指令。

在 GitHub 查看官网
Star
66
Fork
31
未关闭 Issue
7
最近提交
3天前

这是什么？

这是一个受 Lovable AI 应用生成器启发的 React 脚手架项目。它提供一套常规的代码结构，使用 Vite、React 19、TypeScript、Tailwind CSS 和一组 shadcn/ui 组件，便于开发者直接阅读、修改和扩展界面代码。

项目通过客户端文件和自动生成的数据库类型接入 Supabase，并附带查询、实时订阅和邮箱密码认证的示例。数据请求使用 TanStack Query，表单使用 React Hook Form 与 Zod 进行校验，同时包含用于本地开发的 Supabase CLI 配置与迁移目录。

仓库在 .github/instructions 下提供全局指令文件，面向 GitHub Copilot 和 Cursor，涵盖布局、样式和组件约定，帮助 AI 助手遵循项目已有的模式。

核心功能

  • 01基于 Vite、React 19 和 TypeScript 的开发与构建环境。
  • 02预配置 40 多个 shadcn/ui 组件，位于 src/components/ui 目录。
  • 03包含 Supabase 客户端、自动生成的类型定义和迁移目录。
  • 04使用 TanStack Query 管理数据请求，使用 React Hook Form 与 Zod 处理表单。
  • 05提供面向 Copilot 和 Cursor 的指令文件，说明项目约定。

适用场景

  • 以 shadcn/ui 设计体系和 Supabase 后端启动一个 React Web 应用。
  • 基于生成式界面快速搭建原型，并计划进行深度定制。
  • 让 AI 编码助手遵循统一样式规范的项目初始化。

快速上手

  1. 1

    克隆仓库

    git clone https://github.com/chihebnabil/lovable-boilerplate.git
  2. 2

    进入项目目录

    cd lovable-boilerplate
  3. 3

    安装依赖

    npm install
  4. 4

    启动开发服务器（运行于 http://localhost:8080）

    npm run dev

使用前须知

  • Supabase 相关功能需要你自己的 Supabase 项目和写入 .env 文件的凭据。
  • 本地 Supabase 命令需要 Docker。

标签

#react#typescript#vite#tailwindcss#supabase#boilerplate#shadcn-ui#copilot#copilot-enabled#cursor-rules

常见问题

lovable-boilerplate 是什么？
基于 React、Vite 和 TypeScript 的脚手架，集成 shadcn/ui、Tailwind 与 Supabase，并附带 AI 编码助手指令。 这是一个受 Lovable AI 应用生成器启发的 React 脚手架项目。它提供一套常规的代码结构，使用 Vite、React 19、TypeScript、Tailwind CSS 和一组 shadcn/ui 组件，便于开发者直接阅读、修改和扩展界面代码。
lovable-boilerplate 可以免费使用吗？用的什么许可证？
lovable-boilerplate 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
lovable-boilerplate 还在维护吗？
活跃维护中。lovable-boilerplate 最近一次提交是在 2026年11月4日。
lovable-boilerplate 适合用来做什么？
以 shadcn/ui 设计体系和 Supabase 后端启动一个 React Web 应用。 基于生成式界面快速搭建原型，并计划进行深度定制。 让 AI 编码助手遵循统一样式规范的项目初始化。
lovable-boilerplate 怎么安装和运行？
克隆仓库: git clone https://github.com/chihebnabil/lovable-boilerplate.git 进入项目目录: cd lovable-boilerplate 安装依赖: npm install 启动开发服务器（运行于 http://localhost:8080）: npm run dev
在哪里获取 lovable-boilerplate？
源代码和安装说明在 GitHub 上：https://github.com/chihebnabil/lovable-boilerplate

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目