这篇文章主要介绍了安装vue。js devtools的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
安装方法:1、下载zip安装包,并解压到指定文件夹中;2,进入Vue-devtools目录下,输入“纱安装”和“纱构建运行”进行安装;3,配置清单。json文件;4、手动扩展chrome的插件。
vue devtools是一款基于chrome浏览器的用于调试Vue.js应用程序的插件,可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。
由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么,通过该插件,用户可以很轻松的对数据结构进行解析和调试,能够在侧边栏窗格中的页面中检查代码并进行调试,可以方便查看状态,mutaitons,行动等信息,还可记录路由的变化,以及路由相关信息等等,可谓是前端开发必备工具!
<强>
1,进入vue官网https://cn.vuejs.org/,在生态系统下点击devtools
2,页面跳转到GitHub,点击下载zip包
3,下载完毕后解压到文件夹,我这里是解压到自己创建的文件夹
4,然后进入到Vue-devtools-dev目录下,按住shift键,右键打开powershell窗口
5,输入线安装,开始安装,我这里已经安装过了,就不贴图了
6,再接下来输入纱构建、运行等待安装后,出现如下页面即安装成功
7,打开文件夹,进入到\ vue-devtools-dev \包\ shell-chrome目录下,打开清单。json文件,修改
“持久”:假为“持久”:真正的
8,打开谷歌Chrome,进入扩展程序,打开开发者模式,点击加载已解压的扩展程序,选择\ vue-devtools-dev \包\目录下的shell-chrome文件夹
9日安装完成
<强>
1,在浏览器打开调试项目,我这里随便写了个测试页面,打开控制台,点击图中的Vue,即可进行调试
感谢你能够认真阅读完这篇文章,希望小编分享安装vue。js devtools的方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
安装vue。js devtools的方法
