vue的测试(Vue.js devtool)

1. 安装chrome插件:Vue.js devtools(https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN)

2. 下载vue-devtools (https://github.com/vuejs/vue-devtools)

3. 修改文件:vue-devtools-master/shells/chrome/manifest.json


1

2

3

4

"background": {

        "scripts": [ "build/background.js" ],

        "persistent"false

    },

改成:


1

2

3

4

"background": {

        "scripts": [ "build/background.js" ],

        "persistent"true

    },

4. 打开vue项目,在控制台选择vue:

5. 可操作组件查看信息变化(例如分页组件)

选择第一页:

选择最后一页:

时间: 2024-11-02 23:38:23

vue的测试(Vue.js devtool)的相关文章

Vue 浅谈前端js框架vue

Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄 的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular 开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的

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

chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装后无法使用,出现vue.js not detected提示的解决办法 找到插件的安装目录: (可以通过id搜索ID:nhdogjmejiglipccpnnnanhbledajbpd) C:\Users\liangsuya\AppData\Local\Google\Chrome\User Data\Def

vue中使用raphael.js实现地图绘制

一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> 3 <div id='streetMap'> 4 <div class="tips" v-show="tipsShow" :style="tipsStyle"> 5 <span v-html="tipsCo

在VUE中使用QRCode.js

什么是QRCode.js QRCode.js是用于制作二维码的JavaScript库.QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览.QRCode.js没有依赖关系 VUE里安装QRCode.js包 npm i qrcodejs2 VUE中引入qrcodejs2包 import QRCode from 'qrcodejs2' 创建DOM元素,存储二维码的位置 <div id="qrcode" ref="qrcode"></

Vue入口文件main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /

前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/details/78133622 vue构造.vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念: 关系:vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件.在大型项目中,用过java开发的都知

Vue Element+Node.js开发企业通用管理后台系统

第1章 课程介绍介绍项目背景.达到的目标.技术栈和功能演示 第2章 课程分析课程分析 第3章 Vue进阶(上)对Vue的进阶知识进行讲解,包括$emit和$on.directive指令.组件化.Vue插件等相关内容. 第4章 Vue进阶(下)对Vue的进阶知识进行讲解,包括组件通信.过滤器.监听器.Vue2.6重要新特性等相关内容. 第5章 Element-UI入门对Element-UI的内容进行讲解,包括如何搭建Element-UI使用环境,如何使用插件快速集成Element-UI,并通过el

vue.js之使用Vue CLI3开发多页面应用-vue文件引入本地js

新手学vue的时候,一般把静态资源放在和页面一个文件夹下,即public下面 但是在html页面引入js的时候,在vue文件里没办法调用,这时候需要在vue文件引入改js,如果用import则不好使,可以使用 <script src="/js/libs/layer/layer.js"></script> 的方式,比如我引入layer.js,如下图 这个时候,layer.msg正常使用 原文地址:https://www.cnblogs.com/mafy/p/121

《Vue系列》timeago.js将时间戳转换成“几天前”“几分钟前”等格式

<Vue系列>timeago.js将时间戳转换成"几天前""几分钟前"等格式 原文地址:https://www.cnblogs.com/zxlb/p/12318275.html

用vue写项目main.js 中的一些设置

import Vue from 'vue'; import $ from 'webpack-zepto'; import VueRouter from 'vue-router'; import filters from './filters'; import routes from './routers'; import Alert from './libs/alert'; import store from './vuex/user'; import FastClick from 'fastc