如何在 Nuxt 中使用 Prisma ORM

10 分钟

本指南解释了如何设置 Nuxt 应用程序、配置 Prisma Postgres 与 Prisma ORM，并将项目部署到 Vercel 进行生产部署。

您将学到什么

• 如何设置直接使用 Prisma ORM 的 Nuxt 项目。
• 如何在 Nuxt 应用程序中配置和使用 Prisma ORM 与 Prisma Postgres。
• 如何将项目部署到 Vercel。

先决条件

要遵循本指南，请确保您具备以下条件

• Node.js 版本：Prisma 6 所需的兼容 Node.js 版本。
• 账户
  • GitHub
  • Vercel
• Git 和 Vercel 部署的基础知识（有帮助但非必需）。

1. 创建新的 Nuxt 项目并安装 Prisma ORM 依赖项

1. 初始化一个新的 Nuxt 项目，选择 npm 作为包管理器并初始化 git

   npm create nuxt hello-world
2. 进入项目目录并安装 Prisma ORM 依赖项以及 PostgreSQL 驱动适配器

   cd hello-world
   npm install @prisma/client @prisma/adapter-pg pg dotenv tsx
   npm install -D prisma @types/pg
3. 通过运行以下命令初始化 Prisma 与 PostgreSQL

   npx prisma init --db

2. 配置 Prisma

在运行开发服务器之前，在项目根目录中创建一个 prisma.config.ts 文件来管理环境变量和配置

prisma.config.ts

import 'dotenv/config'
import { defineConfig, env } from 'prisma/config'

export default defineConfig({
  schema: 'prisma/schema.prisma',
  migrations: {
    path: 'prisma/migrations',
    seed: 'tsx ./prisma/seed.ts',
  },
  datasource: {
    url: env('DATABASE_URL'),
  },
})

3. 设置 Prisma ORM

Prisma 初始化后，定义您的数据模型并运行迁移以创建 PostgreSQL 数据库。

1. 使用以下配置更新 prisma/schema.prisma 文件
   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"
     output   = "./generated"
   }
   
   datasource db {
     provider = "postgresql"
   }
   
   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
   }
2. 创建初始迁移和数据库表

   npx prisma migrate dev --name init
3. 命令成功后，启动 Nuxt 开发服务器

   npm run dev
4. 当服务器在 https://:3000 运行时，暂时停止它——我们将先更新一些文件再继续。

4. 更新应用程序代码

配置好 Prisma 后，下一步是更新您的应用程序代码以从数据库中获取和显示数据。

1. 在项目的根目录中，创建一个名为 lib 的文件夹，并添加一个 prisma.ts 文件以共享通过 PostgreSQL 适配器连接的单个 Prisma Client 实例

   lib/prisma.ts

   import { PrismaPg } from '@prisma/adapter-pg'
   import { PrismaClient } from '../prisma/generated/client'
   
   const prismaClientSingleton = () => {
     const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL! })
     return new PrismaClient({ adapter })
   }
   
   type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>
   
   const globalForPrisma = globalThis as unknown as {
     prisma: PrismaClientSingleton | undefined
   }
   
   export const prisma = globalForPrisma.prisma ?? prismaClientSingleton()
   
   if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

2. 创建一个名为 components 的文件夹（如果尚不存在），并在其中添加 User.server.vue。此服务器组件从数据库中获取并显示第一个用户的名称

   components/User.server.vue

   <script setup>
      import prisma from '~/lib/prisma'
      const user = await prisma.user.findFirst()
   </script>
   
   <template>
     <p>{{ user?.name ?? "No user has been added yet." }}</p>
   </template>

3. 修改根目录中的 app.vue 文件，以使用 Nuxt Islands 包含新的服务器组件

   app.vue

   <template>
     <div>
       <NuxtIsland name="User"></NuxtIsland>
     </div>
   </template>

4. 再次运行以下命令启动开发服务器

   npm run dev

5. 通过在浏览器中打开 https://:3000 验证应用程序代码是否正常工作。
   由于数据库中尚无用户，应用程序将显示

   No user has been added yet.

   当用户添加到您的数据库时，此消息将动态更新。

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

5. 填充数据库（可选）

如果您需要示例数据，请创建一个 prisma/seed.ts 文件。以下脚本使用 PostgreSQL 适配器

prisma/seed.ts

import 'dotenv/config'
import { PrismaClient } from './generated/client'
import { PrismaPg } from '@prisma/adapter-pg'

const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL! })
const prisma = new PrismaClient({ adapter })

