pnpm 和 npm 安装 TypeScript 的区别（附：Vue 项目常用工具安装命令总结、命令缩写、精确版本）

本文对比了pnpm和npm安装TypeScript的两种方式：

pnpm add typescript -D（项目本地开发依赖）

npm install -g typescript（全局安装）

前者将TypeScript安装到项目的node_modules中，仅用于开发构建；

后者安装到系统全局，作为命令行工具跨项目使用。

文章详细解释了-D（开发依赖）、--save（生产依赖）和-g（全局安装）等选项的区别

推荐TypeScript作为开发依赖安装

总结了Vue项目常用工具的安装命令

最佳实践建议：

项目专用工具用本地安装（加-D）

全局工具用-g安装

尽量避免全局安装项目依赖，会导致版本冲突
bash 复制代码
npx tsc --version  # 使用项目本地的 typescript
注意大小写敏感、命令缩写、生产环境部署使用精确版本

pnpm add typescript -D vs npm install -g typescript

特性	`pnpm add typescript -D`	`npm install -g typescript`
包管理器	pnpm	npm
安装位置	项目本地的 `node_modules`（作为开发依赖）	系统全局（global）
作用范围	仅当前项目可用	整个系统任何项目都可使用
依赖类型	开发依赖（devDependencies）	全局工具
典型用途	项目构建工具，只在开发时使用	命令行工具，需要跨项目使用

使用场景示例：

bash

bash 复制代码

# 如果你想在项目中使用 TypeScript 编译代码
cd my-project
pnpm add typescript -D  # 安装到项目依赖

# 如果你想在任何地方都能用 tsc 命令
npm install -g typescript  # 全局安装

实际项目中的典型用法

json

javascript 复制代码

// package.json 示例
{
  "name": "my-project",
  "dependencies": {
    "react": "^18.0.0",         // 运行时需要的依赖
    "lodash": "^4.17.21"        // 运行时需要的依赖
  },
  "devDependencies": {
    "typescript": "^5.0.0",     // 开发时需要的依赖 (-D)
    "jest": "^29.0.0",          // 开发时需要的依赖 (-D)
    "webpack": "^5.0.0"         // 开发时需要的依赖 (-D)
  }
}

安装命令总结

bash

bash 复制代码

# pnpm
pnpm add <package>           # 安装到 dependencies（默认）
pnpm add <package> -D        # 安装到 devDependencies
pnpm add <package> -g        # 全局安装

# npm
npm install <package>        # 安装到 dependencies（默认）
npm install <package> --save-dev  # 安装到 devDependencies
npm install <package> -g     # 全局安装

# yarn
yarn add <package>           # 安装到 dependencies
yarn add <package> -D        # 安装到 devDependencies
yarn global add <package>    # 全局安装

最佳实践建议

TypeScript 应该安装为开发依赖，因为生产环境不需要编译

bash
bash 复制代码
```
pnpm add typescript -D
# 或
npm install typescript --save-dev
```
只在以下情况全局安装：
- 命令行工具（如 create-react-app、vue-cli）
- 需要跨项目使用的工具
尽量避免全局安装项目依赖，会导致版本冲突问题
使用 npx 运行本地安装的工具：

bash
bash 复制代码
```
npx tsc --version  # 使用项目本地的 typescript
```

简单记忆：项目专用的用本地安装（加 -D），到处都要用的用全局安装（加 -g）。

表格总结

命令/选项	含义	安装位置	依赖类型	使用场景	等价命令
`pnpm add typescript -D`	使用pnpm包管理器安装TypeScript作为开发依赖	项目本地 `node_modules`	devDependencies	项目开发构建工具，只在开发时使用	`npm install typescript --save-dev`
`npm install -g typescript`	使用npm全局安装TypeScript	系统全局目录	全局工具	命令行工具，需要跨项目使用	`pnpm add -g typescript`
`-D` / `--save-dev`	开发依赖选项	项目本地	devDependencies	测试框架、构建工具、类型检查等只在开发时需要的包	`--save-dev`
`--save`	生产依赖选项（现代包管理器默认）	项目本地	dependencies	项目运行时必需的核心依赖	默认行为，可不写
`-g` / `--global`	全局安装选项	系统全局	全局工具	需要在整个系统中使用的命令行工具	`--global`

补充说明：

