安装vue-devtools过程中种种问题

周五按照网上教程进行按照，报错再百度搜索找方案。之前一直在vue-devtools文件夹中使用git bash进行cnpm install安装不成功，报各种依赖包不支持。报错类似如下：

npm WARN .. requires a peer of react@^16.4.0 but none is installed

报错内容过多，需要安装依赖包太多。然后将npm版本号降到6.0.1，报错更多。类似

npm WARN npm npm does not support Node.js v14.16.0 npm WARN npm You should p

然后卸载node。再进行安装还是如此。周一上班开机后继续折腾，结果可行。记录步骤如下：

一、报错

1、在vue-devtools目录下git bash 执行安装命令  $ cnpm install

报错error：

 可能cnpm未安装

2、执行 $ npm install 

报错error：

3、使用 win+R打开cmd 执行命令  npm install

报错error：有警告有报错

 

4、继续执行 npm install cnpm -g --registry=https://registry.npm.taobao.org （安装淘宝镜像）

报错error：

npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

removed 384 packages, and changed 378 packages in 2m

3 packages are looking for funding
  run `npm fund` for details

百度搜索：

 提示内容，部分内容不再维护，可以继续安装，影响不大

5、执行 npm config set registry https://registry.npm.taobao.org （设置源）无反应，然后执行

npm start 

报错error：

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\linger/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\linger\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\linger\AppData\Local\npm-cache\_logs\2021-12-20T07_07_01_655Z-debug-0.log

 5、继续执行 npm install nrm -g （npm升级到最新版本） 有报错但是也正常安装

 

npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 61 packages in 1m

1 package is looking for funding
  run `npm fund` for details
 

6、执行 cnpm -v (查看版本) 查看是否安装成功。

 

