中興AX5400Pro+上手體驗：再升級 雙2.5G網(wǎng)口+USB 3.0這次全都有
2021年11月的時候，中興先后發(fā)布了兩款路由器產(chǎn)品，中興AX5400和中興AX5400 Pro，從產(chǎn)品命名上就不難看出這是隸屬于同一系列的，但在外觀設(shè)計上這兩款產(chǎn)品可以說是完全沒一點關(guān)系
大家好，我卡頌。
最近，Vercel推出了一款A(yù)I代碼生成工具 —— v0[1]，可以快速生成前端組件代碼。
這款A(yù)I工具會影響現(xiàn)有前端開發(fā)模式么？本文會從如下角度展開討論：
v0是Vercel推出的一款「前端組件代碼生成工具」，當(dāng)前還處于Alpha階段，要想試用需要先排隊。
他的使用方式如下：
首先，用自然語言描述需求。
v0會根據(jù)需求生成組件代碼：
我們可以繼續(xù)對不滿意的地方提出修改意見，比如「背景請使用漸變藍色」：
此時，會生成一個新的版本（這里是v1）。具體來說，每個修改意見都會產(chǎn)生一個新的版本。當(dāng)我們再提出 —— 「內(nèi)容寬度為500px」，此時會產(chǎn)生v2：
現(xiàn)在你明白這款產(chǎn)品為什么叫v0了吧？v0指產(chǎn)品的最初版本，開發(fā)者可以基于v0不斷迭代新的版本。而迭代的方式，就是不斷提出新需求或修改意見。
有同學(xué)可能會問：我直接向chatGPT提需求不也能生成代碼，v0有啥優(yōu)勢？
v0的優(yōu)勢主要體現(xiàn)在兩點：
讓我們細(xì)細(xì)聊一下。
如果直接讓chatGPT生成代碼，那么他會生成一大段代碼。比如，我讓chatGPT生成上面提到的天氣預(yù)報組件。下面截取了他返回代碼的一部分，注意其中紅框中組件背景色是白色：
現(xiàn)在，我繼續(xù)提問：「背景請使用漸變藍色」，chatGPT重新輸出了組件代碼，并把背景色改為漸變藍色：
可以看到，每次提出修改意見，chatGPT都得重新生成完整代碼，比較低效。
那我只讓chatGPT輸出修改部分的代碼呢？比如這樣提問 —— 「內(nèi)容寬度為500px，只給出修改的代碼」。
他確實只輸出了需要修改的代碼：
但這樣也存在一個弊端 —— 當(dāng)應(yīng)用龐大時，需要讓chatGPT知道我們想修改哪部分代碼。
比如下面是個郵箱收集頁面，現(xiàn)在我們希望將標(biāo)題改為漸變色。當(dāng)我們向chatGPT提到「標(biāo)題」時，他能理解指的是郵箱收集頁的標(biāo)題。
但當(dāng)應(yīng)用變得復(fù)雜，存在很多「帶標(biāo)題的組件」，讓chatGPT理解你的需求就得費一番功夫了。
使用v0就沒有這方面困擾。我們可以對v0生成頁面中的每個組件、每個元素單獨提問。比如，對于上述「將郵箱收集頁標(biāo)題改為漸變色」的需求，首先用v0生成郵箱收集頁。
現(xiàn)在我們希望將標(biāo)題改為漸變色，只需要選擇標(biāo)題部分并提出「增加一個漸變色」：
就能得到如下結(jié)果：
即使再復(fù)雜的頁面，在提問時，v0會將組件對應(yīng)的上下文一并發(fā)送給大模型，模型能清楚知道要修改哪個組件。
v0生成的React組件代碼中，樣式與UI分別基于兩個庫：
為什么生成代碼的樣式部分要使用TailwindCSS呢？
在我上一篇講TailwindCSS的文章中我提到一個觀點 —— 隨著AI生成代碼的普及，類似TailwindCSS這樣的「原子化CSS」會越來越普及。
這是因為，在有限的未來，大模型輸出的token限制還會一直存在，而「原子化CSS」相比「語義化CSS」能用更少的字符表達更豐富的樣式信息。
這里有兩層意思，首先來看比較好理解的，對比下面兩段代碼：
「原子化CSS」的實現(xiàn)：
<div class="m-1"></div>「語義化CSS」的實現(xiàn)：
<div class="container"></div>.container { margin: 0.25rem;}顯然，從大模型的字符輸出消耗來看，「原子化CSS」能用更少字符表達同樣的樣式。
第二層意思，「原子化CSS」（不管是TailwindCSS還是UnoCSS）都是基于設(shè)計系統(tǒng)的上層封裝。上述m-1的類名背后，并不僅僅是margin: 0.25rem的意思，而是與其他類名一起構(gòu)成的設(shè)計系統(tǒng)。
當(dāng)整個應(yīng)用都是基于設(shè)計系統(tǒng)實現(xiàn)時，整體來看，達到同樣的布局效果，也會更省大模型的字符輸出消耗。
v0的UI部分非常有意思，他基于shadcn這個“組件”庫。
為什么要給「組件」打引號，因為shadcn與一般的組件庫完全不同。
對于一般的組件庫，我們先通過npm安裝它，將它作為項目的依賴，再在項目中引入。
比如，下面是引入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則來自于項目目錄下的components目錄。
這就是shadcn的理念 —— 0依賴，按需復(fù)制粘貼代碼。
簡單來說，如果你想使用shadcn中的某個組件，不是通過npm安裝shadcn這個包，再引入組件。而是直接復(fù)制該組件的代碼到項目目錄下（當(dāng)然，整個復(fù)制過程是通過cli工具完成的）。
這么做相比于傳統(tǒng)組件庫，有兩個顯著優(yōu)勢：
組件邏輯想改就改，不用擔(dān)心組件沒暴露對應(yīng)的props。
畢竟，整個組件的源代碼我們都直接復(fù)制下來了，改個邏輯還不簡單？
UI與樣式分離
復(fù)制下來的組件只包含基礎(chǔ)樣式，開發(fā)者根據(jù)需要增加自定義樣式。
了解了v0能做什么，以及輸出代碼的組成后，我們可以得出結(jié)論 —— v0是一款快速生成項目原型代碼的AI工具。生成的原型代碼中，UI與樣式分離，其中：
UI部分之所以基于shadcn，顯然是為了開發(fā)者導(dǎo)出代碼后，可以方便的二次開發(fā)。
我們可以將v0當(dāng)作一款應(yīng)用場景更廣的低代碼工具，用于快速生成原型代碼。從這個角度看，他對前端的影響還局限在提效工具上（而不是替代前端）。
與其擔(dān)心v0會取代你的工作，不如擔(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，會改變前端么？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號