Vue-devtools的安装与使用

Vue-devtools的安装与使用

这里我是先看了这篇文章的:https://www.cnblogs.com/teamemory/p/12399191.html

步骤:

1、下载mater 分支 的vue-devtools(我使用的是4.1.5版本)，我当时直接在vue官网进入devtools下载后npm run build会报错(所以切记要下载mater分支下的vue-devtools)
下载地址:
mater分支下载地址:https://github.com/vuejs/vue-devtools/tree/master

2、将下载好的安装包解压到一个目录中，使用命令行cd到刚刚解压好的vue-devtools-mater下，执行npm install或者是cnpm install(cnpm需要自己先下载)

3、执行npm run build,如下图:

4、打开谷歌浏览器，输入 chrome://extensions/ 网址，进入到扩展程序界面，点开右上角的”开发者模式“，点击”加载已解压的扩展程序“，选择文件夹路径为:\vue-devtools-master\shells\chrome点击确认。如下图代表添加成功。

5、重新启动vue项目，重新打开F12调试工具，就可以看到vue选项。如果还不能看到vue选项，就重新启动下浏览器即可。

注意事项:一定要去下载mater 分支下 的vue-devtools，dev的目前测试npm run build 会失败。

备注:这是我第一次写博客，如有哪里做的不好的地方请多指教。