vue-devtools安装

新建了一个vue3项目，想使用Vue的调试工具：

具体步骤如下：

1. 下载vue-devtools插件 git clone https://github.com/vuejs/vue-devtools.git
2. 切换到下载好的文件夹，在dev分支
3. npm install / yarn install
4. npm run build / yarn run build
5. Chrome——设置——扩展程序——加载已解压的扩展程序——选择vue-devtools-dev/packages/shell-chrome/

不想麻烦的可以直接下载
链接: https://pan.baidu.com/s/1IpzASF4EcHv4aWvQmpWooA 密码: jbae

vue-devtools无法使用

安装插件后无法使用, main.ts 中加入如下代码就可以使用了

const app = createApp(App)
const win = window
if (process.env.NODE_ENV === 'development') {
  if ('__VUE_DEVTOOLS_GLOBAL_HOOK__' in win) {
    // 这里__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue赋值一个createApp实例
    win.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app
  }
}