这里介绍一下vue-devtools的安装方法之一:

chrome浏览器的应用商店不能直接访问(需要跨域),所以直接应用商店安装的方法就行不通了。

1、到github主页去下载安装:

git clone https://github.com/vuejs/vue-devtools

2、继续执行以下命令(cnpm国内镜像下载更快):

cd vue-devtools       //进入当前目录
cnpm install        //下载依赖
npm run build       //打包

  

3、进入chrome浏览器添加扩展程序:

  chrome浏览器>> 更多工具>> 扩展程序,进入下图页面:

    (1)勾选开发者模式

    (2)点击加载已解压的扩展程序(选择地址为:安装路径>> vue-devtools>>shells>>chrome),将chrome文件夹导入

    (3)点击确定就能安装成功

4、安装成功的页面如下:

  

5、此时地址栏右侧出现vue的图标,在vue项目下图标变为亮色,切能够在开发者工具中进行vue的调试:

你安装成功了吗?快使用vue-devtools进行vue项目开发吧!

vue调试工具之 vue-devtools的安装的更多相关文章

  1. vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法 https://www.jb51.net/article/150335.htm 本文主要介绍 vue的调试工具 vue-devtools 的安装和 ...

  2. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  3. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

  4. Vue学习笔记-vue调试工具vue-devtools安装及使用

    一  使用环境: windows 7 64位操作系统 二  vue调试工具vue-devtools安装及使用 1.下载: 百度中查找  "vue-devtools下载"  找到最新 ...

  5. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

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

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

  7. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  8. Vue.js 2.x笔记:安装与起步(1)

    1. 环境准备 Vue是一套用于构建用户界面的渐进式框架,设计为可以自底向上逐层应用.Vue 的核心库只关注视图层. 安装Node.js,下载:https://nodejs.org/ 查看安装: $ ...

  9. Vue学习笔记之vue-cli脚手架安装和webpack-simple模板项目生成

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一. ...

  10. Vue学习之vue-cli脚手架下载安装及配置

    Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html 1. 先下载node.js,下载地址:ht ...

随机推荐

  1. POJ 3790 最短路径问题(Dijkstra变形——最短路径双重最小权值)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3790 Problem Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你 ...

  2. Kafka集群的搭建

    Kafka集群的搭建 node1   node2   node3 kafka须用版本(kafka-0.8.2.2),否则不兼容spark1.6 1.启动zookeeper集群node1   node2 ...

  3. PHPMailer发送邮件中文附件名是乱码

    可能使用了PHPMailer发送邮件的朋友带中文附件名时会出现乱码,下面我来介绍一个解决办法. 比如我们要发送的附件是"测试.txt",如果在添加附件的时候强制使用指定文件名的方式 ...

  4. Thrift之TProtocol系列TCompactProtocol解析

    TCompactProtocol协议作为TBinaryProtocol协议的升级强化版,都作为二进制编码传输方式,采用了一种乐器MIDI文件的编码方法(wiki,百度下),简单介绍下两种思想: 1: ...

  5. [one day one question] nodejs require 缓存,无法检测文件变化

    问题描述: nodejs require 缓存,无法检测文件变化,当文件require引入后,当文件发生变动后即使再次使用require,返回的依然是第一次引入的文件内容,这怎么破? 解决方案: de ...

  6. linux_系统调优

    linux如何调优? 1. 关闭SELLinux功能,美国国家安全局对于强制访问控制实现,生产场景也是关闭 cat /etc/selinux/config | grep '^SELINUX=' # 查 ...

  7. linux如何自动获取ip地址

    第一步:激活网卡 系统装好后默认的网卡是eth0,用下面的命令将这块网卡激活. # ifconfig eth0 up 第二步:设置网卡进入系统时启动 想要每次开机就可以自动获取IP地址上网,就要设置网 ...

  8. Hi,WeTest限免开放Android Oreo云真机,Android 8.1可开测!

    2017年末,谷歌在印度正式发布 Android Oreo 8.1,向实现"为所有人打造由 AI 驱动的全覆盖移动平台"这一愿景迈进.Android 8.1在引入对 Android ...

  9. WebSphere--用户简要表

     Application Server 含有 com.ibm.servlet.personalization.userprofile 软件包中的类,这些类使维护关于 Web 站点访问者的持久信息和利用 ...

  10. 豹哥嵌入式讲堂:ARM知识概要杂辑(1)- 内核架构编年史

    众所周知,ARM公司是一家微处理器行业的知名企业,ARM公司本身并不靠自有的设计来制造或出售CPU,而是将处理器架构授权给有兴趣的厂家.这些厂家基本涵盖了全球领先的知名半导体企业.软件和OEM厂商:T ...