一、vue-devtools安装 (chrome)(正确亲测有效)
1.下载vue-devtools
(1)cmd下node指令:G:\Node>cnpm install -g vue-devtools
(或者npm指令,下载到node_modules文件夹里或者你自己定义的全局目录里)
(2)网盘资源链接:https://pan.baidu.com/s/1mevtgG2JbJN0YXesumI58Q 提取码 rejl
目录结构:
2.进入vue-devtools文件夹,Shift+鼠标右键-》打开命令行,npm install 回车
3.将vue-devtools->vender->manifest.json里面的"persistent":true ( false改成true)
4.将vender文件夹剪切到node_modules里面去
5.浏览器中设置扩展
chrome设置->扩展程序->加载已解压的扩展程序->选中下载路径的vender包(node_modules\vue-devtools\vender),打开chrome右上角会有个发绿的“V”的vue标志(发灰的话是vue.js not detected,没有检测到vue,找个有vue的页面打开即可)。
6.给予vue项目相应权限
(比如运行bilibili等的站点点击vue扩展显示Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.就是说vue项目没有赋予扩展权限)
my-vue\src\main.js文件中添加:
import Vue from ‘vue’
Vue.config.devtools=true
这样自己的vue项目就可以在浏览器开发工具的扩展程序里调试了。