cnpm@7.1.0 (C:\Users\linger\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.15 (C:\Users\linger\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@16.13.1 (D:\Program Files\node.exe)
npminstall@5.3.1 (C:\Users\linger\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\linger\AppData\Roaming\npm
win32 x64 10.0.19042
registry=https://registry.npmmirror.com

安装成功，可以看到版本号和安装地址 都在c盘下。

7、回到git命令行界面，执行命令 $ cnpm install （安装依赖）正常执行

√ Installed 33 packages
√ Linked 748 latest versions
[1/1] scripts.postinstall cypress@^3.1.0 run "node index.js --exec install", root: "D:\\vue-devtools\\node_modules\\_cypress@3.8.3@cypress"

Cypress 3.8.3 is installed in C:\Users\linger\AppData\Local\Cypress\Cache\3.8.3

Skipping installation:

  Pass the --force option if you'd like to reinstall anyway.
[1/1] scripts.postinstall cypress@^3.1.0 finished in 5s
√ Run 1 scripts
peerDependencies WARNING @vue/eslint-config-standard@^6.0.0 requires a peer of @vue/cli-service@^3.0.0 || ^4.0.0 || ^5.0.0-0 but none was installed
peerDependencies WARNING @vue/eslint-config-standard@6.1.0 › eslint-import-resolver-webpack@^0.13.1 requires a peer of webpack@>=1.11.0 but none was installed
peerDependencies WARNING @typescript-eslint/parser@4.33.0 › @typescript-eslint/typescript-estree@4.33.0 › tsutils@^3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none was installed
peerDependencies WARNING @tailwindcss/postcss7-compat@2.2.17 › postcss-load-config@^3.1.0 requires a peer of ts-node@>=9.0.0 but none was installed
peerDependencies WARNING react-dom@^17.0.2 requires a peer of react@17.0.2 but react@16.14.0 was installed
peerDependencies WARNING eslint-plugin-vue@^6.0.0 requires a peer of eslint@^5.0.0 || ^6.0.0 but eslint@7.32.0 was installed
peerDependencies WARNING @vue/eslint-config-standard@^6.0.0 requires a peer of eslint-plugin-vue@^7.0.0 but eslint-plugin-vue@6.2.2 was installed
deprecate eslint-plugin-standard@^5.0.0 standard 16.0.0 and eslint-config-standard 16.0.0 no longer require the eslint-plugin-standard package. You can remove it from your dependencies with 'npm rm eslint-plugin-standard'. More info here: https://github.com/standard/standard/issues/1316
deprecate lerna@4.0.0 › @lerna/version@4.0.0 › temp-write@4.0.0 › uuid@^3.3.2 Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
deprecate lerna@4.0.0 › @lerna/bootstrap@4.0.0 › @lerna/run-lifecycle@4.0.0 › npm-lifecycle@3.1.5 › node-gyp@5.1.1 › request@^2.88.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate lerna@4.0.0 › @lerna/bootstrap@4.0.0 › @lerna/run-lifecycle@4.0.0 › npm-lifecycle@3.1.5 › node-gyp@5.1.1 › request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
deprecate cypress@3.8.3 › debug@3.2.6 Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
deprecate cypress@3.8.3 › request@2.88.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate cypress@3.8.3 › url@0.11.0 › querystring@0.2.0 The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
deprecate cypress@3.8.3 › extract-zip@1.6.7 › mkdirp@0.5.1 Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
Recently updated (since 2021-12-13): 5 packages (detail see file D:\vue-devtools\node_modules\.recently_updates.txt)
√ All packages installed (920 packages installed from npm registry, used 3m(network 3m), speed 177.27KB/s, json 749(3.42MB), tarball 23.26MB)
安装了33个软件包

链接748最新版本

。。。中间一些警告内容。。。

已安装所有软件包（从npm注册表安装920个软件包，使用3m（网络3m），速度177.27KB/s，json 749（3.42MB），tarball 23.26MB）

 8、查找目录 vue-devtools\packages\shell-chrome 下的

 可能是新版本，，跟网络上的其他文章地址不一致。

 老版本地址：vue-devtools\shells\chrome 

新版本地址如下：

9、打开找着"persistent": false 将值修改为 true

 10、保存编译 执行命令 $ npm run build（编译）

> vue-devtools@6.0.0-beta.20 build
> lerna run build

lerna notice cli v4.0.0
lerna info Executing command in 9 packages: "yarn run build"
lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
lerna ERR! yarn run build stderr:
'yarn' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
lerna ERR! yarn run build exited 1 in '@vue/devtools-api'

有报错 ，放置不理，安装时会报错

所以仍然需要安装yarn 

11、执行  $ npm install yarn -g   (安装 yarn 工具) 

 12、执行  $ yarn install   (用 yarn 安装依赖 )

[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > webpack-dev-server@4.0.0-rc.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@5.2.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > react-dom@17.0.2" has incorrect peer dependency "react@17.0.2".
warning "@typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @vue/eslint-config-standard@6.1.0" has incorrect peer dependency "eslint-plugin-vue@^7.0.0".
warning "@vue/eslint-config-standard > eslint-import-resolver-webpack@0.13.2" has unmet peer dependency "webpack@>=1.11.0".
warning " > eslint-plugin-vue@6.2.2" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0".
warning "vitepress > @docsearch/js > @docsearch/react@1.0.0-alpha.28" has incorrect peer dependency "react-dom@^16.8.0".
warning " > vue-loader@15.9.8" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.8" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning "workspace-aggregator-8a011b08-5019-4bee-be09-abbfdad52739 > @vue-devtools/app-frontend > @pixi/events@6.2.0" has unmet peer dependency "@pixi/display@6.2.0".
......

13、执行  $ yarn run build （用 yarn 编译）

 

yarn run v1.22.17
$ lerna run build
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'find-up'
Require stack:
- D:\vue-devtools\node_modules\_pkg-dir@4.2.0@pkg-dir\index.js
- D:\vue-devtools\node_modules\_import-local@3.0.3@import-local\index.js
- D:\vue-devtools\node_modules\_lerna@4.0.0@lerna\cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (D:\vue-devtools\node_modules\_pkg-dir@4.2.0@pkg-dir\index.js:3:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\vue-devtools\\node_modules\\_pkg-dir@4.2.0@pkg-dir\\index.js',
    'D:\\vue-devtools\\node_modules\\_import-local@3.0.3@import-local\\index.js',
    'D:\\vue-devtools\\node_modules\\_lerna@4.0.0@lerna\\cli.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
 

还是有报错

原因可能为node安装包有遗漏模块没有安装，也可能是 路径不对有中文。重新下载安装node后发现问题并未解决。返回上一步，查看错误信息。

warning " > webpack-dev-server@4.0.0-rc.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".

（Webpack-dev-server 有未满足的对等依赖）
怀疑没有安装webpack。

（注意：如果安装完webpack还依然报 has unmet peer dependency xxx，则尝试关闭git命令窗口再打开git命令窗口，在新窗口中执行命令）

14、再次执行  $ cnpm install 返回正常。

√ Installed 33 packages
√ Linked 17 latest versions
√ Run 0 scripts
√ All packages installed (used 401ms(network 397ms), speed 971.1KB/s, json 17(385.53KB), tarball 0B)

15、返回CMD 执行命令窗口，执行  npm install webpack webpack-cli –g （全局安装webpack、webpack-cli）

返回

added 120 packages in 6m

4 packages are looking for funding
  run `npm fund` for details

16、关闭git命令行窗口，还是在vue-devtools文件夹打开新git bash 命令行窗口，执行

yarn install （安装依赖）

17、 执行 $ yarn run build （编译）

18、 添加扩展程序

Chrome浏览器右上角竖向排列3点 》更多工具 》 扩展程序 ，点击

打开vue-devtools目录下的shell-chrome，点击选择文件夹。 

 

 安装成功！

19、设置，点击地址栏右侧拼图图标 》扩展程序 》 Vue.js devtools 右侧的图钉点上。适中固定展示。

 

 20、测试 （B站有使用vue开发，打开首页）右侧展示成功。若页面没有使用vue，则展示为灰色