Bolt.new全栈Nuxt开发实测

TOOL Dec 2, 2024

推荐： ComfyUI-PandasAI | ComfyUI-Autodistill | HDRI-Pack高清环境贴图包

bolt.new 是一款出色的新 AI 工具，可用于生成和运行代码。它由 StackBlitz 团队创建，可用于使用 Vue、React、Astro 或 Nuxt 等现代工具生成 UI 甚至全栈应用程序逻辑和 API 端点。

在本文中，让我们对其进行测试，看看它在使用 Nuxt 内容生成博客以及利用 Nitro 中的 useStorage 函数作为持久存储层方面的表现如何。

在此过程中，我们将看到它在生成 UI 元素、API 端点等方面的表现如何。我们还将介绍一些充分利用 bolt.new 的技巧。

1、启动项目

让我们通过使用以下提示提示 bolt 为我们创建博客来启动项目：

Let's create a blog about video games using Nuxt and Nuxt Content. 
It should use TailwindCSS for styling and have a cool, modern gamer vibe.

翻译：让我们使用 Nuxt 和 Nuxt Content创建一个关于视频游戏的博客。
它应该使用 TailwindCSS 进行样式设计，并具有酷炫的现代游戏玩家氛围。

这会产生一个时尚且实用的起点，甚至还有一些相关的虚拟帖子！它有一个主页、一个博客列表页面和一个使用动态 slug 参数获取正确帖子的帖子页面，所有这些都已正确设置以使用 Nuxt Content 管理内容。

2、在 Bolt.new Nuxt 项目上进行迭代

图像目前全部损坏。让我们从 lorem picsum 添加一些占位符图像：

use placeholder images from lorem picsum for all the images

翻译：对所有图像使用来自 lorem picsum 的占位符图像

2.1 使用 Bolt 和 VueUse Nuxt 模块制作相对时间显示

目前，每篇博客文章都有一个绝对的发布日期，例如 4/2/2024。如果我们想让时间相对化怎么办？我们绝对可以做到！我恰好知道 VueUse 有一个很棒的可组合功能，所以让我们看看 Bolt 是否会使用它。

Can we make the date display relative (like 1 day ago, etc) 
and then only show the human readable date on hover? Use the `useTimeAgo`
composable from the VueUse Nuxt module.

翻译：我们可以让日期显示为相对日期（例如 1 天前等），然后仅在悬停时显示人类可读的日期吗？使用 VueUse Nuxt 模块中的 useTimeAgo可组合项。

这招很管用！Bolt 安装了 VueUse Nuxt 模块，甚至创建了一个抽象的 RelativeDate 组件并将其放置在博客文章页面中。

不过，这一步有几个问题，一个额外的 <content> 标签被随机添加到 [...slug] 组件中（大概是 Bolt 在生成新内容时在后台使用它），并且由于 bolt 必须运行 npm install，因此开发服务器停止了。不过，只需一点手动注意，这两个问题都很容易解决。

2.2 使用 useStorage 在 Bolt 中为评论提供持久数据存储

此时，我们已经有一个功能齐全的博客。让我们使用 nitro 中的 useStorage 函数来支持帖子评论的键值存储（或 KV 存储）。 useStorage 函数在许多不同的托管平台（如 CloudFlare、Netlify 和 Vercel）的 KV 存储服务上提供了一个抽象层，这意味着我们可以灵活地部署到几乎任何地方。在开发中，我们只使用内存来存储数据。

Add comments support to the single blog post page. 
Create an API endpoints to get and store comments. 
In the API endpoints, use the useStorage function from Nitro 
to store comments in KV storage.

翻译：
向单个博客文章页面添加评论支持。
创建 API 端点来获取和存储评论。
在 API 端点中，使用 Nitro 中的 useStorage 函数将评论存储在 KV 存储中。

此提示获得了一个非常漂亮的 UI 引导，并为几个 API 端点编写了代码。

当我尝试发表评论时，我收到一条错误消息，提示未定义加密。

bolt.new 中运行的节点版本是 Node 18，因此 crypto模块不可用。它用于 API 端点中，用于创建新评论以生成随机 UUID。没问题，我可以使用终端选项卡安装 nanoid，并以此方式生成 UUID。

这次成功了！即使我刷新页面，我的评论也会保留下来，因为它会持久保存到正在运行的节点应用程序的内存中。部署时，我只需在 nuxt.config.ts 中配置我选择的 KV 存储驱动程序

