我们框架使用到的前端技术有React、Tailwind和Shadcn，Shadcn是一个ui框架，Tailwind是一个样式组件，而本节要介绍的一个编程助手就是Shadcn这家公司Vercel推出的v0.dev。Vercel公司还有前端很流行的开发脚手架Nextjs。
这次介绍如何使用v0帮助我们生成页面。
使用V0
万事开头难，当我们需要开发一个新页面的时候，就会对着IDE发呆。如果说有原型图还好说，如果没有，那么我们就得对着需求自己想了。大概你会想着把原来写过的代码拿过来粘贴一下，然后做一些修改，原来这个代码大概就是个列表页。
那么现在有了大模型的加持，很多工作流程就可以发生变化了。这里我们使用v0来尝试开发一个页面。
这是v0的首页，一个输入框，你告诉它，你想生成什么样子的页面，他就会帮你生成，同时会提供生成页面的预览。
如果一次生成的效果不满意，可以继续告诉它你要怎么修改，它会继续帮你去完善这个页面，当页面达到你的要求的时候，你就可以通过直接复制这个代码或者使用安装命令安装到你的项目中去。
当然，你如果有现成的页面样式，比如原型图或者其他网站你喜欢的页面，可以把页面参考图给它，让它帮你照着生成。不过一般情况下，第一次效果都不会满意，多跟它对话几次，让它帮你去修改，直到满意为止。
比如说，我想让他帮我照着如下参考图生成页面：
我会把这个页面上传给它，让它帮我生成。
以上是它第一次生成的页面，当然有些地方不一致，可以让它继续修改，红框的地方是生成的代码，右上角的CLI图表是可以拷贝，然后在项目中运行，当运行命令后，这个生成的代码就会以这个文件名出现在你的src/components/ui文件夹下，你就可以在页面中引入了。
值得注意的是，这个工具每天有免费使用次数，大概10次左右吧，完全可以帮助你生成2个新页面了。
这个工具生成的页面会有一些交互，但一般不够用，需要进行修改，比如访问后台数据，一些更复杂的逻辑处理等。
使用ChatGPT
下面让我们请出ChatGPT，它同样可以完成页面生成，它也可以实现页面的逻辑。
这里是一个例子。
shadcn提供的组件一般不包含逻辑，这里需要我们自己去补充逻辑信息。这里我们拿Pagination组件举例。
我们看它的代码使用，非常简单，没有任何交互功能。
react
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>那么，如果我们需要把它封装成一个分页组件，包含点击事件、显示条数、总数等，如果让我们自己去写，逻辑会比较复杂，也可能写出bug。这个时候，我们把这段代码发送给ChatGPT让它帮我们生成带逻辑的分页组件。
这样子，效率更高，代码质量更好，何乐而不为？
这是经过3轮对话，让它帮我生成的代码：
javascript
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious
} from "@/components/ui/pagination";
import React from "react";
const Pager = ({page, pageSize, rows, total, onPageChange}) => {
// Calculate total pages
const totalPages = Math.ceil(total / pageSize);
const handlePageChange = (page) => {
if (page >= 1 && page <= totalPages) {
onPageChange(page)
}
}
// Generate pagination items
const renderPaginationItems = () => {
const items = [];
// Add first page
if (page > 3) {
items.push(
<PaginationItem key={1}>
<PaginationLink
onClick={() => handlePageChange(1)}
isActive={page === 1}
className='cursor-pointer'
>
1
</PaginationLink>
</PaginationItem>
);
// Add '...' after the first page if needed
if (page > 4) {
items.push(
<PaginationItem>
<PaginationEllipsis/>
</PaginationItem>
)
}
}
// Add pages around the current page
for (let i = Math.max(1, page - 2); i <= Math.min(totalPages, page + 2); i++) {
items.push(
<PaginationItem key={i}>
<PaginationLink
onClick={() => handlePageChange(i)}
isActive={page === i}
className='cursor-pointer'
>
{i}
</PaginationLink>
</PaginationItem>
);
}
// Add '...' before the last page if needed
if (page < totalPages - 3) {
items.push(
<PaginationItem key={'...'}>
<PaginationEllipsis/>
</PaginationItem>
)
}
// Add last page
if (page < totalPages - 2) {
items.push(
<PaginationItem key={totalPages}>
<PaginationLink
onClick={() => handlePageChange(totalPages)}
isActive={page === totalPages}
className='cursor-pointer'
>
{totalPages}
</PaginationLink>
</PaginationItem>
);
}
return items;
};
return (
<div className='flex justify-between w-full'>
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious onClick={() => handlePageChange(page - 1)} className='cursor-pointer'/>
</PaginationItem>
{renderPaginationItems()}
<PaginationItem>
<PaginationNext onClick={() => handlePageChange(page + 1)} className='cursor-pointer'/>
</PaginationItem>
</PaginationContent>
</Pagination>
<div className="text-xs text-muted-foreground w-64">
显示 <strong>第{page}页</strong> - <strong>{rows}条记录</strong> - <strong>总数：{total}</strong>
</div>
</div>
)
}
export default Pager代码很规整，还包含注释，我想它写的代码比我们大多数人都好。
最后
ChatGPT们已经深入到了我们的工作中，目前它们的能力可以很好的扮演编程助手的工作，而我们需要掌握如何使唤它，如何更好的使唤它。我们可以更少的自己动手写东西了，但我们需要更广泛的知识面去指挥它干活。