构建工具开发工具CLI【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址https://gitcode.com/gh_mirrors/tu/turbo点击查看免费下载这篇技术指南围绕 Turborepo 官方示例仓库中的with-vue-nuxt模板展开完整讲解如何用 Turborepo 编排一个同时包含 Nuxt 应用、Vite Vue 3 应用以及共享 Vue 组件库的 pnpm monorepo。读完本文你将掌握该模板的目录结构、turbo.json任务编排语义、跨应用共享ui包的方式以及构建、开发与远程缓存的实际用法可直接照搬到自己的 Vue 技术栈 monorepo 项目中。示例定位社区维护的 Vue/Nuxt Monorepo 模板with-vue-nuxt是 Turborepo 仓库中的一个示例工程其元信息见 examples/with-vue-nuxt/meta.json将其定位为 Monorepo with Vue and Nuxt, sharing a UI Library并由社区维护maintainedByCoreTeam: false。这意味着它演示的是一种真实、可复制的组织方式而不是演示性的玩具工程两个独立应用一个基于 Vite 的 Vue 3 单页应用web与一个基于 Nuxt 的服务端渲染应用docs一个共享 UI 库ui包同时被两个应用以workspace:*协议依赖完整的工程化配套共享 TypeScript 配置、共享 ESLint 扁平配置、pnpm workspace 与 Turborepo 任务编排。整仓采用 pnpm 作为包管理器packageManager: pnpm11.24.0见 examples/with-vue-nuxt/package.jsonworkspace 声明在 examples/with-vue-nuxt/pnpm-workspace.yamlpackages: - apps/* - packages/* allowBuilds: esbuild: true unrs-resolver: true即apps与packages目录下的所有子目录都是独立的 workspace 包这是 Turbo 生态中最标准的 monorepo 布局约定。快速启动一条命令生成完整工程模板的官方使用方式是借助create-turbo脚手架从示例直接生成项目npx create-turbolatest -e with-vue-nuxt执行后脚手架会把整个示例两个应用、三个包、根级turbo.json与 workspace 配置复制到当前目录并安装依赖。安装完成后即可继续下文的任务操作。仓库结构Apps 与 Packages 全景按 README 与源码该模板的顶层结构如下目录/包说明apps/docsNuxt 应用当前使用 Nuxt 4默认运行在 3001 端口apps/webVue 3 Vite 应用默认运行在 3000 端口packages/ui被web与docs共享的 Vue 组件库packages/eslint-config-custom面向 Vue 包的共享扁平 ESLint 配置packages/tsconfig共享的tsconfig.json含base.json、vue.json、nuxt.json各包/应用均为 100% TypeScript。工程化工具链由 TypeScript 负责静态类型检查、ESLint 负责代码规范、Prettier 负责格式化——根级package.json中的format脚本即为 Prettier 全局格式化scripts: { build: turbo run build, dev: turbo run dev, lint: turbo run lint, format: prettier --write \**/*.{ts,tsx,md}\ }任务编排核心turbo.json 逐项拆解模板的 Turborepo 配置集中在 examples/with-vue-nuxt/turbo.json是理解整个示例行为的关键{ $schema: https://turborepo.com/schema.json, tasks: { build: { dependsOn: [^build], inputs: [$TURBO_DEFAULT$, .env*], outputs: [.nuxt/**, .output/**, dist/**] }, lint: {}, dev: { cache: false, persistent: true } } }各配置项的实际语义如下build.dependsOn: [^build]声明build任务依赖其拓扑依赖的build任务^前缀表示“上游依赖”。这保证ui包先于web、docs构建完成Turborepo 会据此自动计算并行的构建调度顺序build.inputs: [$TURBO_DEFAULT$, .env*]定义参与缓存哈希的文件集合。$TURBO_DEFAULT$是内置占位符默认覆盖package.json、turbo.json等全局关键文件.env*将环境变量文件纳入哈希任何.env变化都会使缓存失效避免“改了环境变量却命中旧缓存”的经典问题build.outputs: [.nuxt/**, .output/**, dist/**]声明构建产物目录。.nuxt与.output对应 Nuxt 构建中间产物与最终产物dist对应 Vite 构建产物。Turborepo 只缓存这些目录命中缓存时直接恢复产物并跳过实际构建lint: {}空配置即采用默认行为——每个包的lint脚本独立执行输入变化才重跑正常参与缓存dev: { cache: false, persistent: true }开发服务器既不缓存也不退出。persistent: true告诉 Turborepo 该任务会长时间占用进程从而避免调度器在它“未结束”时误判失败或重复拉起同时turbo run dev会把web3000与docs3001两个开发服务器并行拉起。应用层细节Nuxt 与 Vite 的差异化脚本设计Nuxt 应用apps/docs其脚本定义在 examples/with-vue-nuxt/apps/docs/package.jsonscripts: { build: nuxt build, dev: nuxt dev --port 3001, generate: nuxt generate, preview: nuxt preview, postinstall: nuxt prepare, lint: eslint . }要点dev显式固定--port 3001与web的 3000 错开端口保证turbo run dev并行启动时互不冲突postinstall中的nuxt prepare会在依赖安装后自动生成 Nuxt 的类型声明与虚拟文件是 Nuxt 3/4 工程在 monorepo 中的常见实践。Nuxt 配置 examples/with-vue-nuxt/apps/docs/nuxt.config.ts 启用了nuxt/eslint模块与 devtoolsexport default defineNuxtConfig({ modules: [nuxt/eslint], devtools: { enabled: true }, });应用入口 examples/with-vue-nuxt/apps/docs/app.vue 直接演示了跨包引用的写法——从ui导入Page组件并注入当前包名script setup langts import { Page } from ui; import { name } from ./package.json; useHead({ title: Create Turborepo (vue-nuxt:docs), meta: [{ name: description, content: Generated by create turbo }], }); /script template Page :app-namename / /template注意这里的import { Page } from ui依赖名ui直接指向 workspace 包无需相对路径穿越这正是 monorepo 包引用模式的直观体现。Vue 3 应用apps/web脚本定义在 examples/with-vue-nuxt/apps/web/package.jsonscripts: { dev: vite --port 3000, build: run-p check-types \build-only {}\ --, preview: vite preview, build-only: vite build, check-types: vue-tsc --noEmit -p tsconfig.app.json --composite false, lint: eslint . }构建链路值得注意build使用npm-run-all2的run-p并行执行check-typesvue-tsc类型检查--composite false用于规避 project references 下的增量编译约束与build-onlyvite build把“类型检查 打包”组合成一次 Turbo 可缓存的原子任务。Vite 配置 examples/with-vue-nuxt/apps/web/vite.config.ts 注册了vitejs/plugin-vue并配置了指向src的路径别名import { fileURLToPath, URL } from node:url; import { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)), }, }, });共享 UI 库packages/uiui包的公共入口是 examples/with-vue-nuxt/packages/ui/index.ts以命名导出暴露三个组件import Card from ./src/card.vue; import Gradient from ./src/gradient.vue; import Page from ./src/page.vue; export { Card, Gradient, Page };其中 page.vue 是一个包含品牌展示区、链接卡片网格与响应式样式含prefers-reduced-motion无障碍适配与移动端断点的完整页面组件通过defineProps{ appName: string }()接收应用名。web与docs两个应用都通过ui: workspace:*依赖它做到“一套组件、两端复用”。这正是 Turborepobuild.dependsOn: [^build]发挥作用的最小闭环ui作为上游先构建两个应用再消费其产物。日常开发工作流在仓库根目录执行以下命令均基于根级 examples/with-vue-nuxt/package.json 的脚本开发模式并行启动两个 dev serverpnpm dev内部执行turbo run dev依据turbo.json中dev的persistent: true与cache: false语义并行常驻运行web在 http://localhost:3000docs在 http://localhost:3001。构建全部应用与包pnpm build内部执行turbo run buildTurborepo 会按dependsOn: [^build]先构建ui、tsconfig等依赖再并行构建两个应用并将产物按outputs声明缓存.nuxt/**、.output/**、dist/**。二次构建若输入未变化将直接命中本地缓存秒级完成。代码检查与格式化pnpm lint # 等价于 turbo run lint逐个包执行 eslint pnpm format # prettier --write **/*.{ts,tsx,md} 全仓格式化远程缓存让构建产物跨机器共享模板默认使用 Turborepo 的本地缓存若需在团队成员与 CI/CD 之间共享缓存产物可按 README 中的指引启用 Remote Caching以 Vercel Remote Cache 为例登录并认证 Turborepo CLI 与 Vercel 账号pnpm turbo login在仓库根目录将当前仓库链接到远程缓存pnpm turbo link启用后任意机器上以相同输入执行turbo run build都可直接拉取远程缓存的构建产物跳过重复计算——在 CI 上体现为构建时间的大幅缩短。不配置远程缓存时Turborepo 仍会在本地node_modules/.cache/turbo或系统缓存目录正常缓存功能不受影响。进阶基于模板扩展自己的 Vue monorepo从源码结构可以推断出几条清晰的扩展路径新增一个 Vue 应用在apps/下复制web的结构保持pnpm-workspace.yaml的apps/*通配即可被自动识别无需改动根级turbo.json——build、dev、lint任务会自动覆盖新包新增一个共享包在packages/下仿照ui建立新包并在消费方package.json中声明your-pkg: workspace:*细化任务例如为test、typecheck增加任务配置或按需调整inputs如把src/**加入哈希集合以提升缓存命中精度。需要说明的是本模板属于社区维护示例其依赖版本Nuxt 4、Vite 8、pnpm 11 等以仓库当前实际内容为准若迁移到自己的工程请按需对齐版本。赞分享构建工具开发工具CLI【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址https://gitcode.com/gh_mirrors/tu/turbo点击查看免费下载相关推荐Turborepo with-vite 示例详解用 Vite 构建共享 UI 库的多应用 TypeScript 单仓Turborepo with vite 示例详解用 Vite 构建共享 UI 库的多应用 TypeScript 单仓 本篇指南围绕 Turborepo 官方的构建工具开发工具CLITurborepo 实战:在 Monorepo 中共享 Tailwind CSS 主题与 React 组件库(with-tailwind 示例解析)Turborepo 实战:在 Monorepo 中共享 Tailwind CSS 主题与 React 组件库 with tailwind 示例解析 本篇以 Tu构建工具开发工具CLIshadcn/ui Astro Monorepo 模板实战用 pnpm Workspaces Turborepo 搭建共享 React 组件库shadcn/ui Astro Monorepo 模板实战用 pnpm Workspaces Turborepo 搭建共享 React 组件库 本篇基于仓前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Turborepo 实战：用 with-vue-nuxt 示例构建 Vue 3 + Nuxt 共享 UI 库的 Monorepo
构建工具开发工具CLI【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址https://gitcode.com/gh_mirrors/tu/turbo点击查看免费下载这篇技术指南围绕 Turborepo 官方示例仓库中的with-vue-nuxt模板展开完整讲解如何用 Turborepo 编排一个同时包含 Nuxt 应用、Vite Vue 3 应用以及共享 Vue 组件库的 pnpm monorepo。读完本文你将掌握该模板的目录结构、turbo.json任务编排语义、跨应用共享ui包的方式以及构建、开发与远程缓存的实际用法可直接照搬到自己的 Vue 技术栈 monorepo 项目中。示例定位社区维护的 Vue/Nuxt Monorepo 模板with-vue-nuxt是 Turborepo 仓库中的一个示例工程其元信息见 examples/with-vue-nuxt/meta.json将其定位为 Monorepo with Vue and Nuxt, sharing a UI Library并由社区维护maintainedByCoreTeam: false。这意味着它演示的是一种真实、可复制的组织方式而不是演示性的玩具工程两个独立应用一个基于 Vite 的 Vue 3 单页应用web与一个基于 Nuxt 的服务端渲染应用docs一个共享 UI 库ui包同时被两个应用以workspace:*协议依赖完整的工程化配套共享 TypeScript 配置、共享 ESLint 扁平配置、pnpm workspace 与 Turborepo 任务编排。整仓采用 pnpm 作为包管理器packageManager: pnpm11.24.0见 examples/with-vue-nuxt/package.jsonworkspace 声明在 examples/with-vue-nuxt/pnpm-workspace.yamlpackages: - apps/* - packages/* allowBuilds: esbuild: true unrs-resolver: true即apps与packages目录下的所有子目录都是独立的 workspace 包这是 Turbo 生态中最标准的 monorepo 布局约定。快速启动一条命令生成完整工程模板的官方使用方式是借助create-turbo脚手架从示例直接生成项目npx create-turbolatest -e with-vue-nuxt执行后脚手架会把整个示例两个应用、三个包、根级turbo.json与 workspace 配置复制到当前目录并安装依赖。安装完成后即可继续下文的任务操作。仓库结构Apps 与 Packages 全景按 README 与源码该模板的顶层结构如下目录/包说明apps/docsNuxt 应用当前使用 Nuxt 4默认运行在 3001 端口apps/webVue 3 Vite 应用默认运行在 3000 端口packages/ui被web与docs共享的 Vue 组件库packages/eslint-config-custom面向 Vue 包的共享扁平 ESLint 配置packages/tsconfig共享的tsconfig.json含base.json、vue.json、nuxt.json各包/应用均为 100% TypeScript。工程化工具链由 TypeScript 负责静态类型检查、ESLint 负责代码规范、Prettier 负责格式化——根级package.json中的format脚本即为 Prettier 全局格式化scripts: { build: turbo run build, dev: turbo run dev, lint: turbo run lint, format: prettier --write \**/*.{ts,tsx,md}\ }任务编排核心turbo.json 逐项拆解模板的 Turborepo 配置集中在 examples/with-vue-nuxt/turbo.json是理解整个示例行为的关键{ $schema: https://turborepo.com/schema.json, tasks: { build: { dependsOn: [^build], inputs: [$TURBO_DEFAULT$, .env*], outputs: [.nuxt/**, .output/**, dist/**] }, lint: {}, dev: { cache: false, persistent: true } } }各配置项的实际语义如下build.dependsOn: [^build]声明build任务依赖其拓扑依赖的build任务^前缀表示“上游依赖”。这保证ui包先于web、docs构建完成Turborepo 会据此自动计算并行的构建调度顺序build.inputs: [$TURBO_DEFAULT$, .env*]定义参与缓存哈希的文件集合。$TURBO_DEFAULT$是内置占位符默认覆盖package.json、turbo.json等全局关键文件.env*将环境变量文件纳入哈希任何.env变化都会使缓存失效避免“改了环境变量却命中旧缓存”的经典问题build.outputs: [.nuxt/**, .output/**, dist/**]声明构建产物目录。.nuxt与.output对应 Nuxt 构建中间产物与最终产物dist对应 Vite 构建产物。Turborepo 只缓存这些目录命中缓存时直接恢复产物并跳过实际构建lint: {}空配置即采用默认行为——每个包的lint脚本独立执行输入变化才重跑正常参与缓存dev: { cache: false, persistent: true }开发服务器既不缓存也不退出。persistent: true告诉 Turborepo 该任务会长时间占用进程从而避免调度器在它“未结束”时误判失败或重复拉起同时turbo run dev会把web3000与docs3001两个开发服务器并行拉起。应用层细节Nuxt 与 Vite 的差异化脚本设计Nuxt 应用apps/docs其脚本定义在 examples/with-vue-nuxt/apps/docs/package.jsonscripts: { build: nuxt build, dev: nuxt dev --port 3001, generate: nuxt generate, preview: nuxt preview, postinstall: nuxt prepare, lint: eslint . }要点dev显式固定--port 3001与web的 3000 错开端口保证turbo run dev并行启动时互不冲突postinstall中的nuxt prepare会在依赖安装后自动生成 Nuxt 的类型声明与虚拟文件是 Nuxt 3/4 工程在 monorepo 中的常见实践。Nuxt 配置 examples/with-vue-nuxt/apps/docs/nuxt.config.ts 启用了nuxt/eslint模块与 devtoolsexport default defineNuxtConfig({ modules: [nuxt/eslint], devtools: { enabled: true }, });应用入口 examples/with-vue-nuxt/apps/docs/app.vue 直接演示了跨包引用的写法——从ui导入Page组件并注入当前包名script setup langts import { Page } from ui; import { name } from ./package.json; useHead({ title: Create Turborepo (vue-nuxt:docs), meta: [{ name: description, content: Generated by create turbo }], }); /script template Page :app-namename / /template注意这里的import { Page } from ui依赖名ui直接指向 workspace 包无需相对路径穿越这正是 monorepo 包引用模式的直观体现。Vue 3 应用apps/web脚本定义在 examples/with-vue-nuxt/apps/web/package.jsonscripts: { dev: vite --port 3000, build: run-p check-types \build-only {}\ --, preview: vite preview, build-only: vite build, check-types: vue-tsc --noEmit -p tsconfig.app.json --composite false, lint: eslint . }构建链路值得注意build使用npm-run-all2的run-p并行执行check-typesvue-tsc类型检查--composite false用于规避 project references 下的增量编译约束与build-onlyvite build把“类型检查 打包”组合成一次 Turbo 可缓存的原子任务。Vite 配置 examples/with-vue-nuxt/apps/web/vite.config.ts 注册了vitejs/plugin-vue并配置了指向src的路径别名import { fileURLToPath, URL } from node:url; import { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)), }, }, });共享 UI 库packages/uiui包的公共入口是 examples/with-vue-nuxt/packages/ui/index.ts以命名导出暴露三个组件import Card from ./src/card.vue; import Gradient from ./src/gradient.vue; import Page from ./src/page.vue; export { Card, Gradient, Page };其中 page.vue 是一个包含品牌展示区、链接卡片网格与响应式样式含prefers-reduced-motion无障碍适配与移动端断点的完整页面组件通过defineProps{ appName: string }()接收应用名。web与docs两个应用都通过ui: workspace:*依赖它做到“一套组件、两端复用”。这正是 Turborepobuild.dependsOn: [^build]发挥作用的最小闭环ui作为上游先构建两个应用再消费其产物。日常开发工作流在仓库根目录执行以下命令均基于根级 examples/with-vue-nuxt/package.json 的脚本开发模式并行启动两个 dev serverpnpm dev内部执行turbo run dev依据turbo.json中dev的persistent: true与cache: false语义并行常驻运行web在 http://localhost:3000docs在 http://localhost:3001。构建全部应用与包pnpm build内部执行turbo run buildTurborepo 会按dependsOn: [^build]先构建ui、tsconfig等依赖再并行构建两个应用并将产物按outputs声明缓存.nuxt/**、.output/**、dist/**。二次构建若输入未变化将直接命中本地缓存秒级完成。代码检查与格式化pnpm lint # 等价于 turbo run lint逐个包执行 eslint pnpm format # prettier --write **/*.{ts,tsx,md} 全仓格式化远程缓存让构建产物跨机器共享模板默认使用 Turborepo 的本地缓存若需在团队成员与 CI/CD 之间共享缓存产物可按 README 中的指引启用 Remote Caching以 Vercel Remote Cache 为例登录并认证 Turborepo CLI 与 Vercel 账号pnpm turbo login在仓库根目录将当前仓库链接到远程缓存pnpm turbo link启用后任意机器上以相同输入执行turbo run build都可直接拉取远程缓存的构建产物跳过重复计算——在 CI 上体现为构建时间的大幅缩短。不配置远程缓存时Turborepo 仍会在本地node_modules/.cache/turbo或系统缓存目录正常缓存功能不受影响。进阶基于模板扩展自己的 Vue monorepo从源码结构可以推断出几条清晰的扩展路径新增一个 Vue 应用在apps/下复制web的结构保持pnpm-workspace.yaml的apps/*通配即可被自动识别无需改动根级turbo.json——build、dev、lint任务会自动覆盖新包新增一个共享包在packages/下仿照ui建立新包并在消费方package.json中声明your-pkg: workspace:*细化任务例如为test、typecheck增加任务配置或按需调整inputs如把src/**加入哈希集合以提升缓存命中精度。需要说明的是本模板属于社区维护示例其依赖版本Nuxt 4、Vite 8、pnpm 11 等以仓库当前实际内容为准若迁移到自己的工程请按需对齐版本。赞分享构建工具开发工具CLI【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址https://gitcode.com/gh_mirrors/tu/turbo点击查看免费下载相关推荐Turborepo with-vite 示例详解用 Vite 构建共享 UI 库的多应用 TypeScript 单仓Turborepo with vite 示例详解用 Vite 构建共享 UI 库的多应用 TypeScript 单仓 本篇指南围绕 Turborepo 官方的构建工具开发工具CLITurborepo 实战:在 Monorepo 中共享 Tailwind CSS 主题与 React 组件库(with-tailwind 示例解析)Turborepo 实战:在 Monorepo 中共享 Tailwind CSS 主题与 React 组件库 with tailwind 示例解析 本篇以 Tu构建工具开发工具CLIshadcn/ui Astro Monorepo 模板实战用 pnpm Workspaces Turborepo 搭建共享 React 组件库shadcn/ui Astro Monorepo 模板实战用 pnpm Workspaces Turborepo 搭建共享 React 组件库 本篇基于仓前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
