npm 学习笔记
一、什么是 npm？
npm（Node Package Manager） 是 Node.js 官方提供的包管理工具，也是目前全球最大的 JavaScript 软件包生态系统。
简单来说：
npm = JavaScript/Node.js 世界的“应用商店 + 包管理器”
它的主要作用：
- 下载第三方库（包）
- 管理项目依赖
- 执行项目脚本
- 发布自己的包
二、为什么需要 npm？
假设开发一个 Vue 项目，如果没有 npm：
- 手动下载 Vue
- 手动下载 Vue Router
- 手动下载 Axios
- 手动管理版本
- 手动解决依赖冲突
不仅效率低，而且容易出错。
使用 npm 后，只需要一条命令：
bashnpm install vue
或者：
bashnpm install axios
npm 会自动：
- 下载依赖
- 放入项目目录
- 管理版本
- 自动安装依赖项
三、npm 的工作原理
执行：
bashnpm install axios
工作流程：
textnpm install axios │ ▼连接 npm Registry（官方仓库） │ ▼查找 axios │ ▼下载压缩包 │ ▼安装到 node_modules │ ▼更新 package.json（可选） │ ▼更新 package-lock.json
四、Node.js 与 npm 的关系
很多初学者容易混淆：
| Node.js | npm |
|---|---|
| JavaScript 运行环境 | JavaScript 包管理工具 |
| 用于执行 JavaScript | 用于安装和管理依赖 |
| 安装 Node.js 后通常会自动安装 npm | 依赖 Node.js 运行 |
查看版本：
bashnode -v
查看 Node.js 版本。
查看 npm：
bashnpm -v
查看 npm 版本。
例如：
textNode.js：v22.18.0npm：10.9.3
五、npm 项目中最重要的三个文件
1、package.json
项目配置文件，记录项目基本信息。
主要内容：
- 项目名称
- 项目版本
- 作者
- 依赖
- scripts 脚本
示例：
json{ "name": "my-project", "version": "1.0.0", "scripts": { "dev": "vite", "build": "vite build" }, "dependencies": { "vue": "^3.5.0", "axios": "^1.9.0" }}
2、package-lock.json
依赖锁定文件。
作用：
- 锁定依赖的准确版本
- 保证团队所有人的依赖一致
- 避免"我这里可以运行，你那里不能运行"
例如：
textvue└── 3.5.2 axios└── 1.9.1
3、node_modules
所有安装的第三方依赖都会放在这里。
项目结构：
textproject/│├── node_modules/├── package.json├── package-lock.json
注意：
一般不要提交到 Git。
其他开发者只需要：
bashnpm install
即可重新下载。
通常会在 .gitignore 中忽略：
textnode_modules/
六、常用 npm 命令
1、初始化项目
普通初始化：
bashnpm init
快速初始化：
bashnpm init -y
生成：
textpackage.json
2、安装依赖
安装普通依赖：
bashnpm install axios
简写：
bashnpm i axios
安装多个依赖：
bashnpm install vue axios element-plus
安装开发依赖：
bashnpm install -D vite
或者：
bashnpm i --save-dev vite
开发依赖通常用于：
- Vite
- Webpack
- ESLint
- Prettier
- Jest
不会随着项目运行一起打包。
3、安装所有依赖
别人给你项目：
textproject/ package.jsonpackage-lock.json
执行：
bashnpm install
npm 会自动下载所有依赖。
4、卸载依赖
bashnpm uninstall axios
5、更新依赖
bashnpm update
6、查看安装的依赖
查看全部：
bashnpm list
查看第一层依赖：
bashnpm list --depth=0
7、执行 scripts
package.json：
json{ "scripts": { "dev": "vite", "build": "vite build", "test": "jest" }}
启动项目：
bashnpm run dev
打包：
bashnpm run build
测试：
bashnpm run test
七、dependencies 与 devDependencies
dependencies
生产环境依赖。
安装：
bashnpm install axios
或者：
bashnpm install --save axios
例如：
- Vue
- Axios
- Element Plus
- Pinia
项目运行时必须存在。
devDependencies
开发环境依赖。
安装：
bashnpm install -D vite
例如：
- Vite
- Webpack
- ESLint
- Prettier
- Jest
仅开发时使用。
八、npm、Node.js、npx 的区别
| 工具 | 作用 | 示例 |
|---|---|---|
| Node.js | JavaScript 运行环境 | node app.js |
| npm | 下载和管理依赖 | npm install vue |
| npx | 临时执行 npm 包 | npx create-vite my-app |
例如：
bashnpx create-vite my-app
如果本地没有该工具：
- 自动下载
- 自动运行
- 不需要全局安装
九、现代前端为什么离不开 npm？
一个 Vue3 项目通常依赖：
textVue3 项目│├── Vue├── Vite├── Vue Router├── Pinia├── Axios├── ESLint├── Prettier├── TypeScript（可选）
这些库几乎都通过 npm 安装和管理，因此 npm 已成为现代前端开发的基础工具。
十、学习重点（面试高频）
必须掌握
- npm 是什么
- Node.js 与 npm 的关系
- package.json 的作用
- package-lock.json 的作用
- node_modules 的作用
- npm install 的执行流程
- npm init 的作用
- npm run 的作用
- dependencies 与 devDependencies 的区别
- npm、Node.js、npx 的区别
十一、常用命令速查表
| 命令 | 作用 |
|---|---|
node -v |
查看 Node.js 版本 |
npm -v |
查看 npm 版本 |
npm init |
初始化项目 |
npm init -y |
快速初始化 |
npm install 包名 |
安装依赖 |
npm i 包名 |
安装依赖（简写） |
npm install -D 包名 |
安装开发依赖 |
npm uninstall 包名 |
卸载依赖 |
npm update |
更新依赖 |
npm list |
查看所有依赖 |
npm list --depth=0 |
查看一级依赖 |
npm run dev |
启动开发环境 |
npm run build |
打包项目 |
npm run test |
执行测试 |
npx create-vite my-app |
创建 Vite 项目 |
十二、总结
一句话理解：
- Node.js：JavaScript 的运行环境。
- npm：Node.js 的包管理工具，用于安装、管理和更新依赖。
- package.json：记录项目配置和依赖信息。
- package-lock.json：锁定依赖版本，保证团队环境一致。
- node_modules：存放所有下载的第三方依赖。
- npx：临时执行 npm 包，无需全局安装。
掌握 npm 是学习 Vue、React、Angular、Node.js 等现代前端和全栈开发的基础，也是企业开发中必不可少的技能。