chrome安装vue

谷歌浏览器chrome的vuejs devtools 插件的安装

(推荐方法2)

安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用;

方法2: github下载插件,npm包安装依赖,拖入浏览器扩展程序

具体操作:

1 . 下载chrome扩展插件。

在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools

2. npm install

下载完成后打开命令行cmd进入vue-devtools-master文件夹,

1. npm install,安装依赖包;如果安装太慢,请参照文章末尾说明进行操作。

2. npm run build

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

 

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

3. 打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true

4. 扩展chrome插件

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

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

 

5, 测试安装成功

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

 

 

 

方法3: 下载chrome插件安装包(.crx文件)离线安装(版本较低不推荐)

下载地址:http://www.cnplugins.com/devtool/vuejs-devtools/download.html

安装方法:http://www.cnplugins.com/tools/how-to-setup-crx.html

在chrome中新开一个TAB,输入:chrome://extensions/ 回车,打开应用管理器,可以看到之前安装的其他应用。将下载后的.crx文件,拖入即可安装。

 

 

另附:

1. 建议使用npm淘宝镜像安装依赖包地址:http://npm.taobao.org/

命令行安装npm淘宝镜像:

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

之后我们就可以使用cnpm代替npm安装依赖包了

2. chrome插件网地址 http://www.cnplugins.com/, 有需要别的插件的可类似以上操作。

 

 

### 回答1: 要在Chrome安装Vue Devtools,您需要按照以下步骤操作: 1. 打开Chrome浏览器并转到Chrome网上应用商店。 2. 在搜索栏输入“Vue Devtools”。 3. 点击“添加到Chrome”按钮。 4. 等待安装完成后,您将在Chrome浏览器的工具栏看到Vue Devtools图标。 5. 点击该图标即可打开Vue Devtools面板,开始使用它来调试和分析Vue应用程序。 ### 回答2: Vue.js 是一种流行的用于构建单页面应用程序的 JavaScript 框架。Vue Devtools 是一个用于 Vue.js 调试的 Chrome 扩展程序。它使开发人员能够更轻松地查看组件树、属性、事件和更改,从而更快地调试应用程序。 要安装 Vue Devtools,需要遵循以下步骤: 1.确保你已经安装Chrome 浏览器。如果没有,请下载安装。 2.打开 Chrome 浏览器并访问 Chrome 网上商店。 3.在搜索栏输入“Vue Devtools”并点击搜索按钮。你将看到开发人员工具的扩展名列表。 4.点击“添加到 Chrome”按钮。 5.一个弹出窗口将询问您是否要添加 Vue Devtools。点击“添加扩展”按钮。 6.等到扩展程序下载安装完成后,你会看到一个新的 Vue Devtools 图标出现在 Chrome 工具栏。现在,你可以开始使用 Vue Devtools 了。 7.要打开 Vue Devtools,请点击 Chrome 工具栏上的 Vue Devtools 图标。这将打开一个新窗口,其包含 Vue Devtools 的所有功能。 一个很棒的特点是,Vue Devtools 允许你检查你的应用程序的每个组件,从而更好地理解它们的功能和用途。在 Vue Devtools ,你可以看到每个组件的 props、data 和计算属性。你还可以查看组件的事件监听器和应用程序的整体状态。这些都是以使 Vue Devtools 成为 Vue.js 的最佳调试工具的原因。 ### 回答3: Vue Devtools 是一个 Vue.js 应用程序的调试和开发工具,有助于开发者调试 Vue 应用程序的界面和状态,它提供了一个直观的、基于组件的用户界面,让开发者更方便地检查数据和组件的状态、编辑组件的数据和调试应用程序Chrome 浏览器是最广泛使用的浏览器之一,许多开发者习惯在 Chrome 使用开发工具和插件,下面我们来介绍如何在 Chrome 安装 Vue Devtools。 安装步骤: 1.首先,你需要安装最新版本的 Chrome 浏览器。 2.打开 Chrome Web Store,搜索 “Vue Devtools” 插件或访问 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 页面。 3.点击 “添加至 Chrome” 按钮,确认安装该插件。在插件安装完成后,你会看到 Vue Devtools 的图标出现在浏览器工具栏。 4.启动 Vue 应用程序,然后打开浏览器开发者工具,你会看到一个名为 “Vue” 的选项卡出现在开发者工具。 5.点击 “Vue” 选项卡,你将会看到 Vue Devtools 的面板,它允许你查看和编辑组件的状态、检查 Vue 实例、路由状态、事件和指令等。 6.如果你使用的是 Vue.js 3.0,你需要将开发者工具与最新版本的 Vue.js 一起使用,你可以从 Chrome 开发者工具面板的 “设置” 选项卡下载最新的 Vue.js 版本。 总结: 在 Chrome 浏览器安装 Vue Devtools 可以更方便、快捷地调试 Vue.js 应用程序安装过程简单,只需几个简单的步骤。Vue Devtools 提供了强大的调试功能,可以帮助开发者快速定位和解决问题。对于 Vue.js 的初学者或者有经验的开发者,Vue Devtools 都是一个强大的工具。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值