博主最近在研究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. tableview 删除cell

    正如在以前的帖子说,但是我在转到故事版(StoryBoard)教程之前,我有另外一个问题来回答. 我如何从UITableView删除一行呢? 当人们构建简单的表视图引用程序后,这是另一个常见的​​问题 ...

  2. 如何让升级时AppleHDA不再折腾

    ---前提--- 1. 你得用 Clover 引导 (......) 2. 开启 kernelcache (开了也能 inject kext,还能patch kext,速度又快,为啥不开) 3. 你的 ...

  3. 学c++有感

    第一次学习这么课程的时候,感觉课堂和教材的内容基本上都能接受和理解,但真正实际动手编写程序又觉得一片空白无从下手,可谓是“欲起平之恨无力.”一开始编写程序时,总是出现错误,从而产生了恐惧感,认为自己不 ...

  4. OJ 大整数减法

    描述 求两个大的正整数相减的差. 输入 共2行,第1行是被减数a,第2行是减数b(a > b).每个大整数不超过200位,不会有多余的前导零. 输出 一行,即所求的差. 样例输入 9999999 ...

  5. hihoCoder-1109-堆优化的Prim

    优先队列是由堆组成的,所以当我们使用优先队列对Prim进行优化时,就把这种优化叫做堆优化. 它的算法核心思想就是每次向后找边,每个pair存的都是下一个点,以及边权.我们对于已经走过的点就避开,这样就 ...

  6. UVa-227-谜题

    这题的话,我们读入的时候,可以用scanf单个读入字符,也可以用getchar函数来读入. scanf scanf读入串字符的时候,遇到空格.回车和TAB等空白字符就会停止读入,但是如果读入单个字符就 ...

  7. Python9-集合-day7

    集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的. 以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. 关系测试 ...

  8. uboot-imx RGB24分析

    在mx6q_sabrsd.c文件中 函数else if(strcmp(s, "YUV444") == 0) val = IPU_PIX_FMT_YUV444; else val = ...

  9. JavaScript正则表达式-或字符

    或字符是一个单竖线“|”,表示字符串只要匹配“|”连接的多个表达式中的任意一个. /ab|ac|bc/表示字符串匹配ab,或者匹配ac,或者bc

  10. spring-cloud-sleuth 学习资源

    https://www.baeldung.com/spring-cloud-sleuth-single-application https://howtodoinjava.com/spring-clo ...