包管理器	生产依赖命令	开发依赖命令	全局安装命令
pnpm	`pnpm add <package>`	`pnpm add <package> -D`	`pnpm add -g <package>`
npm	`npm install <package>`	`npm install <package> -D`	`npm install -g <package>`
yarn	`yarn add <package>`	`yarn add <package> -D`	`yarn global add <package>`

最佳实践总结：

依赖类型	安装方式	典型包示例
项目运行时必需	本地安装（不加-D）	react, lodash, express
开发/构建时必需	本地安装（加-D）	typescript, jest, webpack, eslint
跨项目工具	全局安装（加-g）	create-react-app, vue-cli, nodemon

Vue项目常用工具安装命令总结

工具类别	工具名称	作用	推荐安装命令	依赖类型
核心框架	Vue 3	前端框架	`pnpm add vue@latest` 或 `npm install vue@latest`	dependencies
	Vue 2	Vue 2.x 版本	`pnpm add vue@2` 或 `npm install vue@2`	dependencies
	Vue Router	路由管理	`pnpm add vue-router@4` 或 `npm install vue-router@4`	dependencies
	Pinia	状态管理	`pnpm add pinia` 或 `npm install pinia`	dependencies
	Vuex (Vue 2)	状态管理	`pnpm add vuex@3` 或 `npm install vuex@3`	dependencies
构建工具	Vite	下一代构建工具	`pnpm create vite` 或 `npm create vite@latest`	项目脚手架
	Vue CLI	传统构建工具	`npm install -g @vue/cli` 或 `yarn global add @vue/cli`	全局工具
UI框架	Element Plus	Vue 3 UI库	`pnpm add element-plus` 或 `npm install element-plus`	dependencies
	Element UI	Vue 2 UI库	`pnpm add element-ui` 或 `npm install element-ui`	dependencies
	Vant	移动端UI	`pnpm add vant` 或 `npm install vant`	dependencies
	Ant Design Vue	企业级UI	`pnpm add ant-design-vue` 或 `npm install ant-design-vue`	dependencies
开发工具	TypeScript	类型检查	`pnpm add typescript -D` 或 `npm install typescript --save-dev`	devDependencies
	Volar	Vue 3 IDE支持	VS Code扩展（不通过npm安装）	开发环境
	Vue Devtools	浏览器调试	浏览器扩展	开发环境
代码质量	ESLint	代码检查	`pnpm add eslint -D` 或 `npm install eslint --save-dev`	devDependencies
	Prettier	代码格式化	`pnpm add prettier -D` 或 `npm install prettier --save-dev`	devDependencies
	Stylelint	CSS检查	`pnpm add stylelint -D` 或 `npm install stylelint --save-dev`	devDependencies
测试工具	Vitest	单元测试	`pnpm add vitest -D` 或 `npm install vitest --save-dev`	devDependencies
	Vue Test Utils	Vue组件测试	`pnpm add @vue/test-utils -D` 或 `npm install @vue/test-utils --save-dev`	devDependencies
	Cypress	E2E测试	`pnpm add cypress -D` 或 `npm install cypress --save-dev`	devDependencies
HTTP客户端	Axios	HTTP请求库	`pnpm add axios` 或 `npm install axios`	dependencies
	Vue Request	请求封装	`pnpm add vue-request` 或 `npm install vue-request`	dependencies
工具库	Lodash	工具函数库	`pnpm add lodash` 或 `npm install lodash`	dependencies
	Day.js	日期处理	`pnpm add dayjs` 或 `npm install dayjs`	dependencies
	VueUse	Vue组合式API工具	`pnpm add @vueuse/core` 或 `npm install @vueuse/core`	dependencies
样式处理	Sass/SCSS	CSS预处理器	`pnpm add sass -D` 或 `npm install sass --save-dev`	devDependencies
	Less	CSS预处理器	`pnpm add less -D` 或 `npm install less --save-dev`	devDependencies
	Tailwind CSS	原子化CSS	`pnpm add tailwindcss -D` 或 `npm install tailwindcss --save-dev`	devDependencies
	UnoCSS	原子化CSS引擎	`pnpm add unocss -D` 或 `npm install unocss --save-dev`	devDependencies
图标库	Iconify	图标集合	`pnpm add @iconify/vue` 或 `npm install @iconify/vue`	dependencies
	Element Plus Icons	Element Plus图标	`pnpm add @element-plus/icons-vue` 或 `npm install @element-plus/icons-vue`	dependencies
