网上有些贴子少了至关重要的一步导致我一直没装上， 切记！！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. NFS文件服务

    安装NFS服务 Yum install nfs-utils –y 2.关闭防火墙 service iptables stop 3./etc/exports NFS服务配置文件 /home/share ...

  2. 57.fielddata预加载机制以及序号标记预加载

    如果真的要对分词的field执行聚合,那么每次都在query-time的同时由es生成fielddata并加载到内存中来,速度可能会比较慢,性能很差,改善性能的方式就是预先生成fielddata值并加 ...

  3. LINUX-JPS工具

    JPS工具 jps(Java Virtual Machine Process Status Tool)是JDK 1.5提供的一个显示当前所有java进程pid的命令,简单实用,非常适合在linux/u ...

  4. Python随笔day02

    算术运算符 +   -   *  **   /   //   % 比较运算符 >  <  ==   >=   <=   != Python中提供一种更加简单的比较方式. 当判断 ...

  5. 【Codeforces 1030D】Vasya and Triangle

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 参考这篇题解:https://blog.csdn.net/mitsuha_/article/details/82825862 为什么可以保证m ...

  6. Codeforces 263A. Appleman and Easy Task

    A. Appleman and Easy Task time limit per test  1 second memory limit per test  256 megabytes input  ...

  7. HDU 1114 完全背包问题的转化

    题目大意: 根据存钱罐中钱的重量,和每一种钱对应的重量和价值,判断钱能否塞满这个重量,如果能,输出得到的最小价值 这个问题就是要把它和背包问题连接起来,这里钱取得数目是无穷的,所以这里只需要用到完全背 ...

  8. NOIP1999 邮票面值设计

    题目描述 Description 给定一个信封,最多只允许粘贴N张邮票,计算在给定K(N+K≤40)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值MAX,使在1-MAX之 ...

  9. java多线程编程核心技术（四）--Lock的使用

    1.jdk1.5中新增了ReentrantLock类,该类也可以实现synchronized线程之间同步互斥的效果. 2.jdk1.5中新增了Condition类.在Lock对象中可以创建多个Cond ...

  10. D - Doing Homework 状态压缩 DP

    Ignatius has just come back school from the 30th ACM/ICPC. Now he has a lot of homework to do. Every ...