如何安装vue.js devtools?

Vue Devtools是基于nodejs开发的扩展插件,在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

安装完成后,在Chrome浏览器的效果图如下:

1.jpg

以下介绍Vue Devtools的安装步骤:

一、安装nodejs

由于Vue Devtools插件以及npm命令工具都是基于nodejs开发的,所以需要首先安装nodejs环境。

nodejs安装文件下载地址:https://nodejs.org/en/download/,请选择稳定版本 LTS。

二、下载安装Vue Devtools插件

1、Vue Devtools插件下载地址如下:https://github.com/vuejs/vue-devtools#vue-devtools,下载zip包。

2、解压zip包

3、使用cmd命令行进入插件目录,输入一下命令:

npm install

(如果在这部报错的话,就改用cnpm install。 cnpm为使用淘宝镜像地址,安装cnpm

见附录)

npm run build

npm run build 执行完,会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

5.png

若不执行以上命令会报错,无法加载背景脚本"build/background.js",如下图:

6.png

4、修改shells>chrome文件夹下的mainifest.json 中的persistant为true

2.png

5、扩展chrome插件

找到谷歌浏览器的扩展程序功能,勾选开发者模式,然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中,完成安装。

(注意:如果我们没有执行第四部的npm run build,在这里会报错:无法加载背景脚本"build/background.js")

(1)、打开chrome浏览器,打开更多工具>扩展程序;

(2)、再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入

7.png

8.png

6、在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8100可以看到插件已经安装并运行了,注意端口号。

3.jpg

7、我们在打开本地的其他项目时,就不需要在vue-devtools文件夹下执行npm run dev了,因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。

4.png更新:如果后期vue面板不出来,再到vue-devtools文件夹下执行一遍npm run dev。

附录

使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了:

cnpm install [name]

更多vue.js相关知识,可访问 Vue.js答疑 栏目!!

以上就是如何安装vue.js devtools?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