新建了一个vue3项目,想使用Vue的调试工具:
具体步骤如下:
- 下载vue-devtools插件
git clone https://github.com/vuejs/vue-devtools.git
- 切换到下载好的文件夹,在
dev
分支 - npm install / yarn install
- npm run build / yarn run build
- 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
}
}