Vue调试神器vue-devtools安装方法
更新时间：2017年12月12日 10:39:38 作者：黒客与画家
本篇文章主要介绍了Vue调试神器vue-devtools安装方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
什么是vue-devtools？
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。
安装方式
1.chrome商店直接安装：
vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。
2.手动安装：
第一步：找到vue-devtools的github项目，并将其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步：安装项目所需要的npm包
npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install
第三步：编译项目文件
npm run build
第四步：添加至chrome游览器
游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools>shells下的chrome文件夹。
/**
*如果看不见“加载已解压的扩展程序…”按钮，则需要勾选“开发者模式”。
*/
到此添加完成，效果图如下：
结语：vue-devtools如何使用
当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的，上手非常的容易，这里就细讲其使用说明了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。好了，接下来可以愉快的调BUG了~！~
相关文章
本篇文章主要介绍了vue Render中slots的使用的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-07-07
本文主要介绍了el-form的model、prop属性和表单校验等使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue传参一箩筐(页面、组件)，Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
vue中json格式化显示数据(vue-json-viewer)
这篇文章主要给大家介绍了关于vue中json格式化显示数据(vue-json-viewer)的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下2024-05-05
最近做时速云项目部署,需要将前端项目打成镜像文件,下面这篇文章主要给大家介绍了关于Vue项目打包成Docker镜像包的简单步骤,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue中的事件处理详情，文章通过给按钮绑定一个 click 事件展开详细内容介绍，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了详解vue-cli 本地开发mock数据使用方法，如果后端接口尚未开发完成，前端开发一般使用mock数据。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue项目中使用fetch的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了谈谈我在vue-cli3中用预渲染遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue使用原生js实现滚动页面跟踪导航高亮的示例代码，滚动页面指定区域导航高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
最新评论