vue开发过程中,需要给某个页面某个弹窗中的某个按钮修改样式,我如何快速找到这个按钮属于哪个组件?也就是说直接通过这个按钮找到该.vue文件,然后修改相应的样式。chrome自带调试工具可以吗? vue-devtools可以吗? 请问具体如何操作?
###vue-devtool可以,点这个select按钮去页面选中就出来了
生产环境
- 选中
DOM
节点 - 打开开发者工具中的
console
,输入
$target = $0;
do {
if ($target.__vue__) {
console.log($target.__vue__);
break;
}
$target = $target.parentNode;
}
while ($target);
开发环境
同生产环境方法,可以多获取到源文件的路径(前提是使用vue-loader
编译)
$target.$options.__file
或者采用vue-devtools
更为方便
如果这个组件有特殊css样式,或者特殊关键字,我觉得应该可以在开发工具里面全局搜索
###我这边有个最佳实践:用 kebab-case 给组件添加样式。比如 SomeSpecialButton
,那么它的 root 元素需要包含样式:.some-special-button
,这样我就能快速定位它的位置了。
可以一级一级往上找具有__vue__
属性的dom,这个__vue__
就是包含该按钮的vue组件的实例,然后代码里全局搜一下实例的一些属性(比如name)就能找到
仅对vue2有效