如何安装 vue-devtools 浏览器插件

LeviDing 发布于2019-08-22 15:37 / 3260人阅读

摘要：前言由于是数据驱动的，所以这就存在在开发调试中查看结构并不能解析出什么。但是借助插件，我们就可以很容易的对数据结构进行解析和调试。六如果需要更详细的图文介绍请看文章

前言：

由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么。

但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。

一、下载chrome扩展插件

GitHub下载地址：

https://github.com/vuejs/vue-...

建议使用npm淘宝镜像按照依赖包

地址：http://npm.taobao.org/

命令行安装npm淘宝镜像：

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

之后我们就可以使用cnpm代替npm按照依赖包了，npm安装依赖包确实太慢了.....

二、cnpm install

下载完成后打开命令行cmd进入vue-devtools文件夹，按照依赖包并npm run build

三、更改manifest.json json

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

四、扩展chrome插件

1.打开chrome浏览器，打开设置>点击或者程序>点击开发者模式

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

五正常调试VUE项目

打开个vue写的项目，f12打开调试工具即可进行vue项目的调试。

六如果需要更详细的图文介绍请看csdn文章

云服务器 GPU云服务器浏览器插件 IE浏览器插件谷歌浏览器插件基金管理浏览器插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93599.html

vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

enali 2019-08-23 14:14 评论0 收藏0
Vue devtools工具安装 Chrome安装Vue devtools 教程步骤

摘要：已安装好的插件。三以后版本安装比如版本版本获取到，安装后的内容，后续按照步骤一操作即可。 Vue devtools工具安装 Chrome安装Vue devtools 教程步骤一、安装步骤 1、下载地址：GitHub - vuejs/devtools at v5.1.1 ...

yiliang 2021-10-11 10:57 评论0 收藏0