vue-devtools 是一款基于 chrome 游览器的插件,用于调试 vue 应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下 vue-devtools 的安装。
chrome 商店直接安装vue-devtools 可以从 chrome 商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。
或手动安装第一步:找到 vue-devtools 的 github 项目,并将其 clone 到本地.
git clone
第二步:安装项目所需要的 npm 包
- npm install //如果太慢的话,可以安装一个cnpm, 然后命令换成 cnpm install
第三步:编译项目文件
npm run build
第四步:添加至 chrome 浏览器
结语:vue-devtools 如何使用
- 浏览器输入地址"chrome://extensions/"进入扩展程序页面,点击"加载已解压的扩展程序..."按钮,选择vue-devtools>shells下的chrome文件夹。
- /**
- *如果看不见"加载已解压的扩展程序..."按钮,则需要勾选"开发者模式"。
- */
当我们添加完 vue-devtools 扩展程序之后,我们在调试 vue 应用的时候,chrome 开发者工具中会看一个 vue 的一栏,点击之后就可以看见当前页面 vue 对象的一些信息。vue-devtools 使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。
来源: https://www.2cto.com/kf/201712/709394.html