学习 Vue 必备——Vue.js devtools 插件安装免费教程（可不必翻墙，极简插件）

大家好，欢迎来到IT知识分享网。

一 .  Vue.js devtools 简介

        Vue.js DevTools 是一个用于增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。

       Vue.js DevTools 是一款基于chrome(谷歌) 游览器的插件，所以本文主要介绍基于 chrome(谷歌）浏览器的安装教程。

二. Vue.js devtools 安装教程

        Vue.js devtools 安装教程分为两种，一种是针对国外用户的，另一种是国内用户。.

        国外的安装教程比较简单，有条件的同学可以尝试一下国外用户的安装途径。大部分的人可以遵循国内的安装途径。

2.1 国外 Vue.js devtools 安装教程

步骤一：打开 chrome 浏览器点击红色方块位置

步骤二：点击管理扩展程序

步骤三：点击并进入 Chrome 应用商店

步骤四：在搜索店内直接搜索Vue

步骤五：点击之后安装

2.2 国内 Vue.js devtools 安装教程

步骤一：浏览器直接搜索极简插件，点击极简插件官网。

步骤二：按照数字一二三进行，安装和点击

步骤三： 点击推荐下载

步骤四：下载的是一个安装包（2024.7.2 安装包名称是这个）

步骤五： 解压并打开安装包（安装包内只有两个内容，如下所示）

步骤六： 打开 chrome 浏览器点击红色方块位置

步骤七：点击管理扩展程序

步骤八:   打开开发者模式

步骤九：拖动 nhdogjmejiglipccpnnnanhbledajbpd_6.6.1_chrome.zzzmh.cn.crx 进入页面安装。

三. 检验安装成功

        推荐：可以点击右上角扩张程序，将插件固定。

        检查：打开控制台，点击VUE插件，就可显示。

四.百度网盘极简插件分享

作者设置链接永久有效且免费。

下载之后可从 2.2 第六步开始。

 PS：插件只有在页面中有 VUE 内容的时候才会保持高亮，不然就是暗色，所以测试的时候，请在 VUE 页面测试。