fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

v0.dev
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://v0.dev/
网站描述:一款AI代码生成工具

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

more>>
相关栏目
remove.bg
消除图片背景:100% 自动 – 只需 5 秒
官网
阿里云DataV
地图数据
官网
Apifox
API 文档、API 调试、API Mock、API 自动化测试一体化协作平台
官网
易文档
需求文档、API文档、部署文档到使用手册
官网
mdx-deck
基于MDX的演示文稿
官网GitHub
YouCompress
在线免费文件压缩工具
官网
iHateRegex
快速搜索并匹配到合适的正则表达式
官网GitHub
Trilium Notes
层级结构的笔记程序,专注构建个人的大型知识库
点击进入GitHub
CodeZen
在线源代码转图片工具
官网
pngtosvg
在线PNG转SVG转换工具
官网
PDFgear
高效的 PDF 在线工具
官网
HackMD
一款超级好用的在线Markdown编辑器
官网GitHub
Hexnaw
在线网站配色评分工具
官网
糯词笔记
最佳读书笔记管理工具
官网
压缩图
在线图片压缩工具集合
官网
VectorCreator
简报插图创作工具
官网

手机预览