1、什么是 dev-tools ?

答: dev-tools 是 Vue 的调试工具;

在成功安装 dev-tools 后:

其一、可在前端页面中可显示当前点击组件的可用数据;

其二、可以修改和添加数据等信息,且修改和添加信息可实时反映在界面中,非常方便调试一些比较繁琐的业务流程;

其三、可以任意展示其中的一步操作的界面数据等信息;

2、dev-tools 的安装步骤:

A、打开 Vue 的 官网:

官网地址为:‘https://cn.vuejs.org/’; (然后选择 Devtools 工具);

在这里插入图片描述

在这里插入图片描述

B、在 Devtools 工具的 GitHub 中选择相关文档:

在这里插入图片描述

点击 ‘开始’ 按钮;

在这里插入图片描述

根据想要的不同的版本及安装在不同的地方来设置;

在这里插入图片描述

C、以我自己安装的 Google 的插件为例:

其一、首先是获取插件信息并安装该插件:(点击该按钮)

在这里插入图片描述

获得的 ‘devtools’ 插件并安装如下:

在这里插入图片描述

其二、打开并设置 ‘devtools’ 插件的信息:

选择 ‘More tools’(更多工具)、再选择 ‘Extensions’(扩展程序)

在这里插入图片描述

点击 ‘Extensions’(扩展程序) 后的结果如下所示:

在这里插入图片描述

其三、对 ‘devtools’ 插件进行设置

点击 ‘详情’

在这里插入图片描述

点击详情后将信息设置成如下所示:

在这里插入图片描述

其四、将 Vue 写的 ‘.html’ 在 (浏览器或客户端) 页面显示的信息为:

若此时在右上角有 Vue 的标志,就说明插件安装成功,点击 Vue 后能成功的运型 Vue 的文档信息;

在这里插入图片描述

3、安装过程中我所遇到的问题:

A、虽然步骤都完成后,但在 Vue 写的 ‘.html’ 在 (浏览器或客户端) 页面中并不能找到 Vue 的标识

显示结果,如下所示:

在这里插入图片描述

B、检查出来的问题为:(如下的信息设置有问题,没有设置完全);

因此一定要设置完全,或者按照官方的文档来设置完全;

在这里插入图片描述

C、在成功设置相关信息的情况下的显示结果为:(即成功将 Vue 在右上角显示出来了:)

在这里插入图片描述

4、其他的信息:

A、若安装步骤还是看不懂或有问题,建议参考官方文档信息:

官方相关文档地址为:‘https://devtools.vuejs.org/guide/installation.html’;

在这里插入图片描述

B、若想下载 Google 浏览器,而没有找到合适资源的可以下载一下我传的资源信息;
Google 浏览器 Win版 和 Mac 版的都有,连接如下:

Win 版本:‘https://download.csdn.net/download/weixin_43405300/16800670’;

Mac 版本:‘https://download.csdn.net/download/weixin_43405300/16800713’;

5、小结:

哪里有不对或不合适的地方,还请大佬们多多指点和交流!

Logo

前往低代码交流专区

更多推荐