脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-devtools

vue调试工具vue-devtools安装及使用方法

 更新时间：2018年11月07日 11:19:24   投稿：mrr  
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧

本文主要介绍 vue的调试工具 vue-devtools 的安装和使用

工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧

安装:

1.到github下载：

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

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

cd vue-devtools
cnpm install

3.修改manifest.json文件

把"persistent":false改成true

 4.编译代码

npm run build

5.扩展Chrome插件

Chrome浏览器 >  更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

6. vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

 怎么样, 是不是感觉工作效率提高了呢

温情提示:

1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的

2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

下面在单独给大家介绍下vue调试神器devtools的 安装

vue  devtools 安装

  1. 下载完成后，在文件夹下 npm install
  2. 然后npm run build
  3. 完成之后，打开…\vue-devtools-dev\vue-devtools-dev\shells\chrome 下的manifest.json修改"persistent": false —> "persistent": true
  4. 完成之后，打开…\vue-devtools-dev\vue-devtools-dev\shells\chrome 下的webpack.config.js修改为 process.env.NODE_ENV !== 'development'
  5. 在chrome://extensions/中打开开发者模式，将vue-devtools-dev\vue-devtools-dev\shells\chrome 文件夹拉入
  6. 完成后的样子

总结

以上所述是小编给大家介绍的vue调试工具vue-devtools安装及使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 更强大的vue ssr实现预取数据的方式

    更强大的vue ssr实现预取数据的方式

    这篇文章主要介绍了更强大的 vue ssr 预取数据的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue3项目+element-plus:时间选择器格式化方式

    vue3项目+element-plus:时间选择器格式化方式

    这篇文章主要介绍了vue3项目+element-plus:时间选择器格式化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue echarts封装组件需求分析与实现

    Vue echarts封装组件需求分析与实现

    在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法，这篇文章主要介绍了Vue echarts封装组件需求分析与实现
    2022-10-10
  • Element中el-tabs左右滑动动画的实现

    Element中el-tabs左右滑动动画的实现

    本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03
  • vue中的el-form表单rule校验问题(特殊字符、中文、数字等)

    vue中的el-form表单rule校验问题(特殊字符、中文、数字等)

    这篇文章主要介绍了vue中的el-form表单rule校验问题(特殊字符、中文、数字等)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • vue3 文档梳理快速入门

    vue3 文档梳理快速入门

    vue3之所以受广大袁友的喜欢，优点必不可少呀，比如：可以监听动态新增的属性；可以监听删除的属性 ；可以监听数组的索引和 length 属性；下面文章小编就来向大家介绍vue3，感兴趣的小伙伴不要错过奥
    2021-09-09
  • VUE mixin 使用示例详解

    VUE mixin 使用示例详解

    混入mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能，一个混入对象可以包含任意组件选项，接下来通过本文给大家介绍VUE mixin 使用,需要的朋友可以参考下
    2022-08-08
  • vue-cli webpack 开发环境跨域详解

    vue-cli webpack 开发环境跨域详解

    本篇文章主要介绍了vue-cli webpack 开发环境跨域详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解vuex之store源码简单解析

    详解vuex之store源码简单解析

    这篇文章主要介绍了详解vuex之store源码简单解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • element-ui如何取消el-table的hover状态(取消高亮显示)

    element-ui如何取消el-table的hover状态(取消高亮显示)

    在一个项目中需要对element-ui的table组件进行一些样式的修改,其中就包括对hover效果的处理,下面这篇文章主要给大家介绍了关于element-ui如何取消el-table的hover状态(取消高亮显示)的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论