vue3+typescript+pnpm详细介绍使用

为什么用 pnpm 不用 npm/yarn

pnpm 的核心优势两个 —— 快、省磁盘。原理:

• 硬链接 + 内容寻址 —— 全局只存一份每个版本的包,项目里的 node_modules 实际是硬链接指向那份。装第二个项目时,相同的依赖直接复用,速度极快。
• 严格的依赖隔离 —— 不像 npm 把所有依赖平铺到 node_modules 根目录,pnpm 严格只暴露 package.json 里声明过的依赖。这能防止"幽灵依赖"(代码里 require 了一个没在 package.json 写的包,但 npm 安装时它被某个子依赖带进来了,所以能跑 —— 然后某天升级断了)。

安装 pnpm

用 npm 装(最常见,假设你电脑已经有 Node):

npm i pnpm -g

更快的方式 —— 用官方安装脚本(不依赖 Node):

# macOS / Linux
curl -fsSL https://get.pnpm.io/install.sh | sh -

# Windows PowerShell
iwr https://get.pnpm.io/install.ps1 -useb | iex

验证装好:

pnpm -v
# 输出当前版本号,比如 9.15.0

换镜像源加速

跟 npm 一样,默认源是国外的 registry.npmjs.org,国内访问慢。换淘宝镜像:

pnpm config set registry https://registry.npmmirror.com

验证:

pnpm config get registry
# 应输出 https://registry.npmmirror.com/

项目里也可以单独设置(项目根目录 .npmrc 文件),团队人 clone 后自动用:

# .npmrc
registry=https://registry.npmmirror.com
shamefully-hoist=true

shamefully-hoist=true 是兼容选项 —— 把所有依赖也提升到 node_modules 根目录,让那些行为像 npm 的旧工具能正常工作。新项目不需要,老项目偶尔需要开。

常用命令对照

创建 Vue 3 项目

官方推荐用 create-vue 脚手架:github.com/vuejs/create-vue

三种等效命令(看你哪个包管理器):

pnpm create vue
# 或
npm init vue@latest
# 或
yarn create vue

会问你一系列问题,选择题路径:

✔ Project name: … patients-h5
✔ Add TypeScript? … No / `Yes`
✔ Add JSX Support? … `No` / Yes
✔ Add Vue Router for Single Page Application development? … No / `Yes`
✔ Add Pinia for state management? … No / `Yes`
✔ Add Vitest for Unit Testing? … `No` / Yes
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
✔ Add ESLint for code quality? … No / `Yes`
✔ Add Prettier for code formatting? … No / `Yes`

每个项的建议:

• TypeScript —— 选 Yes,现代项目几乎必备
• JSX Support —— 一般 No,除非你有 React 习惯或写一些动态组件
• Vue Router —— SPA 选 Yes
• Pinia —— Yes(替代 Vuex)
• Vitest —— 中小项目 No 也行,需要测试时再加
• Cypress / Playwright —— 一般 No,有真正 E2E 需求再装
• ESLint / Prettier —— 双 Yes,团队协作必要

启动项目

cd patient-h5
pnpm install
pnpm dev

启动后浏览器打开 http://localhost:5173(Vite 默认端口)。Vite 启动是冷启 0.5-1 秒、热更新毫秒级,跟 webpack 的体验是两个世界。

pnpm 一些高级用法

monorepo 工作区:

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'

这样根目录 pnpm install 一次,安装所有子项目依赖。跨项目互相引用直接 workspace:* 语义:

{
    "dependencies": {
        "@my-org/utils": "workspace:*"
    }
}

清理 store(全局缓存的包):

pnpm store prune     # 清理 store 里不再被任何项目引用的包

查看依赖图:

pnpm why react       # 看为什么会装 react、被谁依赖
pnpm list -r         # 递归看所有项目的依赖

小结

pnpm 学习成本极低 —— 90% 的命令跟 npm 一对一对应,把 npm 换成 pnpm 就行。换之后磁盘占用、安装速度都好不少。新项目我现在默认 pnpm,老项目能切就切。

—— 别看了 · 2026