Chrome浏览器安装VueDevtools插件的正确姿势
1.纱线安装
Yarn是一个类似于npm的包管理器。官方网站地址为：https://www.yarnpkg.com。
官网推荐跨平台安装。它是通过npm安装的。方法非常简单。只需运行命令npminstall–globalyarn即可。
图1安装yarn包管理器
注解：
npm是node.js的包管理器。安装node.js后，它附带了npm包管理器。
至于node.js，官网https://nodejs.org/定义为：node.js异步事件驱动的JavaScript运行时，旨在构建可扩展的网络应用程序。
因此，node.js的安装请查看相关安装教程。
检查安装的版本：yarn-version
图2查看yarn版本
有人可能会问：既然npm和yarn都是包管理器，那你不能也使用npm来安装VueDev-tools吗？
是的，npm也可以安装，但是VueDev-tools官网推荐使用yarn。笔者也尝试过使用npm安装VueDev-tools，也出现了很多令人困惑的问题。
2.安装VueDev-tools插件
VueDev-Tools是一个在浏览器下调试Vue程序的插件，可以提高调试效率。
详细介绍请参考VueDev-Tools官网地址：
https://devtools.vuejs.org。
其github.com下载地址为：
https://github.com/vuejs/vue-devtools。
运行环境要求：Node6以上、npm3以上。
下面以Windows环境为例介绍安装方法。Linux下的安装方法类似。
1、在磁盘上新建目录mkdirVueDevtools
图3新建目录
2.进入VueDevtools目录cdVueDevtools
图4进入VueDevtools目录
3.从github.com克隆vue-devtools项目gitclone
https://github.com/vuejs/vue-devtools.git
图5从github.com克隆项目
克隆的vue-devtools文件如下所示：
图6从github.com克隆到本地的文件
4、进入vue-devtools目录下的cdvue-devtools
图7进入vue-devtools子目录
5.安装依赖yarninstall
图8安装依赖
安装依赖项后的文件如下所示：
图9依赖安装截图
6、编译打包项目，执行命令：yarnrunbuild
图10yarn编译打包成功后的截图
7.在Chrome浏览器中添加编译好的VueDev-tools插件
（1）点击右上角“自定义和控制按钮–>更多工具–>扩展”
图11进入扩展程序
（2）在扩展中，打开“开发者模式”开关，如下图：
图12开发者模式开关
（3）将vue-devtools/packages目录下的shell-chrome子目录直接拖入Chrome浏览器中
图13拖动子目录shell-chrome
拖动后的结果如下：
图14拖动后的结果
OK完成！
无言以对2021年4月14日
相关文章
