创建新组件
AI 辅助创建新组件
-
在
components目录下，创建新的组件文件new-component/index.tsx。 -
在 Cursor 中，通过 截图 + 提示词，让 AI 辅助生成新的组件代码。
Prompt
follow this screenshot, create a react function component for me, use shadcn/ui, tailwindcss
- 在页面文件
app/[locale]/default/new-page/page.tsx中，引入新组件。
app/[locale]/default/new-page/page.tsx
import { LoginForm } from "@/components/new-component";
export const runtime = "edge";
export default function NewPage() {
return (
<div className="container py-36 flex items-center justify-center">
<LoginForm />
</div>
);
}- 访问页面路由，查看新组件效果。
建议可复用的组件，放在
components/blocks目录下，业务组件放在components目录下。