vue devtools的安装与使用教程

一.在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools

二.解压到本地的某盘

三.用你的npm中进入该文件夹下

四.依次输:

1:npm install

2:npm run build         (这一步一定不要忘了，没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件夹,如下图)

五：修改shells>chrome文件夹下的mainifest.json 中的persistant为true

六：我们找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中，完成安装。

（注意：如果我们没有执行第四部的npm run build，在这里会报错：无法加载背景脚本"build/background.js"）

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

八：我们在打开本地的其他项目时，就不需要在vue-devtools文件夹下执行npm run dev了，因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。

总结

以上所述是小编给大家介绍的vue devtools的安装与使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue DevTools调试工具的使用

    Vue DevTools调试工具的使用

    因为工作要求,目前主要在用Vue.js技术栈做开发,调试是必不可少的,这里会用的Vue DevTools的调试工具,问题就出在这里,当用Vue DevTools做调试时,很多时候都不能用,提示没有监测到Vue,这让工作效率瞬间拉低了. 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 修正Vue DevTools

  • vue开发调试神器vue-devtools使用详解

    vue开发调试神器vue-devtools使用详解

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插件 GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像按照依赖包 地址:http://npm.taobao.org/ 命令行安装npm淘宝镜像: $ npm install -g cnpm --registry=https://

  • 详解vue.js的devtools安装

    详解vue.js的devtools安装

    安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build. 3.修改manifest.json 中的persistent为true 4.打开谷歌浏览器设置--->扩展程序-->勾选开发者模式--->添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此恭

  • Vue调试神器vue-devtools安装方法

    Vue调试神器vue-devtools安装方法

    什么是vue-devtools? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装方式 1.chrome商店直接安装: vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了.不过要注意的一点就是,需要翻墙才能下载. 2.手动安装: 第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools g

  • vue-devtools的安装步骤

    vue-devtools 是一款基于chrome游览器的插件,用于调试vue应用,由于国内不能访问谷歌商店(要科学上网),所以安装比较麻烦,写个文章记录一下. 第一步 将vue-devtools clone到本地 git clone https://github.com/vuejs/vue-devtools.git 第二步 在vue-devtools目录下安装依赖包 cd vue-devtools npm install 第三步 编译代码 npm run build 第四步 修改 vue-dev

  • 分享vue.js devtools遇到一系列问题

    分享vue.js devtools遇到一系列问题

    使用vue.js devtools遇到的磕磕绊绊,具体如下 1.首先我们需要在谷歌浏览器扩展程序中点击获取更多 2.在搜索框输入vue.js devtools,点击安装此扩展 3.检查扩展是否开启 我们需要检测我的扩展是否开启,允许文件地址是否访问,如果没有勾选文件地址我们就必须在服务器上访问. 4.修改插件配置文件 复制代码 代码如下: C:\Users\zhanglei\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdo

  • vue devtools的安装与使用教程

    一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools 二.解压到本地的某盘 三.用你的npm中进入该文件夹下 四.依次输: 1:npm install 2:npm run build         (这一步一定不要忘了,没有执行这一步的话,项目文件夹shells>chrome文件夹里会少一个src文件夹,如下图) 五:修改shells>chrome文件夹下的mainifest.json 中的persistant为tr

  • 超级详细的Vue安装与配置教程

    超级详细的Vue安装与配置教程

    目录 一.下载和安装Vue 二.创建全局安装目录和缓存日志目录 三.配置环境变量 1. 环境变量---用户变量---选中Path---点编辑 2. 环境变量---系统变量---新建 三.安装vue 1. 安装vue.js 2. 安装webpack模板 3. 安装脚手架vue-cli 4. 安装vue-router 四.我的第一个的 vue-cli应用程序 总结 一.下载和安装Vue 官网下载地址Download | Node.js 选择适合自己的版本,推荐LTS,长久稳定版本. 我这里选择的是W

  • Vue.js开发环境快速搭建教程

    Vue.js开发环境快速搭建教程

    Vue.js 现在在后端.前端.微信.移动端Web非常流行,今天简单模拟Vue.js快速安装: 1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install 估计会非常慢,我们可以使用淘宝NPM镜像下载安装:https://npm.taobao.org/ ##安装npm## sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装

  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

  • vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法

    本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 3.修改manifest.json文件 把"persistent":false改成true

  • Vue.js 十五分钟入门图文教程

    TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很早就支持 TypeScript,但配置起来比较麻烦,幸好有了 Vue CLI 3.0.安装好 vue-cli 之后,使用 vue create 项目名称 来创建项目,vue 脚本手架自动创建以项目名称命名的目录. vue-cli 3 生成的项目结构比较科学,尤其是通过 components 和views 将作为控件的组件和作为页面的组件分离开来,

  • vue框架搭建之axios使用教程

    前后端数据交互作为项目最基础需求(静态的除外),同时也是项目中最重要的需求. 本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步 使用说明 1.安装 cnpm install axios --save-dev 2.引入 main.js 文件引入: import Vue from 'vue'//引入vue import axios from 'axios'//引入axios Vue.prototype.$axios = axios;//把axios挂载到vue上 3

  • 使用Vue开发动态刷新Echarts组件的教程详解

    需求背景:dashboard作为目前企业中后台产品的"门面",如何更加实时.高效.炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题.今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件. 准备工作 项目结构搭建 因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建. npm install -g vue-cli vue init webpack vue-charts cd

  • vue Cli 环境删除与重装教程 - 版本文档

    vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的命令. vue-cli 的 卸载: 如果原来已经安装了vue-cli的话需要先卸载原来的安装 npm uninstall vue-cli -g vue-cli 的 安装: 1. 版本低于3.0 (vue-cli<3.0) npm

随机推荐