新建了一個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
}
}