在Chrome浏览器上安装VueDevtools插件的正确姿势

文章中心6个月前发布 admin
49 0 0

Chrome浏览器安装VueDevtools插件的正确姿势

1.纱线安装

Yarn是一个类似于npm的包管理器。官方网站地址为:https://www.yarnpkg.com。

官网推荐跨平台安装。它是通过npm安装的。方法非常简单。只需运行命令npminstall–globalyarn即可。

在Chrome浏览器上安装VueDevtools插件的正确姿势

图1安装yarn包管理器

注解:

npm是node.js的包管理器。安装node.js后,它附带了npm包管理器。

至于node.js,官网https://nodejs.org/定义为:node.js异步事件驱动的JavaScript运行时,旨在构建可扩展的网络应用程序。

因此,node.js的安装请查看相关安装教程。

检查安装的版本:yarn-version

在Chrome浏览器上安装VueDevtools插件的正确姿势

图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

在Chrome浏览器上安装VueDevtools插件的正确姿势

图3新建目录

2.进入VueDevtools目录cdVueDevtools

在Chrome浏览器上安装VueDevtools插件的正确姿势

图4进入VueDevtools目录

3.从github.com克隆vue-devtools项目gitclone

https://github.com/vuejs/vue-devtools.git

在Chrome浏览器上安装VueDevtools插件的正确姿势

图5从github.com克隆项目

克隆的vue-devtools文件如下所示:

在Chrome浏览器上安装VueDevtools插件的正确姿势

图6从github.com克隆到本地的文件

4、进入vue-devtools目录下的cdvue-devtools

在Chrome浏览器上安装VueDevtools插件的正确姿势

图7进入vue-devtools子目录

5.安装依赖yarninstall

在Chrome浏览器上安装VueDevtools插件的正确姿势

图8安装依赖

安装依赖项后的文件如下所示:

在Chrome浏览器上安装VueDevtools插件的正确姿势

图9依赖安装截图

6、编译打包项目,执行命令:yarnrunbuild

在Chrome浏览器上安装VueDevtools插件的正确姿势

图10yarn编译打包成功后的截图

7.在Chrome浏览器中添加编译好的VueDev-tools插件

(1)点击右上角“自定义和控制按钮–>更多工具–>扩展”

在Chrome浏览器上安装VueDevtools插件的正确姿势

图11进入扩展程序

(2)在扩展中,打开“开发者模式”开关,如下图:

在Chrome浏览器上安装VueDevtools插件的正确姿势

图12开发者模式开关

(3)将vue-devtools/packages目录下的shell-chrome子目录直接拖入Chrome浏览器中

在Chrome浏览器上安装VueDevtools插件的正确姿势

图13拖动子目录shell-chrome

拖动后的结果如下:

在Chrome浏览器上安装VueDevtools插件的正确姿势

图14拖动后的结果

OK完成!

无言以对2021年4月14日

© 版权声明

相关文章