「手把手教学」Monorepo项目搭建与管理——实战案例

之前写了《「手把手教学」拆解 Monorepo 搭建与管理全流程》，今天我们搭建一个实战案例。

---

一：Vue 组件库搭建

1.1 创建 Vue 组件库子包

mkdir -p packages/ui
cd packages/ui
pnpm init

关键配置 (packages/ui/package.json)：

{
  "name":"@demo/ui",
"version":"1.0.0",
"main":"dist/index.umd.cjs",
"module":"dist/index.js",
"types":"dist/index.d.ts",
"scripts":{
    "dev":"vite build --watch",
    "build":"vite build"
}
}

1.2 安装 Vue 相关依赖

# 在根目录执行
pnpm add vue @vitejs/plugin-vue -D --filter @demo/ui
pnpm add sass -D -w  # 公共开发依赖

1.3 创建组件示例

// packages/ui/src/Button/Button.vue
<script setup lang="ts">
defineProps<{ text: string }>()
</script>

<template>
  <button class="ui-button">{
  { text }}</button>
</template>

<style scoped lang="scss">
.ui-button { background: #f0f; }
</style>

// packages/ui/src/index.ts
export { default as UButton } from './Button/Button.vue'

1.4 配置 Vite 构建

// packages/ui/vite.config.ts
import{ defineConfig }from'vite'
import vue from'@vitejs/plugin-vue'

exportdefaultdefineConfig({
  plugins:[vue()],
  build:{
    lib:{
      entry:'src/index.ts',
      name:'DemoUI',
      fileName:(format)=>`index.${format}.js`
    },
    rollupOptions:{
      external:['vue'],
      output:{ globals:{ vue:'Vue'}}
    }
}
})

---

二：创建 NestJS 后端服务

2.1 创建 NestJS 子包

mkdir -p apps/server
cd apps/server
pnpm init

2.2 安装 NestJS 核心依赖

# 在根目录执行（避免全局安装 CLI）
pnpm add @nestjs/core @nestjs/common rxjs reflect-metadata --filter @demo/server
pnpm add @nestjs/cli @nestjs/platform-express typescript @types/node -D --filter @demo/server

2.3 生成 NestJS 项目骨架

# 在 apps/server 目录操作
npx @nestjs/cli new . --package-manager=pnpm --skip-install

# 手动修复依赖引用（因 Monorepo 特殊结构）
修改 apps/server/package.json：
"dependencies": {
  "@nestjs/common": "workspace:*",
  "@nestjs/core": "workspace:*"
}

2.4 基础服务代码示例

// apps/server/src/app.service.ts
import{ Injectable }from'@nestjs/common';

@Injectable()
exportclassAppService{
getData(){
    return{ message:'Hello from NestJS!'};
}
}

2.5 配置跨域支持（为前端联调准备）

// apps/server/src/main.ts
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({ origin: 'http://localhost:5173' });  // Vue 应用默认端口
  await app.listen(3000);
}

---

三：Prisma + MySQL 集成

3.1 为 NestJS 服务安装 Prisma

# 在根目录操作
pnpm add prisma @prisma/client --filter @demo/server
pnpm add -D prisma --filter @demo/server

3.2 初始化 Prisma

# 进入 server 目录初始化
cd apps/server
pnpm exec prisma init

# 生成的文件结构：
apps/server/
├── prisma/
│   ├── schema.prisma    # 数据模型定义
│   └── migrations/      # 迁移记录
└── .env                 # 数据库配置

3.3 配置 MySQL 连接

# .env 文件
DATABASE_URL="mysql://root:password@localhost:3306/monorepo_db"

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
  output   = "../node_modules/.prisma/client"  // 修复 Monorepo 路径问题
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
}

3.4 创建 Prisma 服务模块

// apps/server/src/prisma/prisma.service.ts
import{ Injectable, OnModuleInit }from'@nestjs/common'
import{ PrismaClient }from'@prisma/client'

@Injectable()
exportclassPrismaServiceextendsPrismaClientimplementsOnModuleInit{
asynconModuleInit(){
    awaitthis.$connect()
}
}

// apps/server/src/prisma/prisma.module.ts
import{ Global, Module }from'@nestjs/common'
import{ PrismaService }from'./prisma.service'

@Global()
@Module({
  providers:[PrismaService],
  exports:[PrismaService]
})
exportclassPrismaModule{}

---

当前已实现功能

1. 数据库连接配置

2. Prisma 服务模块化

3. 基础用户模型定义

下一步将演示：

• 数据库迁移操作

• CRUD 接口开发

• 前端联调演示

---

四：数据库迁移与 CRUD 开发

4.1 执行数据库迁移

# 在 server 目录下执行
pnpm exec prisma migrate dev --name init

# 验证生成的 SQL
cat prisma/migrations/*/migration.sql

4.2 创建用户模块

nest generate module users
nest generate controller users
nest generate service users

4.3 实现 CRUD 接口

// apps/server/src/users/users.service.ts
import{ Injectable }from'@nestjs/common'
import{ PrismaService }from'../prisma/prisma.service'

@Injectable()
exportclassUsersService{
constructor(private prisma: PrismaService){}

asynccreate(userData:{ name:string; email:string}){
    returnthis.prisma.user.create({ data: userData })
}

asyncfindAll(){
    returnthis.prisma.user.findMany()
}

asyncfindOne(id:number){
    returnthis.prisma.user.findUnique({ where:{ id }})
}
}

// apps/server/src/users/users.controller.ts
import{ Controller, Post, Body, Get, Param }from'@nestjs/common'
import{ UsersService }