vue-devtools 是一款基于 Chrome 游览器的插件, 用于调试 vue 应用, 这可以极大地提高我们的调试效率. 接下来我们就介绍一下 vue-devtools 的安装.
Chrome 商店直接安装:
vue-devtools 可以从 Chrome 商店直接下载安装, 非常简单, 这里就不过多介绍了. 不过要注意的一点就是, 需要翻墙才能下载.
手动安装:
第一步: 找到 vue-devtools 的 GitHub 项目, 并将其 clone 到本地.
Git clone https://github.com/vuejs/vue-devtools.git
第二步: 安装项目所需要的 NPM 包
NPM install // 如果太慢的话, 可以安装一个 cnpm, 然后命令换成 cnpm install
第三步: 编译项目文件
NPM run build
第四步: 添加至 Chrome 游览器
浏览器输入地址 "chrome://extensions/" 进入扩展程序页面, 点击 "加载已解压的扩展程序..." 按钮, 选择 vue-devtools>shells 下的 Chrome 文件夹.
如果看不见 "加载已解压的扩展程序..." 按钮, 则需要勾选 "开发者模式".
到此添加完成.
当我们添加完 vue-devtools 扩展程序之后, 我们在调试 vue 应用的时候, Chrome 开发者工具中会看一个 vue 的一栏, 点击之后就可以看见当前页面 vue 对象的一些信息.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/vue-js/17340.html