3.pnpm+monorepo架构中创建 Vue3 子项目

【实战指南】在 pnpm+Monorepo 架构中创建 Vue3 子项目

在之前的文章中，我们已经完成了 pnpm+Monorepo 架构的基础配置。今天，我们将以web/main_project为例，手把手教你创建一个 Vue3 项目，并深度解析其中的关键细节。

前言：本项目为前文中.yaml中packages配置下的具体项目。

项目创建方式无所谓，通过vuecli或者vite甚至把已有项目复制粘贴都可以，但是后者需要处理多个问题，如：git版本控制、本地依赖、npm锁文件等等..

一、为什么选择 Vite 而非 Vue CLI？

在 Monorepo 架构下，构建速度和依赖管理效率尤为重要。相比 Vue CLI，Vite 具有以下优势：

• 冷启动速度提升 10 倍（基于 ESBuild 预构建）
• 按需编译模块，无需等待整个项目构建
• 与 pnpm 的 workspace 机制完美配合

一句话建议：除非你有复杂的 Webpack 定制需求，否则优先选择 Vite。

二、创建项目的三种姿势

你可以通过以下方式创建项目，但我更推荐第2种：

1. Vue CLI

   vue create main_project

2. Vite 官方工具（推荐）

   pnpm create vite main_project

3. 复制已有项目（需谨慎！）
   如果选择复制，务必清理以下 "遗留垃圾"（以下仅为举例）：
   • .git目录（避免版本控制冲突）
   • node_modules文件夹（会破坏 pnpm 的硬链接机制）
   • package-lock.json或yarn.lock（与 pnpm 锁文件冲突）

进入monorepo架构目录创建web目录

|-- your-monorepo
    |-- package.json
    |-- pnpm-lock.yaml
    |-- pnpm-workspace.yaml
    |-- web

进入web目录，通过vite创建vue项目：

依次选择自己想要使用的开发框架和语言支持不再多赘述。

创建完成后，修改main_project项目的package.json文件：

1. 修改name添加组织作用域
2. 修改依赖项

 

 cd回到根目录运行pnpm i 或 pnpm install安装依赖：

 查看main_project项目node_modules文件夹下查看是否安装成功：

 安装成功后，选择根目录package.json配置运行脚本

"main_project:dev": "pnpm -F main_project run dev"

 test可以删除掉，

运行pnpm run main_project:dev

 点击local后链接，或直接打开浏览器输入链接即可运行项目

项目地址：https://gitee.com/cheng_zhen_guo/blog_demo_monorepo/tree/master