国际化	Vue I18n	国际化	`pnpm add vue-i18n` 或 `npm install vue-i18n`	dependencies
动画	GSAP	动画库	`pnpm add gsap` 或 `npm install gsap`	dependencies
	Anime.js	轻量动画	`pnpm add animejs` 或 `npm install animejs`	dependencies
可视化	ECharts	图表库	`pnpm add echarts vue-echarts` 或 `npm install echarts vue-echarts`	dependencies
开发效率	unplugin-vue-components	自动引入组件	`pnpm add unplugin-vue-components -D` 或 `npm install unplugin-vue-components --save-dev`	devDependencies
	unplugin-auto-import	自动引入API	`pnpm add unplugin-auto-import -D` 或 `npm install unplugin-auto-import --save-dev`	devDependencies

快速创建Vue项目命令

项目类型	创建命令	说明
Vite + Vue 3	`pnpm create vue@latest`	官方推荐，Vue 3 + Vite
	`npm create vue@latest`
Vite + Vue 2	`pnpm create vite my-vue2-app --template vue`	选择Vue模板
Vue CLI	`vue create my-project`	需要先全局安装Vue CLI
Nuxt 3	`npx nuxi init my-nuxt-app`	服务端渲染框架

常用开发脚本（package.json）

json

复制代码

{
  "scripts": {
    "dev": "vite",  // 开发环境
    "build": "vite build",  // 生产构建
    "preview": "vite preview",  // 预览构建结果
    "lint": "eslint . --ext .vue,.js,.ts",  // 代码检查
    "lint:fix": "eslint . --ext .vue,.js,.ts --fix",  // 自动修复
    "format": "prettier --write .",  // 代码格式化
    "test": "vitest",  // 运行测试
    "test:coverage": "vitest --coverage"  // 测试覆盖率
  }
}

安装模式总结

安装类型	何时使用	示例
生产依赖	项目运行时必需	`pnpm add vue`
开发依赖	只在开发/构建时使用	`pnpm add typescript -D`
全局安装	命令行工具，跨项目使用	`npm install -g @vue/cli`
项目脚手架	创建新项目模板	`pnpm create vue@latest`

注意区分大小写

选项	正确写法	错误写法	是否有效
开发依赖	`-D`	`-d`	❌ 无效
全局安装	`-g`	`-G`	❌ 无效

长选项（完整单词）的大小写

长选项	正确写法	说明
全局安装	`--global`	可以小写（某些系统可能接受`--Global`但非标准）
开发依赖	`--save-dev`	必须小写，用连字符连接
生产依赖	`--save-prod`	必须小写

记忆技巧

选项	记忆方法	全称
`-D`	Development（开发）	`--save-dev`
`-g`	global（全局）	`--global`
`-S`	Save（保存到依赖，现在很少用）	`--save`

其他常见选项的大小写

选项	大小写	作用
`-f` / `--force`	小写	强制重新安装
`--no-save`	小写	安装但不保存到 package.json
`--save-optional`	小写	保存到 optionalDependencies
`--save-exact`	小写	保存精确版本（不使用 ^ 或 ~）
`--dry-run`	小写	模拟运行，不实际安装

最佳实践建议

始终使用正确的标准选项：
- 开发依赖：-D 或 --save-dev
- 全局安装：-g 或 --global

使用完整单词选项更安全（虽然长但明确）：

bash

bash 复制代码

npm install typescript --save-dev    # 明确，不易错
npm install typescript --global     # 明确，不易错

在脚本或自动化工具中建议使用完整选项，提高可读性和稳定性。
不同包管理器的差异：
- npm/pnpm：支持 -D 和 -g
- yarn：yarn add -D（开发依赖），yarn global add（全局安装）

一句话总结：-D 必须大写，-g 必须小写，使用错误的大小写会导致命令无效或行为不符合预期。

npm 常用命令缩写表

完整命令	缩写命令	说明
`npm install`	`npm i`	安装包
`npm install --save-dev`	`npm i -D`	安装开发依赖
`npm install --global`	`npm i -g`	全局安装
`npm uninstall`	`npm un`	卸载包
`npm update`	`npm up`	更新包
`npm run`	`npm run`	运行脚本（无缩写）
`npm test`	`npm t`	运行测试
`npm init`	`npm init`	初始化项目（无缩写）
`npm publish`	`npm pub`	发布包

各种安装方式的缩写对比

bash 复制代码

