[b]前言：[/b] 由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么。 但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。 [b]一、下载chrome扩展插件[/b] GitHub下载地址： [url=https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue-devtools]https://github.com/vuejs/vue-devtools[/url] 建议使用npm淘宝镜像按照依赖包 地址：http://npm.taobao.org/ 命令行安装npm淘宝镜像： $ npm install -g cnpm --registry=https://registry.npm.taobao.org 之后我们就可以使用cnpm代替npm按照依赖包了，npm安装依赖包确实太慢了..... [b]二、cnpm install[/b] 下载完成后打开命令行cmd进入vue-devtools文件夹，按照依赖包并npm run build [img]http://files.jb51.net/file_images/article/201707/201707130915301.png[/img] [img]http://files.jb51.net/file_images/article/201707/201707130915302.png[/img] 三、打开shells>chrome>src>manifest.json并把json文件里的"persistent":false改成true [img]http://files.jb51.net/file_images/article/201707/201707130915303.png[/img] [b]四、扩展chrome插件[/b] 1.打开chrome浏览器，打开设置>点击或者程序>点击开发者模式 2.再点击加载已解压的扩展程序，然后把shell>chrome文件夹放入 [img]http://files.jb51.net/file_images/article/201707/201707130915314.png[/img] 最后 打开个vue写的项目，f12打开调试工具即可进行vue项目的调试。 [img]http://files.jb51.net/file_images/article/201707/201707130915315.png[/img] 本文已被整理到了《[url=http://www.1sucai.cn/Special/874.htm]Vue.js前端组件学习教程[/url]》，欢迎大家学习阅读。 关于vue.js组件的教程，请大家点击专题[url=http://www.1sucai.cn/Special/926.htm]vue.js组件学习教程[/url]进行学习。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。