首页 > 其他分享 >02vue之调试工具vue-devtools

02vue之调试工具vue-devtools

时间:2023-10-10 11:13:41浏览次数:50  
标签:插件 vue Chrome 程序 02vue chrome devtools

1 下载插件

可以在 https://chrome.zzzmh.cn/#/index 这里直接下载,然后直接拖入 扩展程序即可

2 下载包

2.1 从github克隆项目

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

2.2 在vue-devtools目录下安装依赖包

cd vue-devtools
npm install

2.3 修改manifest.json文件

把"persistent":false 改成 true

image

2.4 编译项目代码

npm run build

2.5 配置扩展Chrome插件

  • Chrome浏览器 > 更多程序 > 拓展程序
  • 点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

image

标签:插件,vue,Chrome,程序,02vue,chrome,devtools
From: https://www.cnblogs.com/songxia/p/17754130.html

相关文章

  • 前端、Vue.js和SVG的一些知识
    前端、Vue.js和SVG的一些知识一、前端简介  1、什么是HTML(静态)(超文本标记语言HyperTextMarkupLanguage),HTML是用来描述网页的一种语言。  2、CSS(层叠样式表CascadingStyleSheets),样式定义如何显示HTML元素,语法为:selector{property:value}(选择符{属性:值}) ......
  • vue 基于 el-upload 封装视频上传组件
    新建video-upload.vue文件:<template> <divclass="video-upload-com">  <el-upload:action="uploadUrl":before-upload="beforeAvatarUpload":file-list="mediaList":on-success="handleSuccess":o......
  • Vue 异步更新、$nextTick
    Vue是异步更新DOM的,想要在dom更新完成之后做某件事,可以使用 $nextTick  $nextTick:等dom更新后,才会触发执行此方法里的函数体语法:this.$nextTick( ()=>{   //业务逻辑}) eg:this.$nextTick( ()=>{   this.$refs.inp.focus()})......
  • vue显示echarts报错——echarts未在vue界面中定义init——TypeError: Cannot read pro
    问题描述本来按照网上的教程说是想要定义一个全局变量,就不需要在每个需要用到echarts组件的vue页面里面重新定义了,直接使用就行,然后就报错了;问题解决我觉得应该是我的全局变量定义错误了,但是吧,我就直接改成在该vue页面定义了它,然后再使用:就没有再使用到那个全局变量,直接这......
  • 启动vue项目报错——ERROR Error loading vue.config.js: ERROR TypeError: defineCon
    问题描述在我引入echarts模块之前是ok的,引入之后就启动失败了;问题解决一般情况下,都是该项目的版本与本机cmd里面的版本不对应导致的;只需要使用这个命令npmupgrade,更新版本,一直yes下去,就能够解决这个问题啦!......
  • Vue组件各个属性执行顺序问题
    转自:https://blog.csdn.net/m0_62763606/article/details/131694339       在制作波动短视频效果时,在data中定义了一个变量,默认值为null。后来该变量在mounted中被赋值,而后在watch侦听属性中使用立即侦听时使用了该变量却显示为null,后发现这关系到各个组件属性执行顺序问......
  • vue 监视器watch
    监听器案例简单写法:简单写法案例完整写法:完整写法案例:......
  • vue3+ts中使用echarts
    1. 下载npminstall-Secharts2.使用方法一(推荐使用)<divclass="echart_box"ref="echartDom"></div><scriptsetuplang="ts">import*asechartsfrom"echarts";constechartDom=ref()//使用ref创建虚拟DOM引......
  • 使用vue-router添加动态路由时遇到的坑
    在开发后台管理的时候,用户登录时需要根据权限来分配路由,这时候可以在路由守卫里通过router.addRoute()方法动态添加路由。importrouterfrom'./router'importstorefrom'./store'importstoragefrom'@/utils/storage'import{asyncRoute}from"@/router/routers";......
  • vue中的循环遍历对象、数组和字符串
    vue循环遍历对象、数组和字符串1.循环遍历对象1.1vue在html里面循环遍历对象v-for="(val,key,i)indimItemMap":key="key" val-每一项key-key值i-第几个<el-table-columnprop="score"label="评分":show-overflow-tooltip="true"ali......