在Vue的教学视频中，下载Vue的浏览器调试工具Devtools有下面六步：

克隆仓库

1	git clone https://github.com/vuejs/devtools.git

在vue-devtools目录下安装依赖包

1
2
3

cd devtools　　　　　　  //进入当前目录
npm install　　　　　　  //下载依赖（报错解决方法看下面）
                        //使用npm需科学上网，或者cnpm国内镜像下载更快

构建

1	npm run build　　　　　　//打包

打开Chrome扩展页面
选中开发者模式
加载已解压的扩展，选择shells/chrome

但是在第二步npm install安装依赖包的时候发生了如下报错：

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue-devtools@6.1.0
npm ERR! Found: eslint@7.32.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^7.26.0" from the root project
npm ERR!   peer eslint@"^7.12.1" from @vue/eslint-config-standard@6.1.0
npm ERR!   node_modules/@vue/eslint-config-standard
npm ERR!     dev @vue/eslint-config-standard@"^6.0.0" from the root project
npm ERR!   3 more (eslint-plugin-import, eslint-plugin-node, eslint-plugin-promise)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^5.0.0 || ^6.0.0" from eslint-plugin-vue@6.2.2
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^6.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\10272\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\10272\AppData\Local\npm-cache\_logs\2022-03-13T05_23_44_413Z-debug.log

机翻一下：

$npm安装
npm错误！代码解析
npm错误！ERESOLVE无法解析依赖关系树
npm错误！
npm错误！解析时：vue-devtools@6.1.0
npm错误！发现：eslint@7.32.0
npm错误！节点_模块/eslint
npm错误！从根项目开发eslint@“^7.26.0”
npm错误！从@vue/eslint config中对等eslint@“^7.12.1”-standard@6.1.0
npm错误！node_modules/@vue/eslint配置标准
npm错误！根项目中的dev@vue/eslint配置标准“^6.0.0”
npm错误！3个（eslint插件导入、eslint插件节点、eslint插件承诺）
npm错误！
npm错误！无法解析依赖关系：
npm错误！来自eslint插件的对等eslint@“^5.0.0 | | ^6.0.0”-vue@6.2.2
npm错误！节点_模块/eslint插件vue
npm错误！根项目中的dev eslint插件vue@“^6.0.0”
npm错误！
npm错误！修复上游依赖项冲突，或重试
npm错误！此命令使用--force或--legacy peer deps
npm错误！接受不正确（且可能已损坏）的依赖项解析。
npm错误！
npm错误！请参阅C:\Users\10272\AppData\Local\npm cache\eresolve report。txt获取完整报告。

npm错误！此运行的完整日志可在以下位置找到：

npm错误！C:\Users\10272\AppData\Local\npm cache\\u logs\2022-03-13T05\u 23\u 44\u 413Z-debug。日志

在技术群里问了一下，原因是依赖冲突：eslint-plugin-vue 不支持 eslint@7。

解决方法是查看最新版本是否支持，或者寻找替代，或者提议作者支持。

或者强制安装npm install --force，但可能会发生意料之外的错误。

问了一下提莫，他也说是因为版本问题，于是我去对比了一下GitHub原项目和npm官网的版本区别，发现：

克隆的项目是6.1.0版本：https://github.com/vuejs/devtools
然后NPM最高是5.1.4版本：https://www.npmjs.com/package/vue-devtools

所以我再次去了解了一下npm：

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

所以npm其实和GitHub一样都是存项目文件的仓库？

不是，GitHub存源码，npm上是打包好的包。Emm…具体怎么解释呢，看几篇文章吧：

npm,node,webpack 的区别

一个npm包的自述

“一个project需要很多package,而且每个package又有可能需要其他的package. 用npm直接可以全部安装, 难道要一个一个去github找,然后下载解压复制黏贴吗..”

谈谈NPM和Webpack的关系

对webpack、git、github、npm的理解

“github使用git clone +代码，可以下载代码。npm通过npm install 安装，可以直接使用。”

“yarn是可替代npm的包管理器。Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。”

npm和yarn的区别，我们该如何选择?

好了好了…本来想理解一下npm是什么，怎么相关东西越来越多了…

所以究竟怎么办呢？我就仅仅只是想简简单单安装个vue-devtools浏览器插件而已啊…

什么？插件？脑子里一道光闪过…

于是我点开了Edge浏览器右上角的三个点，选择“扩展”，打开管理扩展页面，点击“查找新扩展”(获取 Microsoft Edge 扩展)，搜了一下vue-devtools，好家伙…有人搬运了早就…啊这…