cnpm​ 创建和管理 ​monorepo​ 的完整步骤（比 npm/yarn 更适合国内网络环境）

以下是使用 ​cnpm​ 创建和管理 ​monorepo​ 的完整步骤（比 npm/yarn 更适合国内网络环境）：

​1. 安装 cnpm​

npm install -g cnpm --registry=https://registry.npmmirror.com

​2. 初始化 monorepo 项目​

mkdir my-monorepo && cd my-monorepo
cnpm init -y

​3. 配置 monorepo 工作区​

​3.1 创建目录结构​

mkdir -p packages/{core,utils} apps/{web,desktop}

​3.2 配置工作区（替代 pnpm-workspace.yaml）​​

在根目录 package.json 中添加：

{
  "private": true,
  "workspaces": [
    "packages/*",
    "apps/*"
  ]
}

​4. 安装共享依赖​

​4.1 根目录安装全局工具​

cnpm install -D typescript eslint prettier --workspace-root

​4.2 为子包安装独立依赖​

# 为 core 包安装 lodash
cd packages/core
cnpm install lodash
cd ../../

# 为 web 应用安装 react
cd apps/web
cnpm install react react-dom

​5. 链接本地包​

​5.1 在子包中引用其他包​

修改 apps/web/package.json：

{
  "dependencies": {
    "@my/core": "file:../../packages/core"
  }
}

​5.2 重新链接依赖​

# 在根目录执行
cnpm install

​6. 添加脚本命令​

在根目录 package.json 中：

{
  "scripts": {
    "dev": "cnpm run dev -w apps/web",
    "build": "cnpm run build -w packages/core",
    "lint": "eslint ."
  }
}

​7. 启动项目​

# 启动 web 应用开发模式
cnpm run dev

​关键优势（vs npm/yarn）​​

​常见问题解决​

​1. 镜像失效​

# 重置镜像源
cnpm config set registry https://registry.npmmirror.com

​2. 依赖冲突​

# 删除重装
rm -rf node_modules
cnpm install

​3. 子包热更新​

在 apps/web/vite.config.ts 中：

export default {
  resolve: {
    alias: {
      "@my/core": path.resolve(__dirname, "../../packages/core/src")
    }
  }
}

​完整项目结构​

my-monorepo/
├── package.json
├── packages/
│   ├── core/       # 共享核心库
│   └── utils/      # 工具函数
└── apps/
    ├── web/        # 前端应用
    └── desktop/    # 桌面应用

通过 cnpm 的 ​镜像加速​ 和 ​workspace 原生支持，能显著提升国内开发者的 monorepo 体验。如需更高级功能（如版本管理），可搭配 lerna 使用。

在 ​monorepo​ 项目中使用 ​cnpm​ 安装 pinia、axios 和 vue-router 的完整指南（适合国内网络环境）：

​1. 安装到所有子项目（全局共享）​​

# 在 monorepo 根目录执行（所有子包共享依赖）
cnpm install pinia axios vue-router -W

• -W 参数表示安装到根目录的 node_modules（所有子包共享）

​2. 安装到特定子项目​

​场景1：前端应用（如 apps/web）​​

# 进入前端项目目录
cd apps/web

# 安装仅当前项目使用的依赖
cnpm install pinia axios vue-router

​场景2：多个子项目共享依赖​

1. 在根目录的 package.json 中声明：

{
  "dependencies": {
    "pinia": "^2.1.7",
    "axios": "^1.6.8",
    "vue-router": "^4.2.5"
  }
}

1. 执行安装：

cnpm install

​3. 配置镜像加速（国内必做）​​

在项目根目录创建 .npmrc 文件：

registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/

或使用环境变量：

export REGISTRY=https://registry.npmmirror.com

​4. 在代码中使用​

​在 Vue 项目中初始化​

// apps/web/src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import axios from 'axios'
import router from './router'

const app = createApp(App)
app.use(createPinia())
app.use(router)

// 全局挂载 axios
app.config.globalProperties.$axios = axios

​在子包中跨项目引用​

// packages/utils/src/request.js
import axios from 'axios'

export const fetchData = () => axios.get('/api/data')

​5. 版本管理技巧​

​锁定版本（避免冲突）​​

在根目录 package.json 中：

{
  "resolutions": {
    "axios": "1.6.8",
    "vue-router": "4.2.5"
  }
}

然后运行：

cnpm install

​更新特定包​

# 更新所有子项目的 axios
cnpm update axios -r

​6. 完整 monorepo 结构示例​

my-monorepo/
├── package.json         # 根依赖（pinia, axios, vue-router）
├── packages/
│   └── utils/           # 共享工具库
└── apps/
    └── web/             # 前端应用
        ├── src/
        │   ├── stores/  # pinia 状态管理
        │   └── router/  # vue-router 配置
        └── package.json # 可覆盖根依赖版本

​常见问题解决​

​1. 安装速度慢​

# 使用 cnpm 的缓存加速
cnpm install --prefer-offline

​2. 依赖冲突​

# 查看冲突
cnpm ls axios

# 强制重新安装
cnpm install axios@1.6.8 --force

​3. 热更新失效​

在 vite.config.js 中配置：

export default {
  server: {
    watch: {
      // 监控子包变化
      ignored: ['!**/packages/**']
    }
  }
}

​为什么用 cnpm？​​

按照以上步骤操作后，你的 monorepo 项目将拥有：

• ✅ 全项目共享的 pinia 状态管理
• ✅ 统一的 axios 请求库
• ✅ 跨子项目的 vue-router 路由管理
• ⚡ 飞快的国内下载速度