Vue-devtools安装

vue-devtools是vue官方提供的用于调试vue项目的工具，简洁好用，本文就介绍一下怎么安装和使用

安装

拉取官方仓库资源

安装依赖并打包

npm install
npm run build

此时你的项目目录应该是这样的

做一些小修改

修改shells/chrome/manifest.json文件，将persistent设为true

然后将整个chrome文件夹拖入chrome://extensions就行了

使用

经过上述步骤，vue-devtools已经装好了，F12看一下，此时菜单项会多出一个vue选项

点击即可进行vue调试，界面如下

左边主要是vue组件的展示，可以清晰的看到项目的结构 右边几项功能如下

• Components:显示当前选中组建的基本信息，包括data,computed,methods,prop等
• Vuex: 项目的Vuex状态管理，可以看到state,mutations,actions
• Event: 项目中触发的事件都可以在这里看到，事件名，参数都有
  

vue-devtools基本就讲完了，希望大家用的愉快！！！