前2天写了一篇文章【AI+编程】只需1句提示词0代码生成前端展示效果 ，vercel的V0.dev效果确实不错。个人对于前端技术属于半吊子水平， 自己准备把生成的code复制出来直接本地运行。
V0里直接问：
Qustion：生成的tsx代码复制出来怎么在本地运行
Answer：为了在本地运行之前生成的俄罗斯方块游戏代码，你需要设置一个Next.js项目并进行一些配置。让我们一步步来完成这个过程：
### 设置Next.js项目
首先，你需要创建一个新的Next.js项目。打开终端，导航到你想创建项目的目录，然后运行以下命令：
```shellscript
npx create-next-app@latest tetris-game
```
在安装过程中，你会被问到一些问题。以下是推荐的选择：
- Would you like to use TypeScript? › Yes
- Would you like to use ESLint? › Yes
- Would you like to use Tailwind CSS? › Yes
- Would you like to use `src/` directory? › Yes
- Would you like to use App Router? › Yes
- Would you like to customize the default import alias? › No
### 安装必要的依赖
进入项目目录并安装必要的依赖：
```shellscript
cd tetris-game
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge lucide-react
```
这些包是shadcn/ui组件所需的依赖。
### 创建必要的文件和组件
现在，我们需要创建一些文件来支持我们的Tetris游戏组件。
1. 创建Button组件：
```shellscript
mkdir -p src/components/ui
touch src/components/ui/button.tsx
```
将以下代码复制到`src/components/ui/button.tsx`：
```typescriptreact
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }
```
2. 创建utils文件：
```shellscript
mkdir -p src/lib
touch src/lib/utils.ts
```
将以下代码复制到`src/lib/utils.ts`：
```typescript
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
```
3. 创建Tetris游戏组件：
```shellscript
touch src/components/TetrisGame.tsx
```
将之前生成的Tetris游戏代码复制到`src/components/TetrisGame.tsx`文件中。
### 更新页面组件
打开`src/app/page.tsx`文件，用以下内容替换：
```typescriptreact
import TetrisGame from '@/components/TetrisGame'
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<TetrisGame />
</main>
)
}
```
### 运行项目
现在你可以运行项目了。在终端中执行：
```shellscript
npm run dev
```
这将启动开发服务器，通常在`http://localhost:3000`上运行。在浏览器中打开这个地址，你应该能看到Tetris游戏了。
按照AI提示的过程，代码工程 准备完毕。
build遇到的问题：
1、node版本问题
个人node是V18.0.0 , 这个必须最低v18.17.0 , 升级node版本。
https://registry.npmmirror.com/binary.html?path=node/
2、TS规范问题
让AI生成代码符合TS规范
个人把代码放在github， 地址：
https://github.com/xiaoliouc/tetris-game
代码比较粗糙，我直接部署到Vercel上了。可以直接在Vercel查看效果
https://tetris-game-3nk00jd4q-xiaolioucs-projects.vercel.app/