「手把手教学」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 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Bryan Ding

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值