《英雄聯(lián)盟》夏季賽總決賽今日開打！JDG對陣LNG首發(fā)名單來了 Knight：準(zhǔn)備三連冠
8月5日消息，今日17:00，《英雄聯(lián)盟》2023LPL夏季賽總決賽將正式開打，由JDG對陣LNG。對兩支隊(duì)伍來說，這場比賽不僅要爭奪夏季賽冠軍，更要決定誰才是LPL賽區(qū)一
大家好，我卡頌。
最近，Vercel推出了一款A(yù)I代碼生成工具 —— v0[1]，可以快速生成前端組件代碼。
這款A(yù)I工具會(huì)影響現(xiàn)有前端開發(fā)模式么？本文會(huì)從如下角度展開討論：
v0是Vercel推出的一款「前端組件代碼生成工具」，當(dāng)前還處于Alpha階段，要想試用需要先排隊(duì)。
他的使用方式如下：
首先，用自然語言描述需求。
v0會(huì)根據(jù)需求生成組件代碼：
我們可以繼續(xù)對不滿意的地方提出修改意見，比如「背景請使用漸變藍(lán)色」：
此時(shí)，會(huì)生成一個(gè)新的版本（這里是v1）。具體來說，每個(gè)修改意見都會(huì)產(chǎn)生一個(gè)新的版本。當(dāng)我們再提出 —— 「內(nèi)容寬度為500px」，此時(shí)會(huì)產(chǎn)生v2：
現(xiàn)在你明白這款產(chǎn)品為什么叫v0了吧？v0指產(chǎn)品的最初版本，開發(fā)者可以基于v0不斷迭代新的版本。而迭代的方式，就是不斷提出新需求或修改意見。
有同學(xué)可能會(huì)問：我直接向chatGPT提需求不也能生成代碼，v0有啥優(yōu)勢？
v0的優(yōu)勢主要體現(xiàn)在兩點(diǎn)：
讓我們細(xì)細(xì)聊一下。
如果直接讓chatGPT生成代碼，那么他會(huì)生成一大段代碼。比如，我讓chatGPT生成上面提到的天氣預(yù)報(bào)組件。下面截取了他返回代碼的一部分，注意其中紅框中組件背景色是白色：
現(xiàn)在，我繼續(xù)提問：「背景請使用漸變藍(lán)色」，chatGPT重新輸出了組件代碼，并把背景色改為漸變藍(lán)色：
可以看到，每次提出修改意見，chatGPT都得重新生成完整代碼，比較低效。
那我只讓chatGPT輸出修改部分的代碼呢？比如這樣提問 —— 「內(nèi)容寬度為500px，只給出修改的代碼」。
他確實(shí)只輸出了需要修改的代碼：
但這樣也存在一個(gè)弊端 —— 當(dāng)應(yīng)用龐大時(shí)，需要讓chatGPT知道我們想修改哪部分代碼。
比如下面是個(gè)郵箱收集頁面，現(xiàn)在我們希望將標(biāo)題改為漸變色。當(dāng)我們向chatGPT提到「標(biāo)題」時(shí)，他能理解指的是郵箱收集頁的標(biāo)題。
但當(dāng)應(yīng)用變得復(fù)雜，存在很多「帶標(biāo)題的組件」，讓chatGPT理解你的需求就得費(fèi)一番功夫了。
使用v0就沒有這方面困擾。我們可以對v0生成頁面中的每個(gè)組件、每個(gè)元素單獨(dú)提問。比如，對于上述「將郵箱收集頁標(biāo)題改為漸變色」的需求，首先用v0生成郵箱收集頁。
現(xiàn)在我們希望將標(biāo)題改為漸變色，只需要選擇標(biāo)題部分并提出「增加一個(gè)漸變色」：
就能得到如下結(jié)果：
即使再復(fù)雜的頁面，在提問時(shí)，v0會(huì)將組件對應(yīng)的上下文一并發(fā)送給大模型，模型能清楚知道要修改哪個(gè)組件。
v0生成的React組件代碼中，樣式與UI分別基于兩個(gè)庫：
為什么生成代碼的樣式部分要使用TailwindCSS呢？
在我上一篇講TailwindCSS的文章中我提到一個(gè)觀點(diǎn) —— 隨著AI生成代碼的普及，類似TailwindCSS這樣的「原子化CSS」會(huì)越來越普及。
這是因?yàn)椋谟邢薜奈磥恚竽Ｐ洼敵龅膖oken限制還會(huì)一直存在，而「原子化CSS」相比「語義化CSS」能用更少的字符表達(dá)更豐富的樣式信息。
這里有兩層意思，首先來看比較好理解的，對比下面兩段代碼：
「原子化CSS」的實(shí)現(xiàn)：
<div class="m-1"></div>「語義化CSS」的實(shí)現(xiàn)：
<div class="container"></div>.container { margin: 0.25rem;}顯然，從大模型的字符輸出消耗來看，「原子化CSS」能用更少字符表達(dá)同樣的樣式。
第二層意思，「原子化CSS」（不管是TailwindCSS還是UnoCSS）都是基于設(shè)計(jì)系統(tǒng)的上層封裝。上述m-1的類名背后，并不僅僅是margin: 0.25rem的意思，而是與其他類名一起構(gòu)成的設(shè)計(jì)系統(tǒng)。
當(dāng)整個(gè)應(yīng)用都是基于設(shè)計(jì)系統(tǒng)實(shí)現(xiàn)時(shí)，整體來看，達(dá)到同樣的布局效果，也會(huì)更省大模型的字符輸出消耗。
v0的UI部分非常有意思，他基于shadcn這個(gè)“組件”庫。
為什么要給「組件」打引號(hào)，因?yàn)閟hadcn與一般的組件庫完全不同。
對于一般的組件庫，我們先通過npm安裝它，將它作為項(xiàng)目的依賴，再在項(xiàng)目中引入。
比如，下面是引入antd中Calendar組件的方式：
import { Calendar } from 'antd';const App: React.FC = () => { return <Calendar />;};下面是引入shadcn中Calendar組件的方式，對比看看有啥區(qū)別？
import { Calendar } from "@/components/ui/calendar"const App: React.FC = () => { return <Calendar />;};antd中的Calendar來自于antd模塊，而shadcn中的Calendar則來自于項(xiàng)目目錄下的components目錄。
這就是shadcn的理念 —— 0依賴，按需復(fù)制粘貼代碼。
簡單來說，如果你想使用shadcn中的某個(gè)組件，不是通過npm安裝shadcn這個(gè)包，再引入組件。而是直接復(fù)制該組件的代碼到項(xiàng)目目錄下（當(dāng)然，整個(gè)復(fù)制過程是通過cli工具完成的）。
這么做相比于傳統(tǒng)組件庫，有兩個(gè)顯著優(yōu)勢：
組件邏輯想改就改，不用擔(dān)心組件沒暴露對應(yīng)的props。
畢竟，整個(gè)組件的源代碼我們都直接復(fù)制下來了，改個(gè)邏輯還不簡單？
UI與樣式分離
復(fù)制下來的組件只包含基礎(chǔ)樣式，開發(fā)者根據(jù)需要增加自定義樣式。
了解了v0能做什么，以及輸出代碼的組成后，我們可以得出結(jié)論 —— v0是一款快速生成項(xiàng)目原型代碼的AI工具。生成的原型代碼中，UI與樣式分離，其中：
UI部分之所以基于shadcn，顯然是為了開發(fā)者導(dǎo)出代碼后，可以方便的二次開發(fā)。
我們可以將v0當(dāng)作一款應(yīng)用場景更廣的低代碼工具，用于快速生成原型代碼。從這個(gè)角度看，他對前端的影響還局限在提效工具上（而不是替代前端）。
與其擔(dān)心v0會(huì)取代你的工作，不如擔(dān)心隔壁悄悄使用v0的同事比你工作效率來的更高......
[1]v0:https://v0.dev/。
[2]shadcn:https://ui.shadcn.com/。
本文鏈接：http://www.tebozhan.com/showinfo-26-10415-0.htmlVercel推出的前端AI工具v0，會(huì)改變前端么？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)