vue-devtools安装使用教程

安装

1.进入github搜索vue-devtools,点击clone，下载项目文件

vue-devtools的github地址

附上地址：传送门

2.将压缩包解压到电脑目录，进入项目文件夹，是不是很熟悉，没错这就是npm项目

3,鼠标右键打开power shell命令行，运行 npm install ,安装依赖包,也可使用cnpm安装

4.运行npm run build ,进行构建

5.打开chrome浏览器，点击选项，更多工具，拓展程序，

6.进入shell文件夹，将构建出的chrome文件夹拖到chrome拓展程序页，点击确认，成功添加新的拓展程序。

使用

1.使用之前必须对vue项目进行相关设置，在Vue加载之后设置立即设置Vue.config.devtools = true，

devtools详细设置

2.chrome浏览器按f12，即可看到vue菜单，

3，点击vue菜单，即可看到左侧组件嵌套情况，右侧则可选择查看组件，vuex数据仓库,事件派发情况，vue-router，工具设置等等

4,点击某个组件，还可以看到该组件对应的真实dom,传入的props,data等。