1. Vue

  2. Node.js

  3. Vue Router

  4. Axios

  5. Vuex

# npm 是什么? npm 是 node.js 的一个包管理工具,用于管理我们所用的第三方库。 ## 包管理工具 npm 这种包管理工具不是独创,在 python 中有 pip,java 有 maven,几乎各个语言都有。那么为什么会需要这种包管理工具呢? 想象一下,如果有一个功能大家都会用到,那么相比你自己写,去别人那拷贝一份过来岂不是更香。拿 U 盘拷或微信发送效率太低了,于是就有了 github 这种共享代码的平台,大家把写好的轮子往上一放。你想用哪个直接去搜然后下载放进你的项目就行了。 `搜索+下载+放进项目` 这个步骤还是太麻烦了,于是乎就有了 npm 这种包管理工具,一个命令 `npm install xxx` 就能把你想用的代码放进你的项目文件夹。 以上只是包管理工具的一个功能,npm 还会把你当前项目下安装的第三方库记录到 `package.json` 这个文件中。当你把代码发给别人或部署到服务器上时,只是执行 `npm install` 就可以一次性把项目所依赖的第三方代码库下载完成。(为什么不连同用到的第三方代码库一起打包给别人?因为这些文件太多了,一个成熟的项目第三方库可能都有上 GB 的大小。) 还有的就是,`package.json` 还会保存所用的第三方库的版本号。这样可以保证你开发时的第三方库版本与服务器上的版本一致。可以避免因为第三方库的升级导致接口变动,或存在未知 bug 导致项目运行失败。 # npm 的学习路线 npm 的命令比较简单,如果只是为了日常使用可以查看本篇总结的 npm 常用命令。如有更多需求或不清楚的地方,可以查阅 [npm 官方英文文档](https://docs.npmjs.com/)或 [npm 中文文档](https://www.npmjs.cn/)。 # 上手 npm 我们尝试使用 npm 来安装一个包,了解其基本流程。 1.[安装 node.js](https://3yya.com/courseware/chapter/14#%E4%B8%8A%E6%89%8B%20Node.js) 时已经包含 npm,可以在命令行中输入 `npm -v` 检验 npm 是否已经安装并获得当前 npm 版本。 ![image](https://qiniu.3yya.com/4b304361a6a40904158ddfcd0ece7cfa/4b304361a6a40904158ddfcd0ece7cfa.png) 2.建一个空的文件夹,在命令行中进入创建的文件夹,并执行 `npm install snake-cli-ts` 来安装 `snake-cli-ts` 这个第三方库。安装完成后会多出 `node_modules` 文件夹、 `package.json` 和 `package-lock.json` 文件。 - **node_modules**:保存当前项目所需第三库的文件夹。 - **package.json**:记录当前项目相关的信息,比如项目所引用的第三方库名称和版本号,项目名、版本号、快捷命令等。 - **package-lock.json**:记录所有第三方库(包括第三方库的第三方库)的版本号、来源、hash 值等相关信息,只要这个文件一致那么可以保证每次 install 之后的第三方库代码文件都会一致。 ![image](https://qiniu.3yya.com/89bd14e4b75e77ced913c847fafa7fcd/89bd14e4b75e77ced913c847fafa7fcd.png) 3.刚刚我们安装的包是一个贪吃蛇的小游戏,可以在文件夹路径下运行 `npm exec snake` 运行 `snake`,玩一下。 ![image](https://qiniu.3yya.com/c026e515fccac9cd6ebc9a24e8c719ef/c026e515fccac9cd6ebc9a24e8c719ef.gif) # 可能出现的问题 ## 访问缓慢 由于 npm 服务器在国外,并且经常被墙。所以如果你不幸在安装包时发现特别慢或连接不上,可以尝试更改 npm 源为国内服务器。 将 npm 源设置为淘宝源。 ```bash npm config set registry https://registry.npm.taobao.org ``` 查看源地址。 ```bash npm config get registry ``` 重置源地址。 ```bash npm config delete registry ```