博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程:

1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://github.com/vuejs/vue-devtools

2.下载后解压

3.然后通过npm下载相关依赖,可能有些同学没有安装npm,博主也是,这里介绍下安装npm的方法。

 从node.js中文网站下载node.js,里面包含npm

4.下载完成直接安装,因为博主已安装成功就不截图,验证npm是否安装成功命令,打开CMD输入

  node -v

  npm -v

如果出现对应版本号,说明安装成功

5.下载cnpm,因为vue插件要通过cnpm下载,cmd命令如下:

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

6.查看cnpm版本

cnpm -v

7.好了,接下来通过cnpm安装vue插件依赖

cmd命令:

先定位到刚才下载的vue插件目录里,博主安装在D盘,之后输入cnpm install。

D:\vue\vue-devtools-dev>cnpm install

下载时间比较长。

8.下载成功后接着输入npm run build  出现如下界面表示成功

9.接着修改manifest.json 里persistent 字段 为true

10.如下

11.在Chrome中 打开地址chrome://extensions/  将D:\vue\vue-devtools-dev\shells\chrome文件夹拖入Chrome中

12.至此插件才算安装完成

13.访问一个vue页面  按F12开发者工具,可以看到VUE控制台

希望能帮助到各位同学!

Chrome 浏览器安装Vue插件方法 (十分详细)的更多相关文章

  1. 【原】无脑操作:Chrome浏览器安装Vue.js devtool

    学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...

  2. chrome浏览器安装vue调试器vue-devtools

    chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053

  3. Chrome浏览器安装vue-devtools插件

    插件功能:方便在浏览器调试vue代码 插件git地址:https://github.com/vuejs/vue-devtools 因为chrome要FQ,打不开,所以不能直接进去安装拓展程序,只能选择 ...

  4. Chrome 浏览器安装 ChroPath 插件

    1.下载地址 http://www.cnplugins.com/devtool/chropath/download.html 2.安装方法 a.把下载的文件更改后缀名变为压缩包,然后解压到本地:如下图 ...

  5. 更改Chrome浏览器安装位置的方法

    因为Google Chrome独特的优势,我们很多人都在使用它,但同时我们也会发现它是默认安装在我们的系统盘的,那么是否就不能修改其安装路径了呢?其实不然,这里介绍一种方法,亲测可行. 一.正常安装 ...

  6. ubuntu下chrome浏览器安装flash插件(pepperflashplugin-nonfree)

    安装前说明: ubuntu的Google 已经不能使用Adobe Flash了,需要用PepperFlashPlayer来替代 Adobe Flash才行. 安装步骤: 1.安装pepperflash ...

  7. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  8. 安装浏览器的vue插件

    安装浏览器的vue插件步骤: 1.在浏览器中打开 https://github.com/vuejs/vue-devtools Clone or download  vue-devtools. 2.解压 ...

  9. chrome中安装Vue调试工具vue-devtools

    一.前言 vue-devtools是一款基于浏览器的插件,用来调试vue应用.本篇文章将要总结的是如何在chrome中安装Vue的调试工具vue-devtools. 首先能想到的第一种方法就是直接在c ...

随机推荐

  1. java常用流处理工具StreamTool 常见的InputStream流转字符串, 转字节数组等等

    ava 常用流处理工具 StreamTool ,常见的InputStream 流转字符串, 转字节数组等等 **应用场景: ** 1. 文件上传 2. js / css / img 等文件读取输出. ...

  2. 获取 request 中 json 数据

    import java.io.IOException; import javax.servlet.http.HttpServletRequest; /** * request 对象的相关操作 * @a ...

  3. 高度自适应的bug

    今天在整理之前IFEde作业,发现有个简历的效果好像没实现.于是想把样式改成作业要求的那样. 作业要求是这样的: 右边栏昨晚高度是839px,我想把左边栏做成高度自适应的.但是没成功.现在我把这个问题 ...

  4. (26)zabbix脚本报警介质自定义(钉钉)

    zabbix机器人告警配置 首先在钉钉中创建一个群然后设置群机器人添加自定义机器人(webhook...) 添加后复制其中的webhook地址到报警脚本dingding.py中的webhook=... ...

  5. VC++中char和TCHAR之间转换

    char:计算机编程语言(c.c++.java等)中可容纳单个字符的一种基本数据类型. TCHAR:为了满足Unicode编码,对char的扩展,即_T(“str”)表示TCHAR类型 C++支持两种 ...

  6. Python的第二堂课(2)

    一.初探python print('Hello,靓仔!') 不得不说,这句话还是so real的(逃 二.Python中的变量 1.什么是变量?(what) 量:记录某种现实世界中事物的某种状态: 变 ...

  7. python基础学习笔记——闭包

    闭包这个概念好难理解,身边朋友们好多都稀里糊涂的,稀里糊涂的林老冷希望写下这篇文章能够对稀里糊涂的伙伴们有一些帮助~ 请大家跟我理解一下,如果在一个函数的内部定义了另一个函数,外部的我们叫他外函数,内 ...

  8. C# 反射总结

    反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得每个成员的 ...

  9. Python学习案例

    例1.求101到200之间所有的质数,并打印总数. 说明:除去1和它本身之外,不能被其他数整除,就是质数. #!/bin/python #-*- coding:utf-8 -*- #使用集合法 l = ...

  10. iOS 唯一标示符 卸载后安装值不变

    Vindor标示符 (IDFV-identifierForVendor) 这种叫法也是在iOS 6中新增的,不过获取这个IDFV的新方法被添加在已有的UIDevice类中.跟advertisingId ...