1. 安装vue-devtools拓展程序

(1) 使用 Chrome 浏览器开发 Vue 项目的时候，控制台提示如下：

image.png

vue-devtools：这个工具可以查看组件状态，加快开发效率。

(2) 根据提示，下载vue-devtools并安装，安装参考下面的浏览器插件安装。

2. 浏览器插件安装

• 进入扩展程序页面：打开chrome浏览器 —> 点击“右上角三个点” —> 点击“更多工具” —> 点击“扩展程序”

• 选择开发者模式：勾选开发者模式，勾选后下面会多出三个按钮

  
  image.png
• 加载本地浏览器插件：点击最左边的“加载已解压的扩展程序”，选择本地插件的根目录， 点击“确定”

• 启用插件：确认没有问题后在扩展程序中会有显示，勾选“启用”即可。

  
  image.png