brE28資訊網——每日最新資訊28at.com

三個月前，Vercel 推出了其 AI 代碼生成工具 —— v0（v0.dev），這款工具可以快速生成前端組件代碼，引起了前端圈的廣泛關注。通過簡單的描述，v0能夠快速生成前端頁面，讓AI在前端開發領域的潛力更進一步展現出來，距離 AI 替代前端開發更近一步？在此之后，陸續出現了多個 v0 的替代品，下面就來分享兩個好玩又好用的 AI 代碼生成工具！brE28資訊網——每日最新資訊28at.com

vue0

vue0 是最近剛開源的一個 AI 工具，借助 Open AI 實現。通過簡單的描述，就可以快速生成一個 Vue 頁面，目前支持 shadcn/vue，但很快就會支持更多的 UI 庫。brE28資訊網——每日最新資訊28at.com

brE28資訊網——每日最新資訊28at.com

vue0 的特性如下：brE28資訊網——每日最新資訊28at.com

• 編寫多遍步驟
• 編寫迭代步驟
• 將組件存儲在 fs 中
• 渲染生成的代碼
• 添加用戶功能
• 屏幕截圖生成組件
• 簡單元數據
• 改進緩存

在 vue0 的網站上，有很多已經生成的頁面及源碼：brE28資訊網——每日最新資訊28at.com

brE28資訊網——每日最新資訊28at.com

比如，對于以下頁面：brE28資訊網——每日最新資訊28at.com

brE28資訊網——每日最新資訊28at.com

生成的代碼如下：brE28資訊網——每日最新資訊28at.com

<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/vue0brE28資訊網——每日最新資訊28at.com

openv0

openv0 是一個生成式UI組件框架，憑借AI技術，可以輕松實現UI組件的實時預覽、生成與迭代。它深度整合豐富的開源組件庫與圖標，為生成式工作流提供一站式資源。其設計核心理念在于高度模塊化與精細的生成過程管理，確保流程的靈活與高效。組件生成采用多步驟管道化流程，每一步都由獨立插件執行，進一步提升了整個流程的靈活性和效率。brE28資訊網——每日最新資訊28at.com

brE28資訊網——每日最新資訊28at.com

openv0 目前支持的前端框架有：brE28資訊網——每日最新資訊28at.com

• React
• Next.js
• Svelte

支持的 UI 庫有：brE28資訊網——每日最新資訊28at.com

• NextUI
• Flowbite
• Shadcn

Github：https://github.com/raidendotai/openv0/。brE28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-60988-0.html開源了！用 AI 生成 Vue 組件，好玩又好用

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： API設計：從基礎到優秀實踐

下一篇： Python在自動化和腳本編程領域的廣闊應用前景