扫一扫分享
v0是Vercel推出的一款前端组件代码生成工具,用于快速生成原型代码。生成的原型代码中,UI与样式分离,其中:
UI:基于shadcn
样式:基于Tailwindcss
UI部分之所以基于shadcn,显然是为了开发者导出代码后,可以方便的二次开发。
我们可以将v0当作一款应用场景更广的低代码工具,用于快速生成原型代码。从这个角度看,他对前端的影响还局限在提效工具上(而不是替代前端)。
1、首先用自然语言描述需求。v0会根据需求生成组件代码(初始版本v0)
2、然后可以继续对不满意的地方提出修改意见。此时,会生成一个新的版本(后续版本v1,v2...)
可以看出,这款产品为什么叫v0?v0指产品的最初版本,开发者可以基于v0不断迭代新的版本。而迭代的方式,就是不断提出新需求或修改意见。
为什么直接向chatGPT提需求不也能生成代码,v0有啥优势?v0的优势主要体现在两点:
相比chatGPT生成代码,如果需要修改意见,chatGPT都得重新生成完整代码,比较低效。而且当应用庞大时,需要让chatGPT知道我们想修改哪部分代码,是非常麻烦的。
v0生成的react组件代码中,样式与UI分别基于两个库:
样式基于TailwindCSS,这是由于原子化CSS相比语义化CSS能用更少的字符表达更丰富的样式信息。
<div class="m-1"></div>
语义化CSS的实现:
<div class="container"></div>
.container {
margin: 0.25rem;
}
显然,从大模型的字符输出消耗来看,原子化CSS能用更少字符表达同样的样式。
原子化CSS(不管是TailwindCSS还是UnoCSS)都是基于设计系统的上层封装。上述m-1的类名背后,并不仅仅是margin: 0.25rem的意思,而是与其他类名一起构成的设计系统。当整个应用都是基于设计系统实现时,整体来看,达到同样的布局效果,也会更省大模型的字符输出消耗。
shadcn与一般的组件库完全不同。对于一般的组件库,我们先通过npm安装它,将它作为项目的依赖,再在项目中引入。
比如,下面是引入antd中Calendar组件的方式:
import { Calendar } from 'antd';
const App: React.FC = () => {
return <Calendar />;
};
下面是引入shadcn中Calendar组件的方式,对比看看有啥区别?
import { Calendar } from "@/components/ui/calendar"
const App: React.FC = () => {
return <Calendar />;
};
antd中的Calendar来自于antd模块,而shadcn中的Calendar则来自于项目目录下的components目录。
这就是shadcn的理念 —— 0依赖,按需复制粘贴代码。
简单来说,如果你想使用shadcn中的某个组件,不是通过npm安装shadcn这个包,再引入组件。而是直接复制该组件的代码到项目目录下(当然,整个复制过程是通过cli工具完成的)。
这么做相比于传统组件库,有两个显著优势:
组件逻辑想改就改,不用担心组件没暴露对应的props,毕竟,整个组件的源代码我们都直接复制下来了,改个逻辑还不简单?
UI与样式分离,复制下来的组件只包含基础样式,开发者根据需要增加自定义样式。
手机预览