vue.js的devtools安装

安装

1.github下载地址:https://github.com/vuejs/vue-devtools

2.下载好后进入vue-devtools-master工程  执行npm install ----->npm run build.

3.修改manifest.json 中的persistent为true

4.打开谷歌浏览器设置--->扩展程序--》勾选开发者模式---》添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此恭喜已经安装成功!!!

5.打开自己的vue项目中,如果是有vue-cli构建的项目,执行npm run dev,打开http://localhost:8080/ 服务器调试地址;至此完成devtools的安装;

使用

打开vue项目,在控制台选择vue:
 
5. 可操作组件查看信息变化(例如分页组件)
 选择第一页:
 
 
 选择最后一页:
 
 
 
 
 
 

Vue中devtools安装使用的更多相关文章

  1. vue.js devtools安装

    在调试的时候chrome会提示安装vue devtools,我以为是要在chrome的程序商店直接安装,但是国内对谷歌的和谐,无法访问谷歌商店内容 官方有源代码,可以下载下来自行编译安装 官方地址:h ...

  2. vue.js not detected 解决办法-vue.js devtools 安装

    国外网站:https://www.crx4chrome.com/ 国内网站:http://www.cnplugins.com/ http://chromecj.com/web-development/ ...

  3. 在vue中如何安装使用Vant

    ---恢复内容开始--- Vant中文文档地址:https://youzan.github.io/vant-weapp 1.创建Vue项目之后,运行安装命令:13:47:04 npm i vant - ...

  4. Vue安装以及Vue项目创建以及Vue Devtools安装

    这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...

  5. 安装Vue.js devtools

    1.下载安装 https://github.com/vuejs/vue-devtools#vue-devtools 通过以上地址下载安装包,解压以后进入文件,按住shift,点击鼠标右键打开命令窗口 ...

  6. vue 中安装使用sass 报错遇到的问题整理

    不出错的情况下,正常安装: 1.安装包: npm install node-sass --save-dev npm install sass-loader --save-dev (sass-loade ...

  7. webpack+vue中安装使用vue-layer弹窗插件

    1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...

  8. 解决游览器安装Vue.js devtools插件无效的问题

    一: 打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色 解决方案:  1.我们先看看Vue.js devtools是否生效,打开Bilibili(https://www.bilib ...

  9. 添加谷歌拓展程序 vue.js devtools过程中的问题

    在用vue做项目过程中,需要用到vue.js devtools,在从github上面clone下来代码,然后再npm install ,过程报错,然后更新npm包也是会有问题,以下是install的问 ...

随机推荐

  1. dropwizard问题记录1:如何进行mvn package打包,如何在项目目录下运行

    dropwizard的helloworld入门教程,跟着教程一步步写很容易,但是最后打包时暴露了自己底子太差的缺陷 mvn package操作 之前工作中完全没有接触过这种打包方式,都是直接打war包 ...

  2. 【Java TCP/IP Socket】深入剖析socket——TCP套接字的生命周期

    建立TCP连接      新的Socket实例创建后,就立即能用于发送和接收数据.也就是说,当Socket实例返回时,它已经连接到了一个远程终端,并通过协议的底层实现完成了TCP消息或握手信息的交换. ...

  3. java.nio.ByteBuffer 以及flip,clear及rewind区别

    Buffer 类 定义了一个可以线性存放primitive type数据的容器接口.Buffer主要包含了与类型(byte, char…)无关的功能. 值得注意的是Buffer及其子类都不是线程安全的 ...

  4. uibutton去掉点击后背景有阴影的方法

    1,将normal和highlight两种方式都设置上图片即可 UIButton *goback = [[UIButton alloc]initWithFrame:CGRectMake(5.0f, 5 ...

  5. android 获得屏幕状态

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  6. 使用nginx转发不了静态文件

    从django runserver的请求来看,都收不到静态文件请求, 查看firefox的web console请求,发现都是403 然后发现nginx不在当前用户组,并且当前用户的项目的读写权限是7 ...

  7. leetcode最长递增子序列问题

    题目描写叙述: 给定一个数组,删除最少的元素,保证剩下的元素是递增有序的. 分析: 题目的意思是删除最少的元素.保证剩下的元素是递增有序的,事实上换一种方式想,就是寻找最长的递增有序序列.解法有非常多 ...

  8. C++中的sort函数

    (一)为什么要用c++标准库里的排序函数 Sort()函数是c++一种排序方法之一,学会了这种方法也打消我学习c++以来使用的冒泡排序和选择排序所带来的执行效率不高的问题!因为它使用的排序方法是类似于 ...

  9. 三期_day05_Dao层的准备工作_II

    工作文件夹: 实体类:UserInfo.java package com.yc.crm.entity; import java.util.Date; public class UserInfo { p ...

  10. 阿里云 ubuntu 14.04 模板上安装 docker

    ubuntu 14.04 的内核是 3.13 ,所以内核不用升级. 安装过程例如以下: # apt-get update # apt-get install apt-transport-https # ...