隨著vscode以及vue的越來越普及，vetur這個(gè)名字也越來越被人熟知。

vetur是一個(gè)vscode插件，用于為.vue單文件組件提供代碼高亮以及語法支持。

可是由于眾所周知的原因，vue以及vetur對(duì)于ts的支持，并不友好。在@vue/composition-api這個(gè)插件 出來之前，vue2的ts需要使用vue-prototype-decorator這個(gè)插件，來通過裝飾器的模式進(jìn)行模擬，但是由于不是從底層支持，因此vue2的ts使用體驗(yàn)可謂是一塌糊涂。

在2020年9月18日，vue3?-?one piece正式發(fā)布。隨之而來的，是一整套從頭到尾使用ts的新底層以及全新的composition-api。與此同時(shí)，volar順應(yīng)而生。

Volar是什么

與vetur相同，volar是一個(gè)針對(duì)vue的vscode插件，不過與vetur不同的是，volar提供了更為強(qiáng)大的功能，讓人直呼臥槽。

安裝的方式很簡(jiǎn)單，直接在vscode的插件市場(chǎng)搜索volar，然后點(diǎn)擊安裝就可以了。

Volar的功能

功能一： 不再需要唯一根標(biāo)簽

學(xué)過vue語法的應(yīng)該都知道，在vue的template中，需要一個(gè)唯一的根標(biāo)簽，這是vue決定的，但是在vue3中，去除了這個(gè)限制，只要在template中，可以使用多個(gè)根標(biāo)簽，不再需要考慮因?yàn)槲ㄒ桓鶚?biāo)簽所引起的問題。

說實(shí)話這不是volar的新功能，是vue3的，只不過使用volar之后不會(huì)報(bào)錯(cuò)了。

功能二：編輯器快捷分割

vue單文件組件，按照功能，存在template、script、style三個(gè)根元素。

就像常規(guī)的html文件，在單一文件內(nèi)功能太多，容易造成文件冗余。一個(gè)數(shù)據(jù)稍微多點(diǎn)的vue頁面，就可能有兩三千行代碼。隨之帶來的，就是各種不方便：找數(shù)據(jù)不方便、上下文切換不方便、開發(fā)不方便，等等等等。

為了解決這些問題，volar提供了一個(gè)快捷方式。

在安裝好volar之后，進(jìn)入.vue單文件組件，會(huì)發(fā)現(xiàn)右上角多了一個(gè)圖標(biāo)

然后我們?cè)陧撁嬷袑懭雝emplate、script、style根元素，點(diǎn)擊一下這個(gè)圖標(biāo)

令人激動(dòng)的事情發(fā)生了，我們的vue文件，按照功能，被拆分成了三個(gè)視窗，并且每個(gè)視窗都負(fù)責(zé)自己的功能，其他的兩個(gè)根元素都被合并了。

也就是說，我們可以非常容易的進(jìn)行區(qū)分開template、script、style了，把一個(gè)文件拆成三個(gè)窗口，當(dāng)三個(gè)文件來用，而且全部由插件來幫你完成，我們只需要點(diǎn)一下即可。

不得不說，我特別喜歡這個(gè)功能。

功能三:?ref sugar語法快捷改動(dòng)支持

ref sugar是一個(gè)還在rfc階段的功能，但是已經(jīng)持續(xù)很久了，現(xiàn)在的vue3版本已經(jīng)可以嘗鮮使用了。具體的用法以及語法我就不展開贅述了，我主要說一下volar和ref sugar的結(jié)合。

可以看到，在使用了ref sugar之后，script上面出現(xiàn)了一個(gè)ref sugar的小圖標(biāo)，并且打了個(gè)對(duì)勾，那么我們點(diǎn)一下那個(gè)對(duì)勾，看看會(huì)發(fā)生什么。

可以看到，我們點(diǎn)擊這個(gè)小對(duì)勾之后，它由原本的ref sugar語法變?yōu)榱似胀ǖ膕cript setup模式。

功能四:?style里面的class引用
?

可以看到，在.foo這個(gè)類名上面，出現(xiàn)了一個(gè)1 reference的小圖標(biāo)，代表著當(dāng)前class有一次引用，我們點(diǎn)擊一下這個(gè)1 reference
?

功能五:?class追溯

我們創(chuàng)建一個(gè)template根元素，在里面寫入

<template><div class="foo"></div> </template>

在style中寫入

<style scoped> .foo {} </style>

除了style中的.foo上面會(huì)出現(xiàn)1 reference的小圖標(biāo)之外，在class="foo"的foo下面，會(huì)出現(xiàn)一道橫線。

對(duì)于經(jīng)常使用vscode的開發(fā)人員來說，這代表什么意義就不必多說了。

我們根據(jù)提示，按住command然后點(diǎn)擊，會(huì)發(fā)現(xiàn)光標(biāo)自己移動(dòng)到了style中的.foo之前。

功能六：?css module類型提示

css module一般是react技術(shù)棧用的會(huì)比較多一些，就我個(gè)人來說，是從沒在vue里面使用它的，因?yàn)関ue提供了scoped作用域，不用擔(dān)心樣式?jīng)_突，直接使用預(yù)處理器會(huì)更加簡(jiǎn)單方便。

我們創(chuàng)建如下代碼

<template><div :class="$style.foo"></div> </template><style module> .foo { } </style>

然后將鼠標(biāo)移動(dòng)到$style上

有點(diǎn)意思，看來vscode是讓volar玩明白了。

功能七:?lang語法提示

vue可以使用lang屬性來選擇使用的語言，比如template中的html和pug，script中的ts，style中的scss等。

但是在以前，我們都是手動(dòng)輸入的，編輯器，或者說vetur并沒有給我們提供任何提示，有可能你找了很久的莫名其妙的問題，就是因?yàn)閘ang寫錯(cuò)了。

但是這一切，在有了volar之后，都不同了

現(xiàn)在我們?cè)谑褂胠ang進(jìn)行選擇預(yù)處理器的時(shí)候，volar為我們提供了明確的提示，告知我們可以使用哪幾種語言來進(jìn)行編寫。

功能八:?template語法轉(zhuǎn)換

vue默認(rèn)提供了兩種模板供我們使用，但是一般都會(huì)使用html，另外一種叫做pug。

相對(duì)于html，pug更偏向于yml那種，簡(jiǎn)潔程度特別高。

在volar中，為我們提供了html和pug互相轉(zhuǎn)換的功能。

<template><div><li></li><li></li><li><img /></li></div> </template>

在我們書寫template之后，template頂部會(huì)出現(xiàn)一個(gè)小小的pug圖標(biāo)，我們可以看到此時(shí)它是沒有被選中的

這個(gè)時(shí)候我們點(diǎn)擊一下這個(gè)圖標(biāo)，讓它選中。

神奇的事情發(fā)生了。

我們寫好的html模板，被自動(dòng)轉(zhuǎn)化成了pug，再點(diǎn)擊一下，又回到了我們熟悉的html

---

鏈接：https://www.imooc.com/article/317810

總結(jié)

以上是生活随笔為你收集整理的Volar - vue终极开发神器！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。