# 生产依赖（项目运行时需要）
npm install jquery           # 完整写法（现代npm默认--save）
npm i jquery                # 缩写写法 ✅
npm i jquery --save         # 显式指定保存到 dependencies

# 开发依赖（仅在开发时需要）
npm install jquery --save-dev   # 完整写法
npm i jquery -D                # 缩写写法 ✅
npm i jquery --save-dev        # 完整选项

# 全局安装（系统工具）
npm install typescript --global   # 完整写法
npm i typescript -g              # 缩写写法 ✅
npm i -g typescript              # 顺序可调整

# 不保存到 package.json
npm install jquery --no-save   # 完整写法
npm i jquery --no-save        # 缩写 + 完整选项

历史变化：关于 `--save`

bash 复制代码

# npm 历史版本（v5.0.0 之前）
npm install jquery            # 不保存到 package.json
npm install jquery --save     # 保存到 dependencies（必须显式指定）

# npm 现代版本（v5.0.0 及以后）
npm install jquery            # 默认保存到 dependencies ✅
npm install jquery --save     # 同上，但 --save 现在是冗余的
npm install jquery --no-save  # 不保存到 package.json

版本对比表：

npm 版本	默认行为	`--save` 的作用
< 5.0.0	不保存到 package.json	必须使用才能保存
≥ 5.0.0	自动保存到 dependencies	冗余，可省略

其他包管理器的缩写

包管理器	安装命令	缩写	开发依赖	全局安装
npm	`npm install`	`npm i`	`-D`	`-g`
pnpm	`pnpm add`	`pnpm add`（无缩写）	`-D`	`-g`
yarn	`yarn add`	`yarn add`（无缩写）	`-D`	`global add`

实用技巧

一次安装多个包：

bash

bash 复制代码

npm i vue vue-router pinia axios  # 所有生产依赖
npm i -D typescript eslint prettier  # 所有开发依赖

查看帮助：

bash

bash 复制代码

npm help install     # 查看 install 命令详细说明
npm i --help         # 查看缩写命令帮助

组合使用：

bash

bash 复制代码

npm i -D -E typescript  # 开发依赖 + 精确版本（--save-exact）

使用精确版本：关于 `-E` 选项的详细解释

`-E` 是 `--save-exact` 的缩写

选项	含义	作用
`-E`	`--save-exact` 的缩写	保存精确版本号（不使用 `^` 或 `~`）
`--save-exact`	完整写法	同上

版本符号说明

符号	含义	示例	允许的更新范围
无符号 / `-E`	精确版本	`"1.2.3"`	只允许 `1.2.3`
`^` (默认)	兼容版本	`"^1.2.3"`	`1.x.x` (`≥1.2.3 <2.0.0`)
`~`	小版本更新	`"~1.2.3"`	`1.2.x` (`≥1.2.3 <1.3.0`)

实际效果对比

默认安装（使用 `^`）

bash

bash 复制代码

npm install lodash
# package.json 中显示：
"dependencies": {
  "lodash": "^4.17.21"  # 允许 4.x.x 的任意版本
}

使用 `-E` 安装（精确版本）

bash

bash 复制代码

npm install lodash -E
# 或
npm install lodash --save-exact
# package.json 中显示：
"dependencies": {
  "lodash": "4.17.21"  # 只能使用 4.17.21 这个版本
}

组合使用示例

bash

bash 复制代码

# 开发依赖 + 精确版本
npm install typescript -D -E
# 等价于
npm install typescript --save-dev --save-exact
# package.json 中显示：
"devDependencies": {
  "typescript": "5.3.3"  # 没有 ^ 符号
}

# 生产依赖 + 精确版本
npm install vue -E
# package.json 中显示：
"dependencies": {
  "vue": "3.4.15"  # 精确版本
}

# 全局安装不支持 -E（没有意义，因为全局不保存到 package.json）
npm install -g typescript  # 没有 -E 选项

`-E` 与其他选项的组合

命令	作用	结果
`npm i vue -E`	精确版本的生产依赖	`"vue": "3.4.15"`
`npm i vue -D -E`	精确版本的开发依赖	`"vue": "3.4.15"`（在 devDependencies）
`npm i vue -E -S`	精确版本（`-S` 现在是冗余的）	`"vue": "3.4.15"`
`npm i vue --save-exact`	完整写法	`"vue": "3.4.15"`

为什么要使用精确版本？

使用精确版本（`-E`）的场景：

bash

bash 复制代码

