vue-devtools调试工具的安装

在进行vue-devtools工具安装时,折腾好几遍才安装好。
遇到的问题

  1. 从网上看到资料,根据git clone下载的vue-devtools的工具是vue-devtools-dev dev分支的,找shells时找不到
  2. 下载了vue-devtools-master master文件后,根据安装好后出现了有调试的图标但是不显示vue的代码调试界面,鼠标放到V图标上面显示:Vue.js is detected on this page. Open DevTools and look for the Vue panel.

下面是综合了下得到的安装方法:

# 1. 从github上面下载vue-devtools插件(或者选择克隆都是可以的)
# 一定要选择master进行下载
https://github.com/vuejs/vue-devtools

# 2. 将下载的vue-devtools-master进行解压

# 3. 进入到vue-devtools-master文件夹
cd vue-devtools-master

# 4. 安装配套的包
npm install

# 5. 压缩文件
npm run build

# 6. 修改  shells/chrome/mainifest.json 中的 persistant 为 true

# 7. 进入到chrome里面以加载已解压的扩展程序,选择vue-devtools-master/shells/chrome 文件

# 8. 进入到我们自己创建的vue项目中,在 main.js 文件里面添加一句话就可以正常执行了
Vue.config.devtools = true

github上面选择master

vue-devtools调试工具的安装_第1张图片

最终安装成功
vue-devtools调试工具的安装_第2张图片

你可能感兴趣的:(Vue)