网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!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. 个人 NABCD

    失物招领APP个人NABCD Need: 在朋友圈中,QQZone中我们长仓可以看到失物招领这方面的信息,又没有学校中专门使用的失物招领平台,所以根据这个信息,决定开发一款解决这方面问题的APP来满足 ...

  2. exists关键词和case表达式

    首先声明一下,exist和case没有必然联系,这里只是为了一起整理个笔记. EXIST谓词 如果存在对应的记录,返回TRUE.否则,返回FALSE.*实际使用中,即使不适用exist,基本也可以使用 ...

  3. Placing Lampposts

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=91212#problem/E #include <iostream> #inc ...

  4. js中复制功能总结

    目前copy主流有四种方式:ZeroClipboard,Clipboard.js,execCommand,setData,clipboardData 概况: ZeroClipboard 就是常说的Fl ...

  5. SHA256兼容性

    SHA-2是一个加密哈希(Cryptographic Hash)函数的一个集合,包括SHA-224,SHA256和SHA-512.在SHA-256中的256代表哈希(Hash)输出或者摘要的位尺寸(即 ...

  6. Maven学习总结(31)——Maven坐标详解

    Maven的一个核心的作用就是管理项目的依赖,引入我们所需的各种jar包等.为了能自动化的解析任何一个Java构件,Maven必须将这些Jar包或者其他资源进行唯一标识,这是管理项目的依赖的基础,也就 ...

  7. ZOJ 1654 Place the Robots

    题目大意: 在空地上放置尽可能多机器人,机器人朝上下左右4个方向发射子弹,子弹能穿过草地,但不能穿过墙, 两个机器人之间的子弹要保证互不干扰,求所能放置的机器人的最大个数 每个机器人所在的位置确定了, ...

  8. 最小生成树 D - Constructing Roads

    There are N villages, which are numbered from 1 to N, and you should build some roads such that ever ...

  9. Ubuntu 16.04设置开机启动应用程序

    在终端通过以下命令进行设置,Dash已经搜索不到Startup了: gnome-session-properties 或者直接在Dash中搜索:gnome-session

  10. PHP与WCF第一次亲密接触

    接触PHP第二天,要求PHP访问WCF服务 着实痛苦,无从下手啊. 在网上查了很多资料知道PHP访问WCF很方便 <?php $client = new SoapClient ( 'http:/ ...