# 1. 确保团队一致性
npm install react -E  # 所有开发者都用完全相同的版本

# 2. 避免意外更新
npm install webpack -D -E  # 防止小版本更新引入bug

# 3. 生产环境稳定性
npm install express -E  # 生产环境需要绝对稳定

# 4. 库/框架开发
npm install vue -E  # 库作者需要精确控制依赖版本

使用默认（`^`）的场景：

bash

bash 复制代码

# 1. 快速原型开发
npm install  # 自动获取最新的兼容版本

# 2. 享受安全更新
npm update  # 自动获取修复bug的小版本

# 3. 应用程序开发（非库）
npm install axios  # 通常可以使用最新兼容版本

实际项目中的配置

1. 临时使用精确版本：

bash

bash 复制代码

# 只对特定包使用精确版本
npm install react -E
npm install react-dom -E
npm install lodash  # 其他包用默认

2. 配置 npm 默认使用精确版本：

bash

bash 复制代码

# 设置 npm 全局配置
npm config set save-exact true

# 之后所有安装都自动使用精确版本
npm install vue  # 自动添加精确版本
npm install react --save-dev  # 自动添加精确版本

# 取消设置
npm config set save-exact false

3. 在 package.json 中配置：

json

javascript 复制代码

{
  "name": "my-project",
  "config": {
    "save-exact": true
  },
  "dependencies": {
    "vue": "3.4.15"  // 注意这里没有 ^
  }
}

不同包管理器的对应选项

包管理器	精确版本选项	示例
npm	`-E` 或 `--save-exact`	`npm i vue -E`
yarn	`--exact`	`yarn add vue --exact`
pnpm	`--save-exact`	`pnpm add vue --save-exact`

`-E` 与 package-lock.json/yarn.lock 的关系

bash

bash 复制代码

# package-lock.json/yarn.lock 会锁定精确版本
npm install  # 即使使用 ^，lock 文件也会记录精确版本

# 但 -E 会影响 package.json，确保：
# 1. package.json 记录精确版本
# 2. 其他开发者安装时得到相同版本
# 3. CI/CD 环境使用相同版本

总结

选项	用途	推荐使用场景
`-E` / `--save-exact`	保存精确版本号	1. 团队协作项目 2. 生产环境部署 3. 库/包开发 4. 需要版本稳定的场景
默认（`^`）	允许兼容版本更新	1. 个人项目 2. 快速原型 3. 希望自动获取安全更新

最佳实践建议：

团队项目考虑使用 -E 或配置 save-exact: true
使用 CI/CD 时，锁文件（package-lock.json）已能保证版本一致
库/包开发必须使用精确版本或更严格的版本范围

pnpm 和 npm 安装 TypeScript 的区别（附：Vue 项目常用工具安装命令总结、命令缩写、精确版本）

pnpm add typescript -D vs npm install -g typescript

使用场景示例：

相关选项的含义

-D 或 --save-dev

--save（现在通常是默认行为）

-g 或 --global

实际项目中的典型用法

安装命令总结

最佳实践建议

表格总结

补充说明：

最佳实践总结：

Vue项目常用工具安装命令总结

快速创建Vue项目命令

常用开发脚本（package.json）

安装模式总结

注意区分大小写

长选项（完整单词）的大小写

记忆技巧

其他常见选项的大小写

最佳实践建议

npm 常用命令缩写表

各种安装方式的缩写对比

历史变化：关于 --save

其他包管理器的缩写

实用技巧

使用精确版本：关于 -E 选项的详细解释

-E 是 --save-exact 的缩写

版本符号说明

实际效果对比

默认安装（使用 ^）

使用 -E 安装（精确版本）

组合使用示例

-E 与其他选项的组合

为什么要使用精确版本？

使用精确版本（-E）的场景：

使用默认（^）的场景：

实际项目中的配置

1. 临时使用精确版本：

2. 配置 npm 默认使用精确版本：

3. 在 package.json 中配置：

不同包管理器的对应选项

-E 与 package-lock.json/yarn.lock 的关系

总结

历史变化：关于 `--save`

使用精确版本：关于 `-E` 选项的详细解释

`-E` 是 `--save-exact` 的缩写

默认安装（使用 `^`）

使用 `-E` 安装（精确版本）

`-E` 与其他选项的组合

使用精确版本（`-E`）的场景：

使用默认（`^`）的场景：

`-E` 与 package-lock.json/yarn.lock 的关系