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. Tomcat7/8开启WebDAV的支持

    WebDAV是一种超文本传输协议,Tomcat默认是支持WebDAV的,且默认为禁用状态. 更多详细信息,请参考: https://zh.wikipedia.org/wiki/WebDAV http: ...

  2. Python奇技

    本文目录 1. 显示有限的接口到外部 2. with的魔力 3. filter的用法 4. 一行作判断 5. 装饰器之单例 6. staticmethod装饰器 7. property装饰器 8. i ...

  3. UVa 10295 - Hay Points

    题目:有非常多工人.相应一个能力描写叙述表,每种能力有一个权值,求每一个工人的能力值. 分析:字符串.hash表,字典树.利用散列表或者字典树存储相应的单词和权值.查询就可以. 说明:注意初始化,计算 ...

  4. LeanCloud SDK 中秒杀70%问题的调试方法

    非常多同学在LeanCloud上遇到的不少问题,事实上能够自我解决的,如今介绍一下LeanCloud上的调试方法. LeanCloud 是通过 REST API来进行前后端分离的.这意味着当出现故障的 ...

  5. js 验证 输入值 全是数字

    1.使用isNaN()函数 isNaN()的缺点就在于 null.空格以及空串会被按照0来处理 NaN: Not a Number /** *判断是否是数字 **/ function isRealNu ...

  6. mybatis一对多

    mapper.xml <mapper namespace="com.oracle.dao.one2manyDao"> <resultMap type=" ...

  7. Arrays.asList基本用法

    目录 说明 基本用法 陷阱 改观 说明 asList 是 java.util.Arrays 类的一个方法 public static <T> List<T> asList(T. ...

  8. @Transactional 无效的解决方案

    1 .在需要事务管理的地方加@Transactional 注解.@Transactional 注解可以被应用于接口定义和接口方法.类定义和类的 public 方法上 . 2 . @Transactio ...

  9. Android app身体质量指数(BMI)

    针对中国人的标准身高体重来測算,提示您身体的健康状况. 提示您是否应该锻炼.节食或者补充营养等.第一时间知道您的健康状况. 下载地址:http://android.myapp.com/myapp/de ...

  10. 文件宝局域网传输/播放功能使用帮助(Mac电脑用户)

    使用局域网账户密码登录,可以访问电脑上所有文件 使用游客无账户密码登录,只能访问电脑上指定共享文件夹的文件. 怎么设置共享文件夹请参考: 1.打开“共享”偏好设置(选取苹果菜单 >“系统偏好设置 ...