vue----devtools安装教程

2024-05-25 15:29:23

网上看了很多教程，但是大多都有问题，上下文矛盾的那种，这一篇是我安装完成后写的。

一、准备工具

在安装dectools之前我们需要先安装node.js ，准确来说是工具npm。这一步大家自行查找，网上的内容都比较全面。

二、下载devtools工具安装包

github的下载地址:https://github.com/vuejs/vue-devtools
这个就是官方的下载地址，大家可以放心下载。

下载好后解压到本地文件夹，记得务必解压。
打开cmd窗口，从cmd中进入解压的vue-devtools-master文件夹
接下来有两个选择：

①直接输入指令npm install安装依赖包。
但是通常npm都会因为时间过长而报错，因此我们可以选择先安装国内镜。

②输入以下指令安装国内镜像文件：
npm install -g cnpm --registry=https://registry.npm.taobao.org
结束后输入cnpm -v检查版本确认是否安装成功，这一步也结束后输入指令：
cnpm install安装依赖包。

出现这样的界面我们可以进入下一步。
输入指令npm run build

到这我们的依赖包就安装完成了，接下来主要就是将插件导入谷歌浏览器了。

三、配置谷歌浏览器

进入vue-devtools-master->shells->chrome，配置manifest.json文件。

右击打开manifest.json文件(记事本格式或者其他能打开的软件都行)找到persistent 将状态改成true(默认false）

然后打开chrome浏览器将它添加到拓展程序中。
打开谷歌浏览器设置****——>扩展程序

打开右上角开发者模式

点击加载已解压的扩展程序
进入vue-devtools-master->shells->chrome，选择chrome文件夹。

最后在浏览器右上角看到vue图标代表完成。

安装过程中有任何问题都可以评论区留言或私信我，看到后一定尽力帮忙解答。

vue----devtools安装教程相关推荐

Vue Devtools安装（谷歌浏览器插件：）
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
Vue Devtools 安装
Vue Devtools 是Chrome 浏览器插件,用来调试Vue的,能够更直观.更友好的调试Vue应用下载地址:https://github.com/vuejs/vue-devtools#vue ...
npm,vue简易安装教程
npm,vue安装教程 1.下载node.js 直接去官网下载就好:Node.js 官网点进去有两个选项,一个是LTS版本,一个是Current版本,下载LTS版本就好. LTS是长期支持(Long ...
Vue的devtools安装教程
devtools是一个便于开发者调试Vue代码的插件先确保你已经安装了node.js 点击此处去github上拉取工具包安装yarn(用npm在打包的时候会失败,使用yarn可以打包成功) ① c ...
Vue.js安装教程
目的: 记录使用npm安装方式安装Vue.js的过程,方便参考和借阅 No 1. 安装Node.js (如果电脑上已经安装了npm环境的同学,就不用再次安装,可以跳过此步骤直接到No.2) 1.1 ...
vue-cli2.x旧版本卸载不掉的问题解决方案（亲测+踩坑）附Vue脚手架安装教程
旧版本卸载问题说明 vue2.x脚手架旧版本卸载不掉的问题:(卸载命令运行后输入vue --version仍一直显示旧版本) 问题解释首先明确一点,卸载不掉肯定说明你的电脑中至少有两个地方存在脚手 ...
纯净Vue模板安装教程
一.搭建vue项目环境 1.全局安装vue-cli npm install --global vue-cli 2.进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init we ...
Vue插件开发工具的安装以及解决Vue Devtools安装后语法启动，图标仍然不亮的问题
插件安装: 1.极简插件安装地址:https://chrome.zzzmh.cn/index 安装详细步骤看下篇文档解决问题第一: 1.找到扩展程序的安装目录.如图片所示: 2.用记事本打开,或者 ...
[vue] nodejs安装教程
介绍:nodejs 是一个开源的跨平台的JavaScript运行时环境,因此在运行前端项目时是需要安装配置相应的环境变量. 一.下载nodejs 二.安装nodejs 三.配置nodejs的环境变量 ...
vue——devtools安装（实时监测vue的data数据变动）
vue-devtools链接本地安装方法: 打开谷歌浏览器设置 -> 扩展程序 -> 勾选开发者模式 -> 加载已解压的扩展程序 -> 选择"chrome扩展&qu ...

最新文章

热门文章