这里介绍一下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. 从零开始学习前端JAVASCRIPT — 1、JavaScript基础

    1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...

  2. 自己动手实现一个简单的JSON解析器

    1. 背景 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.相对于另一种数据交换格式 XML,JSON 有着诸多优点.比如易读性更好,占用空间更少等.在 ...

  3. Tomcat下的Server.xml配置文件详解

    自15年毕业到现在已经入行两年多了,一直以来没有深入的了解过tomcat的详细配置,只懂修改一下端口号.在网上找了些相关资料来支撑这篇文章,深入了解server.xml文件各配置的作用 <?xm ...

  4. protobuf java基础

    1:定义proto文件:   以一个地址薄为例,从建立一个.proto文件开始,为需要序列化的数据接口加入一个message属性,在message里面,为每一个字段指定名称和类型(算是IDL吧),如下 ...

  5. Java数据持久层框架 MyBatis之API学习五(Mapper XML 文件)

    对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...

  6. asm文件开头的assume意义

    body, table{font-family: Consolas; font-size: 13.5pt} table{border-collapse: collapse; border: solid ...

  7. mysql超出最大连接数解决方法

    遇到mysql超出最大连接数,相信不少人第一反应就是查看mysql进程,看有没有慢查询,当然这个做法是完全正确的!但是很多时候真正的问题不在这里.今天有遇到同样的问题,一味查看mysql进程和慢查询日 ...

  8. git log 查看指定文件的提交记录

    使用git log除了可以看整个仓库的提交记录外,还可以指定某个文件的提交记录. 1. 查看指定文件的历史提交记录 命令: git log -- <file> 说明:只需要指定文件名称. ...

  9. python_递归_斐波那契

    什么是递归算法? -- 函数自己调用自己本身 -- 本质上return返回的时候,总是把一个参数传入到自己函数本身,让函数反复调用下去 递归有何特点? -- 必有一个结束条件 没有结束条件,递归就没有 ...

  10. .net Core连接MongoDB

    前两天在学习MongoDB相关的知识,做了个小Demo,大概是省份里面有多少所学校 连接MongoDB首先要通过Nuget添加一个MongoDB的包,下载此包 安装完毕后开始写代码了,创建一个省份实体 ...