v0是Vercel推出的一款前端组件代码生成工具，用于快速生成原型代码。生成的原型代码中，UI与样式分离，其中：

UI：基于shadcn
样式：基于TailwindCSS

UI部分之所以基于shadcn，显然是为了开发者导出代码后，可以方便的二次开发。

我们可以将v0当作一款应用场景更广的低代码工具，用于快速生成原型代码。从这个角度看，他对前端的影响还局限在提效工具上（而不是替代前端）。

使用方式：

1、首先用自然语言描述需求。v0会根据需求生成组件代码（初始版本v0）

2、然后可以继续对不满意的地方提出修改意见。此时，会生成一个新的版本（后续版本v1,v2...）

可以看出，这款产品为什么叫v0？v0指产品的最初版本，开发者可以基于v0不断迭代新的版本。而迭代的方式，就是不断提出新需求或修改意见。

v0的优势:

为什么直接向chatGPT提需求不也能生成代码，v0有啥优势？v0的优势主要体现在两点：

1、可以针对组件不同部分单独修改

相比chatGPT生成代码，如果需要修改意见，chatGPT都得重新生成完整代码，比较低效。而且当应用庞大时，需要让chatGPT知道我们想修改哪部分代码，是非常麻烦的。

2、UI与样式分离

v0生成的React组件代码中，样式与UI分别基于两个库：

样式基于TailwindCSS，这是由于原子化CSS相比语义化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的意思，而是与其他类名一起构成的设计系统。当整个应用都是基于设计系统实现时，整体来看，达到同样的布局效果，也会更省大模型的字符输出消耗。

UI基于shadcn：

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与样式分离，复制下来的组件只包含基础样式，开发者根据需要增加自定义样式。

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/3954