Chrome 浏览器安装Vue插件方法 (十分详细)
博主最近在研究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插件方法 (十分详细)的更多相关文章
- 【原】无脑操作:Chrome浏览器安装Vue.js devtool
学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...
- chrome浏览器安装vue调试器vue-devtools
chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053
- Chrome浏览器安装vue-devtools插件
插件功能:方便在浏览器调试vue代码 插件git地址:https://github.com/vuejs/vue-devtools 因为chrome要FQ,打不开,所以不能直接进去安装拓展程序,只能选择 ...
- Chrome 浏览器安装 ChroPath 插件
1.下载地址 http://www.cnplugins.com/devtool/chropath/download.html 2.安装方法 a.把下载的文件更改后缀名变为压缩包,然后解压到本地:如下图 ...
- 更改Chrome浏览器安装位置的方法
因为Google Chrome独特的优势,我们很多人都在使用它,但同时我们也会发现它是默认安装在我们的系统盘的,那么是否就不能修改其安装路径了呢?其实不然,这里介绍一种方法,亲测可行. 一.正常安装 ...
- ubuntu下chrome浏览器安装flash插件(pepperflashplugin-nonfree)
安装前说明: ubuntu的Google 已经不能使用Adobe Flash了,需要用PepperFlashPlayer来替代 Adobe Flash才行. 安装步骤: 1.安装pepperflash ...
- chrome浏览器的VUE调试插件Vue.js devtools
chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...
- 安装浏览器的vue插件
安装浏览器的vue插件步骤: 1.在浏览器中打开 https://github.com/vuejs/vue-devtools Clone or download vue-devtools. 2.解压 ...
- chrome中安装Vue调试工具vue-devtools
一.前言 vue-devtools是一款基于浏览器的插件,用来调试vue应用.本篇文章将要总结的是如何在chrome中安装Vue的调试工具vue-devtools. 首先能想到的第一种方法就是直接在c ...
随机推荐
- 八 个优秀的 jQuery Mobile 教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.虽然j ...
- java在线聊天项目 实现基本聊天功能后补充的其他功能详细需求分析 及所需要掌握的Java知识基础 SWT的激活方法,swt开发包下载,及破解激活码
补充聊天项目功能,做如下需求分析: 梳理项目开发所需的必要Java知识基础 GUI将使用更快速的swt实现 SWT(Standard Widget Toolkit) Standard Widget T ...
- 使用 HTML5 Geolocation 构建基于地理位置的 Web 应用学习网站分享
HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...
- web开发框架之DRF
RESTful架构解释: # Representational State Transfer 表现层状态转化 到底什么是RESTFul架构: 如果一个架构符合REST原则,就称它为RESTful架构. ...
- (转)在Xcode 7上直接使用Clang Address Sanitizer
原文地址: http://www.cocoachina.com/ios/20150730/12830.html WWDC 2015上,除了Swift 2.0外,还有一个令人激动的消息:可以直接在Xco ...
- IRQ中断处理流程
基于Linux2.6.30.4分析IRQ中断的处理流程. 1.中断入口 /* arch/arm/kenel/entry-armv.S*/ b vector_irq + stubs_offset 2.v ...
- MySql update inner join!MySql跨表更新 多表update sql语句?如何将select出来的部分数据update到另一个表里面?
项目中,评论数,关注数等数据,是实时更新的.+1,-1 这种. 有的时候,可能统计不准确. 需要写一个统计工具,更新校准下. 用Java写SQL和函数,代码很清晰,方便扩展,但是太慢了. 为了简单起见 ...
- pymongo使用方法
MongoDB存储 在这里我们来看一下Python3下MongoDB的存储操作,在本节开始之前请确保你已经安装好了MongoDB并启动了其服务,另外安装好了Python 的PyMong ...
- B树总结
B树是一种平衡的多路查找树,一棵m阶B树或为空树,或满足下列特性: 1. 每个节点之多有m棵子树 2. 若根节点不是叶子节点,则至少有两颗子树 3. 除根之外所有非终端节点至少有[m/2]可子树 ...
- 大数据学习——kafka+storm+hdfs整合
1 需求 kafka,storm,hdfs整合是流式数据常用的一套框架组合,现在 根据需求使用代码实现该需求 需求:应用所学技术实现,kafka接收随机句子,对接到storm中:使用storm集群统计 ...