開源了！用 AI 生成 Vue 組件，好玩又好用
作者：CUGGZ
v0能夠快速生成前端頁面，讓AI在前端開發(fā)領(lǐng)域的潛力更進(jìn)一步展現(xiàn)出來，距離 AI 替代前端開發(fā)更近一步？在此之后，陸續(xù)出現(xiàn)了多個(gè) v0 的替代品，下面就來分享兩個(gè)好玩又好用的 AI 代碼生成工具！
三個(gè)月前，Vercel 推出了其 AI 代碼生成工具 —— v0（v0.dev），這款工具可以快速生成前端組件代碼，引起了前端圈的廣泛關(guān)注。通過簡(jiǎn)單的描述，v0能夠快速生成前端頁面，讓AI在前端開發(fā)領(lǐng)域的潛力更進(jìn)一步展現(xiàn)出來，距離 AI 替代前端開發(fā)更近一步？在此之后，陸續(xù)出現(xiàn)了多個(gè) v0 的替代品，下面就來分享兩個(gè)好玩又好用的 AI 代碼生成工具！
vue0
vue0 是最近剛開源的一個(gè) AI 工具，借助 Open AI 實(shí)現(xiàn)。通過簡(jiǎn)單的描述，就可以快速生成一個(gè) Vue 頁面，目前支持 shadcn/vue，但很快就會(huì)支持更多的 UI 庫。
vue0 的特性如下：
- 編寫多遍步驟
- 編寫迭代步驟
- 將組件存儲(chǔ)在 fs 中
- 渲染生成的代碼
- 添加用戶功能
- 屏幕截圖生成組件
- 簡(jiǎn)單元數(shù)據(jù)
- 改進(jìn)緩存
在 vue0 的網(wǎng)站上，有很多已經(jīng)生成的頁面及源碼：
比如，對(duì)于以下頁面：
生成的代碼如下：
<script setup lang="ts">
import { ref } from 'vue';
import { Check } from 'lucide-vue-next';
import { Switch } from '@/components/ui/switch';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
const isYearly = ref(false);
</script>
<template>
<div class="p-10 bg-gray-100 dark:bg-black">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white">Pricing Plans</h2>
<p class="text-md text-gray-600 dark:text-gray-300">Choose the plan that's right for you.</p>
</div>
<div class="mb-8 text-center">
<label for="pricing-toggle" class="inline-flex items-center cursor-pointer">
<span class="mr-2 text-gray-600 dark:text-gray-400">Monthly</span>
<Switch
id="pricing-toggle"
v-model="isYearly"
aria-label="Toggle between month/year pricing"
class="mx-auto"
/>
<span class="ml-2 text-gray-600 dark:text-gray-400">Yearly</span>
</label>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Cards will go here with isYearly logic for pricing -->
<Card class="shadow-lg">
<CardHeader>
<CardTitle class="text-xl font-semibold text-gray-800 dark:text-white">Basic</CardTitle>
<CardDescription class="text-gray-500 dark:text-gray-400">For individual use</CardDescription>
</CardHeader>
<CardContent>
<p class="text-4xl font-bold text-gray-800 dark:text-white">$0<span class="text-sm">{{ isYearly ? '/yr' : '/mo' }}</span></p>
<ul class="mt-4">
<li class="flex items-center text-gray-600 dark:text-gray-300">
<Check class="mr-2 w-4 h-4 text-green-500" /> 1 Project
</li>
<li class="flex items-center text-gray-600 dark:text-gray-300">
<Check class="mr-2 w-4 h-4 text-green-500" /> 100MB Storage
</li>
</ul>
</CardContent>
<CardFooter>
<Button variant="outline">Get Started</Button>
</CardFooter>
</Card>
<!-- Repeat for other cards -->
<Card class="shadow-lg">
<CardHeader>
<CardTitle class="text-xl font-semibold text-gray-800 dark:text-white">Pro</CardTitle>
<CardDescription class="text-gray-500 dark:text-gray-400">For professionals</CardDescription>
</CardHeader>
<CardContent>
<p class="text-4xl font-bold text-gray-800 dark:text-white">$10<span class="text-sm">{{ isYearly ? '/yr' : '/mo' }}</span></p>
<ul class="mt-4">
<li class="flex items-center text-gray-600 dark:text-gray-300">
<Check class="mr-2 w-4 h-4 text-green-500" /> 10 Projects
</li>
<li class="flex items-center text-gray-600 dark:text-gray-300">
<Check class="mr-2 w-4 h-4 text-green-500" /> 5GB Storage
</li>
</ul>
</CardContent>
<CardFooter>
<Button variant="secondary">Get Started</Button>
</CardFooter>
</Card>
<!-- Repeat for other cards -->
<Card class="shadow-lg">
<CardHeader>
<CardTitle class="text-xl font-semibold text-gray-800 dark:text-white">Enterprise</CardTitle>
<CardDescription class="text-gray-500 dark:text-gray-400">For organizations</CardDescription>
</CardHeader>
<CardContent>
<p class="text-4xl font-bold text-gray-800 dark:text-white">$99<span class="text-sm">{{ isYearly ? '/yr' : '/mo' }}</span></p>
<ul class="mt-4">
<li class="flex items-center text-gray-600 dark:text-gray-300">
<Check class="mr-2 w-4 h-4 text-green-500" /> Unlimited Projects
</li>
<li class="flex items-center text-gray-600 dark:text-gray-300">
<Check class="mr-2 w-4 h-4 text-green-500" /> 100GB Storage
</li>
</ul>
</CardContent>
<CardFooter>
<Button variant="destructive">Get Started</Button>
</CardFooter>
</Card>
</div>
</div>
</div>
</template>Github：https://github.com/zernonia/vue0
openv0
openv0 是一個(gè)生成式UI組件框架，憑借AI技術(shù)，可以輕松實(shí)現(xiàn)UI組件的實(shí)時(shí)預(yù)覽、生成與迭代。它深度整合豐富的開源組件庫與圖標(biāo)，為生成式工作流提供一站式資源。其設(shè)計(jì)核心理念在于高度模塊化與精細(xì)的生成過程管理，確保流程的靈活與高效。組件生成采用多步驟管道化流程，每一步都由獨(dú)立插件執(zhí)行，進(jìn)一步提升了整個(gè)流程的靈活性和效率。
openv0 目前支持的前端框架有：
- React
- Next.js
- Svelte
支持的 UI 庫有：
- NextUI
- Flowbite
- Shadcn
Github：https://github.com/raidendotai/openv0/。
責(zé)任編輯：姜華
來源：
前端充電寶
