Volar
是什么
与vetur
相同,volar
是一个针对vue
的vscode
插件,不过与vetur
不同的是,volar
提供了更为强大的功能,让人赞叹。
安装的方式很简单,直接在vscode
的插件市场搜索volar
,然后点击安装就可以了。
Volar
的功能
重头戏来了!
Volar
作为vue的二代插件,除了集成了vetur
的相关功能,如高亮
、语法提示
等之外,更关注的,是它独有的功能。
功能一: 不再需要唯一根标签
学过vue
语法的应该都知道,在vue
的template
中,需要一个唯一的根标签,这是vue
决定的,但是在vue
3中,去除了这个限制,只要在template
中,可以使用多个根标签,不再需要考虑因为唯一根标签所引起的问题。
说实话这不是volar
的新功能,是vue3
的,只不过使用volar
之后不会报错了。
功能二:编辑器快捷分割
vue
单文件组件,按照功能,存在template
、script
、style
三个根元素。
就像常规的html
文件,在单一文件内功能太多,容易造成文件冗余。一个数据稍微多点的vue
页面,就可能有两三千行代码。随之带来的,就是各种不方便:找数据不方便、上下文切换不方便、开发不方便,等等等等。
为了解决这些问题,volar
提供了一个快捷方式。
在安装好volar
之后,进入.vue
单文件组件,会发现右上角多了一个图标
然后我们在页面中写入template
、script
、style
根元素,点击一下这个图标
按照功能,被拆分成了两个视窗,并且每个视窗都负责自己的功能,其他的两个根元素都被合并了。
也就是说,我们可以非常容易的进行区分开template
、script
、style
了,把一个文件拆成三个窗口,当三个文件来用,而且全部由插件来帮你完成,我们只需要点一下即可。
不得不说,我特别喜欢这个功能。