const userData = [
  {
    name: 'Alice',
    email: 'alice@prisma.io',
    posts: {
      create: [
        {
          title: 'Join the Prisma Discord',
          content: 'https://pris.ly/discord',
          published: true,
        },
      ],
    },
  },
  {
    name: 'Nilu',
    email: 'nilu@prisma.io',
    posts: {
      create: [
        {
          title: 'Follow Prisma on Twitter',
          content: 'https://www.twitter.com/prisma',
          published: true,
        },
      ],
    },
  },
  {
    name: 'Mahmoud',
    email: 'mahmoud@prisma.io',
    posts: {
      create: [
        {
          title: 'Ask a question about Prisma on GitHub',
          content: 'https://www.github.com/prisma/prisma/discussions',
          published: true,
        },
        {
          title: 'Prisma on YouTube',
          content: 'https://pris.ly/youtube',
        },
      ],
    },
  },
]

async function main() {
  console.log(`Start seeding ...`)
  for (const u of userData) {
    const user = await prisma.user.create({
      data: u,
    })
    console.log(`Created user with id: ${user.id}`)
  }
  console.log(`Seeding finished.`)
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

每当您需要演示数据时，运行填充命令

npx prisma db seed

6. 创建 Prisma Postgres 实例

要存储您的应用程序数据，您将使用 Prisma 数据平台创建 Prisma Postgres 数据库实例。

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

1. 登录到并打开控制台。
2. 在您选择的工作区中，点击 New project 按钮。
3. 在 Name 字段中输入您的项目名称，例如 hello-ppg。
4. 在 Prisma Postgres 部分，点击 Get started 按钮。
5. 在 Region 下拉菜单中，选择离您当前位置最近的区域，例如 US East (N. Virginia)。
6. 点击 Create project 按钮。

此时，您将被重定向到“数据库”页面，您需要等待几秒钟，直到您的数据库状态从 PROVISIONING 更改为 CONNECTED。

一旦出现绿色的 CONNECTED 标签，您的数据库就可以使用了！

然后，在“设置数据库访问”部分找到您的数据库凭据，复制 DATABASE_URL 环境变量。

DATABASE_URL=<your-database-url>

在接下来的步骤中将需要 DATABASE_URL 环境变量。

7. 在 Nuxt 应用程序中设置 Prisma Postgres

现在 Prisma Postgres 实例已准备就绪，更新您的 Nuxt 应用程序以使用此数据库

1. 通过将现有 DATABASE_URL 值替换为您之前复制的值来更新 .env 文件。它将类似于以下内容

   .env

   DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"

2. 手动运行迁移以将您的模式同步到 Prisma Postgres

   npx prisma migrate dev --name init

3. （可选）使用示例数据填充数据库

   npx prisma db seed

4. 再次启动开发服务器

   npm run dev

5. 通过打开 https://:3000 验证应用程序中的数据。如果您填充了数据库，您应该会看到第一个用户的名称。

恭喜，您的 Nuxt 应用程序现在已与 Prisma Postgres 完全集成！

8. 部署到 Vercel

通过以下步骤将集成 Prisma Postgres 的 Nuxt 应用程序部署到 Vercel

1. 确保您的项目已进行版本控制并推送到 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 用户名和存储库名称。

2. 登录 Vercel 并导航到您的仪表板。
3. 创建一个新项目。遵循 Vercel 的导入现有项目指南，但在步骤 3处停止，在该处您将在点击“部署”之前配置环境变量。
4. 配置 DATABASE_URL 环境变量
   1. 展开“环境变量”部分。
   2. 添加 DATABASE_URL 环境变量
      • 键：DATABASE_URL
      • 值：粘贴您的 Prisma Postgres 连接 URL，例如从您的 Nuxt 项目的 .env 文件中复制。
      警告

      在未设置 DATABASE_URL 变量的情况下请勿部署。如果应用程序无法连接到数据库，您的部署将失败。

5. 点击“部署”按钮。Vercel 将构建您的项目并将其部署到实时 URL。
6. 打开 Vercel 提供的实时 URL 并验证您的应用程序是否正常工作
   • 如果您在 Prisma Studio 中添加了用户，他们的姓名应该会出现在实时网站上。
   • 如果没有用户，应用程序将显示

     No user has been added yet.
7. 要添加或管理数据
   1. 通过 Prisma 数据平台 或本地实例打开 Prisma Studio。
   2. 在数据库中添加或更新用户数据。
   3. 刷新您的实时网站以确认更改。

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

注意事项

本指南帮助您在 Nuxt 应用程序中开始使用 Prisma Postgres。对于更高级的功能或边缘部署，请探索 Prisma 的更广泛指南，并根据您的项目需求定制设置。

与 Prisma 保持联系

通过以下方式与我们保持联系，继续你的 Prisma 之旅： 我们的活跃社区。保持信息灵通，参与其中，并与其他开发人员协作。

• 在 X 上关注我们 获取公告、直播活动和实用技巧。
• 加入我们的 Discord 提问、与社区交流，并通过对话获得积极支持。
• 在 YouTube 上订阅 获取教程、演示和直播。
• 在 GitHub 上参与 加星收藏存储库、报告问题或为问题做出贡献。

我们真诚地感谢你的参与，并期待你成为我们社区的一部分！