脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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根据权限动态渲染按钮、组件等的函数式组件实现

    vue根据权限动态渲染按钮、组件等的函数式组件实现

    这篇文章主要介绍了vue根据权限动态渲染按钮、组件等的函数式组件实现方式,具有很好的参考价值,希望杜大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 详解Vue3.0 前的 TypeScript 最佳入门实践

    详解Vue3.0 前的 TypeScript 最佳入门实践

    这篇文章主要介绍了详解Vue3.0 前的 TypeScript 最佳入门实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue-awesome-swiper滑块插件使用方法详解

    vue-awesome-swiper滑块插件使用方法详解

    这篇文章主要为大家详细介绍了vue-awesome-swiper滑块插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 在Vue组件中使用 TypeScript的方法

    在Vue组件中使用 TypeScript的方法

    typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法。这篇文章主要介绍了在Vue组件中使用 TypeScript的方法,需要的朋友可以参考下
    2018-02-02
  • 深入浅析Vue中的 computed 和 watch

    深入浅析Vue中的 computed 和 watch

    computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧
    2018-06-06
  • 深入浅析Vue.js中 computed和methods不同机制

    深入浅析Vue.js中 computed和methods不同机制

    这篇文章给大家介绍了Vue.js中 computed和methods不同机制，在vue.js中，methods和computed两种方式来动态当作方法使用，文中还给大家提到了computed和methods的区别，感兴趣的朋友一起看看吧
    2018-03-03
  • Vue.2.0.5过渡效果使用技巧

    Vue.2.0.5过渡效果使用技巧

    这篇文章主要介绍了Vue.2.0.5过渡效果使用技巧，实例分析了Vue.2.0.5过渡效果的技巧，非常具有实用价值，需要的朋友可以参考下。
    2017-03-03
  • vue商城中商品“筛选器”功能的实现代码

    vue商城中商品“筛选器”功能的实现代码

    这篇文章主要介绍了vue商城中商品“筛选器”功能的实现，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 对vue里函数的调用顺序介绍

    对vue里函数的调用顺序介绍

    下面小编就为大家分享一篇对vue里函数的调用顺序介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue中使用echarts并根据选择条件动态展示echarts图表

    vue中使用echarts并根据选择条件动态展示echarts图表

    虽然老早就看过很多echarts的例子, 但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue中使用echarts并根据选择条件动态展示echarts图表的相关资料,需要的朋友可以参考下
    2023-12-12

最新评论