AI生成简单的ui组件(react)

1、背景介绍

v0.dev 是 Vercel 由 AI 提供支持的生成式用户界面系统。它基于 shadcn/ui 和 Tailwind CSS 生成复制粘贴友好的 React 代码。可以直接通过文字描述和上传ui图片，生成对应react的ui组件。对于一些常规简单的组件，就可以通过该方式快速生成组件，减少过多人力和时间成本

2、简单演示使用

• 使用next项目演示

npx create-next-app@latest

• 使用v0初始化项目,生成一个 components.json

npx v0@latest init

• 在页面中描述对应组件的功能，然后运行生成组件的命令

npx v0 add ElwJ9uEyZlT

• 运行上面所有指令后，会在项目里导入对应的组件

• 最终在项目里直接引用

在my-app\src\app\page.tsx

import dynamic from 'next/dynamic'

const PopLazy = dynamic(() => import('@/components/component/pop'), 
{
  ssr: false ,loading: () => <p>Loading...</p>
})


export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <PopLazy></PopLazy>
    </main>
  );
}

3、效果

4、参考

• v0.dev/docs#integr…