如何在 Nuxt 中使用 Prisma ORM
Prisma Nuxt 模块帮助您开始在 Nuxt 应用程序中使用 Prisma,简化了初始设置过程。本指南解释了如何设置 Nuxt 应用程序,配置 Prisma Postgres 使用 Prisma Nuxt 模块,并将项目部署到 Vercel 以进行生产环境部署。
您将学习到以下内容
- 如何使用 Prisma Nuxt 模块设置 Nuxt 项目。
- 如何在您的 Nuxt 应用中使用 Prisma Nuxt 模块配置和使用 Prisma Postgres。
- 如何将项目部署到 Vercel。
先决条件
要遵循本指南,请确保您具备以下条件
- Node.js 版本:Prisma 6 需要的兼容的 Node.js 版本。
- 账户
- Git 和 Vercel 部署的基本知识(有帮助但不是必需的)。
1. 创建新的 Nuxt 项目并设置 Prisma Nuxt 模块
-
初始化一个新的 Nuxt 项目,选择
npm
作为包管理器并初始化 gitnpm create nuxt hello-world
注意我们建议使用
npm
,因为它是@prisma/nuxt
模块最稳定的选项。 -
导航到项目目录并安装
@prisma/nuxt
模块cd hello-world
npm i @prisma/nuxt -
安装 Prisma Accelerate 客户端扩展,因为使用 Prisma Postgres 需要它
npm i @prisma/extension-accelerate
-
将
@prisma/nuxt
模块以及以下配置添加到您的nuxt.config.ts
文件中// https://nuxtjs.org.cn/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-11-01",
modules: ["@prisma/nuxt"],
experimental: {
componentIslands: true,
},
devtools: { enabled: true },
});
2. 通过在本地运行开发服务器来设置 Prisma ORM
使用 Prisma 模块配置 Nuxt 项目后,下一步是设置 Prisma ORM。此过程从启动开发服务器开始,该服务器会自动使用 SQLite 数据库 配置 Prisma。
运行以下命令以启动开发服务器
npm run dev
运行此命令后,系统将提示您使用 Prisma Migrate 运行数据库迁移
? Do you want to migrate database changes to your database? › (Y/n)
通过在键盘上按 Y 确认您要迁移数据库并创建初始表。
一旦设置流程终止,它将
- 安装 Prisma CLI。
- 使用 SQLite 数据库初始化 Prisma 项目。
- 在
schema.prisma
文件中创建示例User
和Post
模型prisma/schema.prisma// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
} - 从之前的步骤创建
User
和Post
模型的数据库表。注意如果您没有
migrations
文件夹,则数据库会在您首次启动模块时自动迁移。之后,您需要在 CLI 中手动运行npx prisma migrate dev
以应用任何 schema 更改。手动运行npx prisma migrate dev
命令可以更轻松、更安全地管理迁移,并解决任何与迁移相关的错误。 - 安装并生成 Prisma Client,使您能够查询数据库。
- 安装 Prisma Studio。
当 Prisma 设置完成后,开发服务器应在 https://localhost:3000
上启动。
接下来,停止服务器,因为我们需要进行一些代码更改。
4. 更新应用程序代码
配置 Prisma 后,下一步是更新您的应用程序代码,以从数据库中获取和显示数据。
-
在项目根目录中,创建一个名为
components
的文件夹。 -
在
components
文件夹中,创建一个名为User.server.vue
的文件。此服务器组件将从数据库中获取并显示第一个用户的姓名components/User.server.vue<script setup>
import { withAccelerate } from "@prisma/extension-accelerate";
const prisma = usePrismaClient().$extends(withAccelerate());
const user = await prisma.user.findFirst();
</script>
<template>
<p>{{ user?.name ?? "No user has been added yet." }}</p>
</template>注意我们正在使用
withAccelerate()
扩展方法扩展usePrismaClient()
composable,以确保与 Prisma Postgres 的兼容性。此扩展还将允许您缓存您的查询。 -
修改根目录中的
app.vue
文件,以使用 Nuxt Islands 包含新的服务器组件app.vue<template>
<div>
<NuxtIsland name="User"></NuxtIsland>
</div>
</template> -
运行以下命令以再次启动开发服务器
npm run dev
-
通过在浏览器中打开
https://localhost:3000
上的应用程序,验证应用程序代码是否正常工作。
由于数据库中还没有用户,应用程序将显示No user has been added yet.
当用户添加到您的数据库时,此消息将动态更新。
完成这些步骤后,您的应用程序现在能够从 Prisma 数据库中获取数据并在前端呈现它。
5. 创建 Prisma Postgres 实例
要存储您的应用数据,您将使用 Prisma Data Platform 创建一个 Prisma Postgres 数据库实例。
按照以下步骤创建您的 Prisma Postgres 数据库
- 登录到https://console.prisma.io/ 并打开 Console。
- 在您选择的工作区中,单击 New project 按钮。
- 在 Name 字段中键入项目的名称,例如 hello-ppg。
- 在 Prisma Postgres 部分,单击 Get started 按钮。
- 在 Region 下拉菜单中,选择离您当前位置最近的区域,例如 US East (N. Virginia)。
- 单击 Create project 按钮。
此时,您将被重定向到 Database 页面,您需要在该页面等待几秒钟,直到数据库的状态从 PROVISIONING
更改为 CONNECTED
。
一旦绿色 CONNECTED
标签出现,您的数据库就可以使用了!
然后,在 Set up database access 部分找到您的数据库凭据,复制 DATABASE_URL
环境变量。
DATABASE_URL=<your-database-url>
在接下来的步骤中将需要 DATABASE_URL
环境变量。
6. 在您的 Nuxt 应用中设置 Prisma Postgres
现在 Prisma Postgres 实例已准备就绪,更新您的 Nuxt 应用程序以使用此数据库
-
通过将现有的
DATABASE_URL
值替换为您之前复制的值来更新.env
文件。它看起来会类似于这样.envDATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"
-
通过更改
prisma
文件夹中schema.prisma
文件的datasource
块中的数据库提供程序来修改schema.prisma
文件prisma/schema.prismadatasource db {
provider = "postgresql"
url = env("DATABASE_URL")
} -
删除 SQLite 数据库文件(
dev.db
和dev.db-journal
)以及migrations
文件夹,它们都位于prisma
目录中。 这将清理现有的 SQLite 设置,并为您的项目迁移到 PostgreSQL 做准备。 -
通过运行
prisma migrate
命令,手动为 Postgres 数据库创建新的迁移npx prisma migrate dev --name init
-
再次启动开发服务器
npm run dev
-
打开 Nuxt DevTools(通过按 Shift+Option+ D)并单击左侧边栏中的 Prisma 徽标以打开 Prisma Studio。然后通过指定
name
和email
字段的值来添加新的User
记录。 -
通过在
https://localhost:3000
刷新您的应用程序来验证应用程序中的数据。该页面应显示您在 Prisma Studio 中添加的用户的姓名。例如,如果您添加了一个名为Jon
的用户,则应用程序将在浏览器中显示Jon
。
恭喜,您的 Nuxt 应用现在已与 Prisma Postgres 完全集成!
7. 部署到 Vercel
按照以下步骤将您的集成 Prisma Postgres 的 Nuxt 应用程序部署到 Vercel
- 确保您的项目已进行版本控制并推送到 GitHub 仓库。如果您还没有仓库,请在 GitHub 上创建一个。仓库准备就绪后,运行以下命令
git add .
git commit -m "Initial commit with Prisma Postgres integration"
git branch -M main
git remote add origin https://github.com/<your-username>/<repository-name>.git
git push -u origin main注意将
<your-username>
和<repository-name>
替换为您的 GitHub 用户名和仓库名称。 - 登录到 Vercel 并导航到您的 仪表板。
- 创建一个新项目。按照 Vercel 的 导入现有项目 指南,但在 步骤 3 处停止,您将在单击 Deploy 之前 配置环境变量。
- 配置
DATABASE_URL
环境变量- 展开 Environment variables 部分。
- 添加
DATABASE_URL
环境变量- Key:
DATABASE_URL
- Value: 粘贴您的 Prisma Postgres 连接 URL,例如,从您的 Nuxt 项目的
.env
文件中复制它。
警告不要在未设置
DATABASE_URL
变量的情况下部署。如果应用程序无法连接到数据库,您的部署将失败。 - Key:
- 单击 Deploy 按钮。 Vercel 将构建您的项目并将其部署到在线 URL。
- 打开 Vercel 提供的在线 URL 并验证您的应用程序是否正常运行
- 如果您在 Prisma Studio 中添加了用户,则他们的姓名应显示在在线站点上。
- 如果不存在用户,应用程序将显示
No user has been added yet.
- 要添加或管理数据
- 通过 Prisma Data Platform 或本地实例打开 Prisma Studio。
- 在数据库中添加或更新用户数据。
- 刷新您的在线站点以确认更改。
恭喜!您的集成 Prisma Postgres 的 Nuxt 应用程序现在已上线并在 Vercel 上完全运行。
注意事项
本指南帮助您开始使用 Nuxt 模块的 Prisma Postgres。由于 Nuxt 模块正在积极发展,因此它不涵盖 Prisma 的所有功能或支持所有极端情况。对于更高级的功能或边缘部署,请考虑直接使用 Prisma。
与 Prisma 保持联系
通过与 我们活跃的社区联系,继续您的 Prisma 之旅。 随时了解情况,参与其中,并与其他开发者协作
- 在 X 上关注我们 获取公告、现场活动和实用技巧。
- 加入我们的 Discord 提出问题,与社区交流,并通过对话获得积极的支持。
- 在 YouTube 上订阅 获取教程、演示和直播。
- 在 GitHub 上互动 通过为仓库加星标、报告问题或为问题做出贡献。