在 Microsoft Edge 浏览器中安装 Vue 项目调试插件 Vue-Devtools

Vue-Devtools 是 Vue 项目的调试利器，可以帮助开发者在浏览器中方便地查看和调试 Vue 应用的组件状态。

1. 打开浏览器扩展设置

首先，点击 Edge 浏览器右上角的「设置及其他」（快捷键 Alt + F），选择 扩展 → 管理扩展。

进入扩展设置页面后，在左侧开启以下选项：

• 开发人员模式
  

2. 进入扩展商店

在扩展管理页面中，点击 获取 Microsoft Edge 扩展，进入官方扩展商店。在搜索栏输入 vue，即可找到相关插件。

3. 安装 Vue-Devtools 插件

在搜索结果中选择 Vue.js devtools，点击 获取，弹出窗口中选择 添加扩展。

安装完成后，返回扩展管理页面，找到 Vue.js devtools，点击 详细信息，勾选 允许访问文件 URL。

这样，Vue-Devtools 就安装成功了。

4. 使用 Vue-Devtools

当浏览器检测到页面中运行 Vue 应用时，右上角扩展栏中的 Vue 图标会变为绿色（未检测到则为灰色）。

在Vue页面上按下 F12 或右键选择 检查 打开开发者工具，就可以在工具栏中看到 Vue 标签，进入调试面板。

5. 常见问题

如果按照以上步骤安装后，在 Vue 页面打开开发者工具仍然没有看到 Vue-Devtools，请到扩展商店再安装一个 Vue Devtools Unlocker 插件即可解决。