建站
咨詢
售后
建站咨詢
新聞中心
大家好，我卡頌。
最近，Vercel推出了一款A(yù)I代碼生成工具 —— v0[1]，可以快速生成前端組件代碼。
這款A(yù)I工具會(huì)影響現(xiàn)有前端開發(fā)模式么？本文會(huì)從如下角度展開討論：
- v0是什么？能做什么？
- v0生成的代碼包含哪些部分？會(huì)對現(xiàn)有前端開發(fā)產(chǎn)生什么影響？
v0是什么
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)：
- 可以針對組件不同部分單獨(dú)修改。
- UI與樣式分離。
讓我們細(xì)細(xì)聊一下。
可以針對組件不同部分單獨(dú)修改
如果直接讓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è)組件。
UI與樣式分離
v0生成的React組件代碼中，樣式與UI分別基于兩個(gè)庫：
- 樣式：基于TailwindCSS
- UI：基于shadcn[2]
樣式部分
為什么生成代碼的樣式部分要使用TailwindCSS呢？
在我上一篇講TailwindCSS的文章中我提到一個(gè)觀點(diǎn) —— 隨著AI生成代碼的普及，類似TailwindCSS這樣的「原子化CSS」會(huì)越來越普及。
這是因?yàn)?，在有限的未來，大模型輸出的token限制還會(huì)一直存在，而「原子化CSS」相比「語義化CSS」能用更少的字符表達(dá)更豐富的樣式信息。
這里有兩層意思，首先來看比較好理解的，對比下面兩段代碼：
「原子化CSS」的實(shí)現(xiàn)：
「語義化CSS」的實(shí)現(xiàn)：
.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ì)更省大模型的字符輸出消耗。
UI部分
v0的UI部分非常有意思，他基于shadcn這個(gè)“組件”庫。
為什么要給「組件」打引號，因?yàn)閟hadcn與一般的組件庫完全不同。
對于一般的組件庫，我們先通過npm安裝它，將它作為項(xiàng)目的依賴，再在項(xiàng)目中引入。
比如，下面是引入antd中Calendar組件的方式：
import { Calendar } from 'antd';
const App: React.FC = () => {
return 下面是引入shadcn中Calendar組件的方式，對比看看有啥區(qū)別？
import { Calendar } from "@/components/ui/calendar"
const App: React.FC = () => {
return 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ù)需要增加自定義樣式。
總結(jié)
了解了v0能做什么，以及輸出代碼的組成后，我們可以得出結(jié)論 —— v0是一款快速生成項(xiàng)目原型代碼的AI工具。生成的原型代碼中，UI與樣式分離，其中：
- UI：基于shadcn
- 樣式：基于TailwindCSS
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/。
網(wǎng)站欄目：Vercel推出的前端AI工具v0，會(huì)改變前端么？
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/cocoiog.html
