如何在 Nuxt 中使用 Prisma ORM

10 分钟

Prisma Nuxt 模块帮助您在 Nuxt 应用中开始使用 Prisma，简化了初始设置过程。本指南解释了如何设置 Nuxt 应用，配置使用 Prisma Nuxt 模块的 Prisma Postgres，并将项目部署到 Vercel 以进行生产。

您将学习到以下内容

如何使用 Prisma Nuxt 模块设置 Nuxt 项目。
如何在您的 Nuxt 应用中使用 Prisma Nuxt 模块配置和使用 Prisma Postgres。
如何将项目部署到 Vercel。

先决条件

要遵循本指南，请确保您拥有以下内容

Node.js 版本：Prisma 6 要求的兼容的 Node.js 版本。
账户
Git 和 Vercel 部署的基础知识（有帮助但不是必需的）。

1. 创建新的 Nuxt 项目并设置 Prisma Nuxt 模块

初始化一个新的 Nuxt 项目，选择 npm 作为包管理器并初始化 git
```
npx nuxi@latest init 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://127.0.0.1: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://127.0.0.1:3000，验证应用程序代码是否正常工作。
由于数据库中还没有用户，应用程序将显示
```
No user has been added yet.
```
当用户添加到您的数据库时，此消息将动态更新。

通过完成这些步骤，您的应用程序现在能够从您的 Prisma 数据库中获取数据并在前端呈现它。

5. 创建 Prisma Postgres 实例

要存储您的应用数据，您将使用 Prisma Data Platform 创建 Prisma Postgres 数据库实例。

按照以下步骤创建您的 Prisma Postgres 数据库

登录到并打开控制台。
在您选择的工作区中，单击 New project 按钮。
在 Name 字段中键入您项目的名称，例如 hello-ppg。
在 Prisma Postgres 部分，单击 Get started 按钮。
在 Region 下拉列表中，选择离您当前位置最近的区域，例如 美国东部（弗吉尼亚北部）。
单击 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 文件。它看起来会类似于这样

.env
```
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"
```
通过更改位于 prisma 文件夹中的 schema.prisma 文件的 datasource 块中的数据库提供程序来修改 schema.prisma 文件

prisma/schema.prisma
```
datasource 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://127.0.0.1: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 环境变量
1. 展开 Environment variables 部分。
2. 添加 DATABASE_URL 环境变量
  - Key：DATABASE_URL
  - Value：粘贴您的 Prisma Postgres 连接 URL，例如，从您的 Nuxt 项目的 .env 文件中复制它。
  警告
  请勿在未设置 DATABASE_URL 变量的情况下部署。如果应用程序无法连接到数据库，您的部署将失败。
单击 Deploy 按钮。Vercel 将构建您的项目并将其部署到实时 URL。
打开 Vercel 提供的实时 URL 并验证您的应用程序是否正在工作
- 如果您在 Prisma Studio 中添加了用户，他们的姓名应显示在实时站点上。
- 如果不存在用户，应用程序将显示
```
No user has been added yet.
```
要添加或管理数据
1. 通过 Prisma Data Platform 或本地实例打开 Prisma Studio。
2. 在数据库中添加或更新用户数据。
3. 刷新您的实时站点以确认更改。

恭喜！您的带有 Prisma Postgres 集成的 Nuxt 应用程序现在已在 Vercel 上上线并完全运行。

注意事项

本指南帮助您开始使用 Nuxt 模块的 Prisma Postgres。由于 Nuxt 模块正在积极发展，因此它不涵盖 Prisma 的所有功能或支持所有极端情况。对于更高级的功能或边缘部署，请考虑直接使用 Prisma。

先决条件​

1. 创建新的 Nuxt 项目并设置 Prisma Nuxt 模块​

2. 通过在本地运行开发服务器来设置 Prisma ORM​

4. 更新应用程序代码​

5. 创建 Prisma Postgres 实例​

6. 在您的 Nuxt 应用中设置 Prisma Postgres​

7. 部署到 Vercel​

注意事项​