2.3 使用 Tip Tap 编辑器的富文本评论

纯文本评论很好，但支持带有粗体和斜体等选项的富文本会更好。TipTap 编辑器可以毫无问题地处理这个问题！

Provide rich text support for comments with tip tap.

翻译：使用 tip tap 为评论提供富文本支持。

它甚至转义 TipTap 的 HTML 输出以防止恶意 JavaScript 注入，并使用 Tailwind 排版插件来设置输出样式。

2.4 使用 Nuxt Auth Utils 进行授权

让我们尝试通过使用 Nuxt Auth Utils 实现身份验证来使其稍微复杂一些。这意味着用户必须使用 github 登录才能发表评论。我还将提示 bolt 在哪里可以找到 Nuxt auth utils 的文档，因为它很新，我想确保 bolt 能够准确处理事情。

Let's implement authentication with Nuxt Auth Utils 
(https://github.com/atinux/nuxt-auth-utils) and require a user 
to login with github to make a comment.

翻译：让我们使用 Nuxt Auth Utils 实现身份验证
（https://github.com/atinux/nuxt-auth-utils）并要求用户
使用 github 登录才能发表评论。

这次我得到了好坏参半的结果……

优点:

UI 看起来很棒！

主导航栏中添加了登录链接：

Bolt 引导我完成 Github 端所需的设置，甚至为我提供了所需环境变量的占位符

缺点：

有些事情进展得不太顺利……我必须在 Nuxt auth utils 文档的帮助下手动修复几个错误，包括：

重新安装最新版本的 nuxt auth utils 包
将 useAuth 重命名为正确的 useUserSession() 可组合项。
根据 Nuxt Auth Utils 文档的要求重命名 .env 变量： NUXT_OAUTH_GITHUB_CLIENT_SECRET 和 NUXT_OAUTH_GITHUB_CLIENT_ID 。
提供服务器端路由来处理 Github 身份验证，如文档中的此示例所示。

即使进行了这些更改，身份验证仍然无法正常工作，因此我停止尝试并要求 bolt 恢复身份验证功能：

the nuxt auth utils didn't work, let's roll that back

翻译：nuxt auth utils不起作用，让我们回滚它

公平地说，它很好地将事情回滚到以前的状态，我只需要手动删除一个文件（即我上面手动添加的用于处理 github 身份验证的服务器端路由）

3、提示和完成的项目

以下是我用来生成完成项目的所有提示。这个简单的复制是通过 StackBlitz 工程师 Tomek Sułkowski 分享的书签实现的。

Let's create a blog about video games using Nuxt and Nuxt Content. It should use TailwindCSS for styling and have a cool, modern gamer vibe.

use placeholder images from lorem picsum for all the images

Can we make the date display relative (like 1 day ago, etc)
and then only show the human readable date on hover? Use the useTimeAgo
composable from the VueUse Nuxt module.

Add comments support to the single blog post page. Create an API endpoints to get and store comments. In the API endpoints, use the useStorage function from Nitro to store comments in KV storage.

Provide rich text support for comments with tip tap.

Let's implement authentication with Nuxt Auth Utils (https://github.com/atinux/nuxt-auth-utils) and require a user to login with github to make a comment.

the nuxt auth utils didn't work, let's roll that back

翻译：

让我们使用 Nuxt 和 Nuxt Content 创建一个关于视频游戏的博客。它应该使用 TailwindCSS 进行样式设计，并具有酷炫、现代的游戏玩家氛围。

使用 lorem picsum 中的占位符图像作为所有图像

我们可以将日期显示为相对日期（例如 1 天前等），然后仅在悬停时显示人类可读的日期吗？使用 VueUse Nuxt 模块中的 useTimeAgo可组合项。

向单个博客文章页面添加评论支持。创建一个 API 端点来获取和存储评论

在 API 端点中，使用 Nitro 中的 useStorage 函数将评论存储在 KV 存储中。

使用 tip tap 为评论提供富文本支持。

让我们使用 Nuxt Auth Utils（https://github.com/atinux/nuxt-auth-utils）实现身份验证，并要求用户使用 github 登录才能发表评论。

nuxt auth 实用程序不起作用，让我们回滚它

这是博客文章末尾的项目源码。