近在研究vue单页面应用，一步一步用上全家桶，开发避免不了的就是调试工具，因为vue是进行数据驱动的，单从chrome里面进行element查看，查不到什么鸟东西，必须要进行对数据动向进行关查，那我就行一步一步教大安装
1.github下载地址：https://github.com/vuejs/vue-devtools
有Git的同学直接 git clonehttps://github.com/vuejs/vue-devtools
2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build.
3.然后打开shells>chrome>src>manifest.json 把里面的"persistent": false改为true
2.再点击加载已解压的扩展程序，然后把shells>chrome这个文件夹放入就ok了(或者直接把E:\vue-devtools\vue-devtools-master\shells\chrome直接拖到扩展程序里面)
你再打开一个用vue写的网页，你再打开chrom调试工具你就会发现
或者其他的方法
chrome商店直接安装
vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。
手动安装
第一步：找到vue-devtools的github项目，并将其clone到本地.vue-devtools
gitclonehttps://github.com/vuejs/vue-devtools.git
第二步：安装项目所需要的npm包
npminstall//如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpminstall
第三步：编译项目文件
npmrunbuild
第四步：添加至chrome游览器
游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。/**
*如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。
*/
到此添加完成，效果图如下：
结语：vue-devtools如何使用
当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的，上手非常的容易，这里就细讲其使用说明了。
网友评论