前几天知乎看到一个热门问题——我想问问用vue的各位，鼠标滚轮有没有磨出火星子？
看到这里我直接笑喷了，因为这话我前几天刚跟同事说过类似的——写 vue 好像挺费鼠标的。刚写了没几天 vue 代码的我，已经在 vue 代码的汪洋大海里面有点迷航了。
作为一名 react 选手，记得最初看到有的人写的一些 vue 代码的时候是非常震惊的，在上面写着HTML，然后翻到最下面再写JavaScript或者css，感觉似乎回到了早期 jQuery 混乱时代。
不过那时候还是特别讲究 “结构、样式和行为分离” 的，html 单独一个文件，css 和 JavaScript 也都是单独写的。需要修改的话，就到相应的文件里面去写代码。
后来看到一些 vue 的代码，看着别人鼠标滚来滚去的操作，心想：这不得配个竖屏才行？
不过写代码多了发现，其实还有很多解决办法可以解决上面的问题的。
第一种方法：分屏
以 webstorm 为例，不仅可以左右分屏，还可以上下分屏。
可以在左边编辑 html 部分，右边编辑样式部分，只需左右摇头，无需再上下点头了。
vscode 也是可以做到的：
第二种方法：代码缩略图
如下图所示，代码缩略图可用于快速定位代码。
不记得是需要安装插件还是 IDE 自带的了，反正 webstorm 和 vscode 都有这个功能，如果需要安装插件，请搜索“代码缩略图”或者 CodeGlance 等关键词。
第三种方法：书签（bookmark）
以 webstorm 为例，可以在下图所处位置右键，然后选择“打开书签”
然后在左侧工具栏就可以看到书签了，可以直接点击到相关的文件及具体行。还会有一个书签的小图标。
vscode 也有类似的设置，但是因为不怎么用 vscode ，大家感兴趣的可以自行摸索。
第四种方法：结构
以 webstorm 为例，如下图所示：点击左侧的结构，即可看到当前文件的大致骨骼脉络，可以直接点击到某个关键地方。
第五种方法：Ctrl + F 查找大法
几乎所有的 IDE 都有这个功能，关键在于如何使用，如下图所示，有的甚至还支持正则表达式。
第六种方法：鼠标单击方法跳转
如下图所示，按下 Ctrl 键的同时，单击鼠标左键，就可以直接到函数的定义处了。
vscode 也有类似功能。
第七种方法：组件
以上方法只能算是奇技淫巧，对于编程能力提升帮助不大。真正要解决这个问题，还得提高基本功，多写，多拆分组件，单个 vue 文件行数限制在一定范围内。
