本文主要介绍 Vue的调试工具
vue-devtools
的安装和使用。
工欲善其事, 必先利其器,快快一起来用vue-devtools
来调试开发你的Vue项目吧。
1、下载vue-devtools
- 到github下载:https://github.com/vuejs/vue-devtools
- 本站下载:
2、安装依赖包:
- 解压压缩包,在cmd中进入文件目录。例如:
cd vue-devtools-dev
- 执行
npm install
安装。
3、修改manifest.json文件
将代码中 "persistent":false改成true
4、生成发行版
安装完成后同在该目录下运行 npm run build
5、添加扩展Chrome插件
-
Chrome浏览器 > 更多程序 > 拓展程序
-
点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图
6、vue-devtools使用
-
打开vue项目, 打开f12, 选择vue就可以使用了.
-
vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试 :