之前写了《「手把手教学」拆解 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{}
当前已实现功能
-
数据库连接配置
-
Prisma 服务模块化
-
基础用户模型定义
下一步将演示:
-
数据库迁移操作
-
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 }