博主最近在研究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. graphviz 布局和子图,表格教程

    有了这三个利器,就搞定架构图了. 子图间互相调用要开启 http://graphviz.org/pdf/dotguide.pdf

  2. noip_最后一遍_1-数学部分

    它就是要来了 noip数论一般会以三种形式呈现 注 码风可能有些毒 (有人说我压行qwq) 大概保持标准三十五行左右 为什么是三十五行呢 因为我喜欢这个数字 我喜欢三十五而已(足球球衣也会用这个号哒) ...

  3. bzoj5138 [Usaco2017 Dec]Push a Box

    题目描述: bz luogu 题解: 暴力可以记录$AB$位置转移,这个时候状态是$n^4$的,无法接受. 考虑只记录$A$在$B$旁边时的状态,这个时候状态时$n^2$的. 所以说转移有两种,一种是 ...

  4. MySQL binlog-server搭建

    MySQL binlog-server搭建 binlog在备份中起着至关重要的作用,备份binlog文件时,只能先在本地备份,然后才能传送到远程服务器上.从MySQL5.6版本后,可以利用mysqlb ...

  5. 【php】 布尔值判断

    当转换为 boolean 时,以下值被认为是 FALSE: 布尔值 FALSE 本身 整型值 0(零) 浮点型值 0.0(零) 空字符串,以及字符串 "0" 不包括任何元素的数组 ...

  6. Web框架之Django_06 模型层了解(F查询、Q查询、事务、update和save、only和defer、choice属性、bulk_create)

    摘要: F查询 Q查询 事务 一.F查询 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个我们自己设定的常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢?Django 提供 F() 来 ...

  7. solr DIH 设置定时索引

    1 web.xml中加入 web.xml所在目录 /opt/solr-7.7.1/server/solr-webapp/webapp/WEB-INF <listener> <list ...

  8. TSOJ--方格上的路径

    题目描述: 试求 n × m 的方格图形中,从点 (0, 0) 到点 (n, m) 的最短路径数目. 输入描述: 有多组测试数据.输入的第一行为一个正整数 N,表示接下来有 N 组测试数据. 在接下来 ...

  9. 关于Linux下的环境变量

    一.交互式shell和非交互式shell 要搞清bashrc与profile的区别,首先要弄明白什么是交互式shell和非交互式shell,什么是login shell 和non-login shel ...

  10. 【C#】穿马甲的流程控制语句

    导读:话说当年选择.顺序.循环语句风靡整个VB,今年发现,那几个东西又换了件衣服,跑到了C#里蹦跶.开始,真被这几个穿马甲的吓了一跳,没看出来这是老伙伴.突然有一天,瞥见了脱下新衣的孩子们.哈哈哈哈. ...