网上有些贴子少了至关重要的一步导致我一直没装上， 切记！！install后还需build，且install和build都在vue-devtools文件夹内执行

github下载地址 点击跳转

具体步骤：

第一步：找到vue-devtools的github项目，并将其clone到本地 vue-devtools

git clone https://github.com/vuejs/vue-devtools.git

第二步：安装项目所需要的npm包（进入vue-devtools编译项目文件目录，很重要！！）

建议使用npm淘宝镜像按照依赖包。地址：http://npm.taobao.org/

推荐阅读文章：国内优秀npm镜像推荐及使用

命令行安装npm淘宝镜像：

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

　　

第三步：开始编译项目文件（使用的淘宝镜像就用cnpm！！！建议用此镜像，npm会出现各种问题）

cnpm run build

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

第五步：打开chrome浏览器扩展工具

点击开发者模式；

直接将shells——chrome文件夹直接拖到浏览器中就可以了，大功告成。

学习vue迈进了小小一步，你很棒哟！

vue学习记录（一）—— vue开发调试神器vue-devtools安装的更多相关文章

  1. Vue开发调试神器 vue-devtools

    Vue开发调试神器: vue-devtools 1. 下载Chrome扩展插件GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像 ...

  2. vue-devtools vue开发调试神器

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插 ...

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue学习笔记(五)——配置开发环境及初建项目

    前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...

  5. Vue学习记录第一天

    今天开始了Vue的学习,下面我就记录一下学习了什么. 1.什么是Vue? vue是一套基于javaScript的渐进式框架,是MVVM框架.View ——ViewModel——Model  其中Vie ...

  6. vue学习记录

    vue中常用的指令 v-model 双向数据绑定,一般用于表单元素 v-for 对数组或对象进行循环操作,使用的是v-for <!-- 普通循环 --><li v-for=" ...

  7. Vue学习记录-初探Vue

    写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...

  8. Vue学习记录（一）

    一.引入js文件(直接采用CDN): http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js 二.简单实例: (1)HTML代码: &l ...

  9. Vue学习记录（二）

    一.指令 指令是Vue.js中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM行为.当数据变化时,指令会依据设定好的操作对DOM进行修改,这样就可以只关注数据的变化,而不用去管理DOM的变化 ...

  10. Vue 学习记录（一）

    Vue 研究了一段时间,要学的东西挺多的. 一.基本指令 1.v-text:2.v-html:3.v-pre;4.v-cloak:5.v-once:6.v-if:7.v-else:8.v-else-i ...

随机推荐

  1. MySQL练习题及答案（复习）

    新建一个叫做 review 的数据库,将测试数据脚本导进去.(可以使用Navicat查询功能) /* Navicat MySQL Data Transfer Source Server : DB So ...

  2. 设置Python解析器

    如果同时安装了多个Python,如 Python2.7 和 Python3.7 .如果某些特殊原因(比如有些框架只能在Python2.7中使用),需要修改程序在 Python2.7 下运行,即可设置P ...

  3. js之标签操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. codeforces 373 A - Efim and Strange Grade(算数模拟)

    codeforces 373 A - Efim and Strange Grade(算数模拟) 原题:Efim and Strange Grade 题意:给出一个n位的实型数,你可以选择t次在任意位进 ...

  5. [bzoj1005][HNOI2008][明明的烦恼] (高精度+prufer定理)

    Description 自从明明学了树的结构,就对奇怪的树产生了兴趣......给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为N ...

  6. spoj 375 树链剖分模板

    /* 只是一道树链刨分的入门题,作为模板用. */ #include<stdio.h> #include<string.h> #include<iostream> ...

  7. 通过代码学习python之@property,@staticmethod,@classmethod

    URL: https://www.the5fire.com/python-property-staticmethod-classmethod.html #coding=utf-8 class MyCl ...

  8. wait、notify应用场景（生产者-消费者模式）

    Java实现生产者消费者的方式有:wait && notify.BlockingQueue.Lock && Condition等 wait.notify注意事项:(1) ...

  9. HDU——2588 GCD

    题目大意: 求1~N中与N的最大公约数大于M的个数 思路: 这个题是不是可以想到暴力枚举??对于每一组数据枚举与他的最大公约数大于m的数的个数. 是,这种做法没错误,但是保准你T成狗.... 我们至少 ...

  10. 在Electron中通过ffi模块实现JavaScript调用C++动态库

    目前在网上能搜到的JS调C++动态库的实现有两种,一种是通过开发Node.js addon模块的方式实现调用,这种对于我们已有的代码实现比较复杂,需要大量的开发,因此不适用:另一种是通过FFI模块,F ...