什么是Vue Devtools

Vue Devtools是基于nodejs开发的扩展插件,在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。安装完成后,在Chrome浏览器的效果图如下:
在这里插入图片描述
以下介绍Vue Devtools的安装步骤:

一、安装nodejs

由于Vue Devtools插件以及npm命令工具都是基于nodejs开发的,所以需要首先安装nodejs环境。
nodejs安装文件下载地址:https://nodejs.org/en/download/,请选择稳定版本 LTS。
在这里插入图片描述
安装完成之后,验证npm工具是否安装完成:
在这里插入图片描述

二、下载安装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
4、修改shells>chrome文件夹下的mainifest.json 中的persistant为true
在这里插入图片描述
5、我们找到谷歌浏览器的扩展程序功能,勾选开发者模式,然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中,完成安装。
(注意:如果我们没有执行第四部的npm run build,在这里会报错:无法加载背景脚本"build/background.js")
6、在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8100可以看到插件已经安装并运行了,注意端口号。
在这里插入图片描述
7、我们在打开本地的其他项目时,就不需要在vue-devtools文件夹下执行npm run dev了,因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。
在这里插入图片描述

更新:如果后期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]

相关参考

[1]:vuejs指南: https://cn.vuejs.org/v2/guide/installation.html
[2]: 淘宝镜像地址:https://npm.taobao.org/
[3]: npm使用中文站点:https://www.npmjs.com.cn/getting-started/installing-node/
[4]: 菜鸟教程nodejs介绍:https://www.runoob.com/nodejs/nodejs-npm.html
[5]: vue devtools安装:https://www.cnblogs.com/momozjm/p/7098476.html

Logo

前往低代码交流专区

更多推荐