Volar - vue终极开发神器!
随着vscode
以及vue
的越来越普及,vetur
这个名字也越来越被人熟知。
vetur
是一个vscode
插件,用于为.vue
单文件组件提供代码高亮以及语法支持。
可是由于众所周知的原因,vue
以及vetur
对于ts
的支持,并不友好。在@vue/composition-api
这个插件 出来之前,vue
2的ts
需要使用vue-prototype-decorator
这个插件,来通过装饰器的模式进行模拟,但是由于不是从底层支持,因此vue
2的ts
使用体验可谓是一塌糊涂。
在2020年9月18日,vue3
- one piece
正式发布。随之而来的,是一整套从头到尾使用ts
的新底层以及全新的composition-api
。与此同时,volar
顺应而生。
Volar
是什么
与vetur
相同,volar
是一个针对vue
的vscode
插件,不过与vetur
不同的是,volar
提供了更为强大的功能,让人直呼卧槽
。
安装的方式很简单,直接在vscode
的插件市场搜索volar
,然后点击安装就可以了。
Volar
的功能
功能一: 不再需要唯一根标签
学过vue
语法的应该都知道,在vue
的template
中,需要一个唯一的根标签,这是vue
决定的,但是在vue
3中,去除了这个限制,只要在template
中,可以使用多个根标签,不再需要考虑因为唯一根标签所引起的问题。
说实话这不是
volar
的新功能,是vue3
的,只不过使用volar
之后不会报错了。
功能二:编辑器快捷分割
vue
单文件组件,按照功能,存在template
、script
、style
三个根元素。
就像常规的html
文件,在单一文件内功能太多,容易造成文件冗余。一个数据稍微多点的vue
页面,就可能有两三千行代码。随之带来的,就是各种不方便:找数据不方便、上下文切换不方便、开发不方便,等等等等。
为了解决这些问题,volar
提供了一个快捷方式。
在安装好volar
之后,进入.vue
单文件组件,会发现右上角多了一个图标
然后我们在页面中写入template
、script
、style
根元素,点击一下这个图标
令人激动的事情发生了,我们的vue
文件,按照功能,被拆分成了三个视窗,并且每个视窗都负责自己的功能,其他的两个根元素都被合并了。
也就是说,我们可以非常容易的进行区分开template
、script
、style
了,把一个文件拆成三个窗口,当三个文件来用,而且全部由插件来帮你完成,我们只需要点一下即可。
不得不说,我特别喜欢这个功能。
功能三: ref sugar
语法快捷改动支持
ref sugar
是一个还在rfc
阶段的功能,但是已经持续很久了,现在的vue3
版本已经可以尝鲜使用了。具体的用法以及语法我就不展开赘述了,我主要说一下volar
和ref sugar
的结合。
可以看到,在使用了ref sugar
之后,script
上面出现了一个ref sugar
的小图标,并且打了个对勾,那么我们点一下那个对勾,看看会发生什么。
可以看到,我们点击这个小对勾之后,它由原本的ref sugar
语法变为了普通的script setup
模式。
功能四: style
里面的class
引用
可以看到,在.foo
这个类名上面,出现了一个1 reference
的小图标,代表着当前class
有一次引用,我们点击一下这个1 reference
功能五: class
追溯
我们创建一个template
根元素,在里面写入
<template><div class="foo"></div>
</template>
在style
中写入
<style scoped>
.foo {}
</style>
除了style
中的.foo
上面会出现1 reference
的小图标之外,在class="foo"
的foo
下面,会出现一道横线。
对于经常使用vscode
的开发人员来说,这代表什么意义就不必多说了。
我们根据提示,按住command
然后点击,会发现光标自己移动到了style
中的.foo
之前。
功能六: css module
类型提示
css module
一般是react
技术栈用的会比较多一些,就我个人来说,是从没在vue
里面使用它的,因为vue
提供了scoped
作用域,不用担心样式冲突,直接使用预处理器会更加简单方便。
我们创建如下代码
<template><div :class="$style.foo"></div>
</template><style module>
.foo { }
</style>
然后将鼠标移动到$style
上
有点意思,看来vscode
是让volar
玩明白了。
功能七: lang
语法提示
vue
可以使用lang
属性来选择使用的语言,比如template
中的html
和pug
,script
中的ts
,style
中的scss
等。
但是在以前,我们都是手动输入的,编辑器,或者说vetur
并没有给我们提供任何提示,有可能你找了很久的莫名其妙的问题,就是因为lang
写错了。
但是这一切,在有了volar
之后,都不同了
现在我们在使用lang
进行选择预处理器的时候,volar
为我们提供了明确的提示,告知我们可以使用哪几种语言来进行编写。
功能八: template
语法转换
vue
默认提供了两种模板供我们使用,但是一般都会使用html
,另外一种叫做pug
。
相对于html
,pug
更偏向于yml
那种,简洁程度特别高。
在volar
中,为我们提供了html
和pug
互相转换的功能。
<template><div><li></li><li></li><li><img /></li></div>
</template>
在我们书写template
之后,template
顶部会出现一个小小的pug
图标,我们可以看到此时它是没有被选中的
这个时候我们点击一下这个图标,让它选中。
神奇的事情发生了。
我们写好的html
模板,被自动转化成了pug
,再点击一下,又回到了我们熟悉的html
链接:https://www.imooc.com/article/317810
Volar - vue终极开发神器!相关推荐
- 视频教程-德国Vue.js2终极开发教程(含Vue路由和Vuex)-Vue
德国Vue.js2终极开发教程(含Vue路由和Vuex) * Academind GmbH创始人,当前生活在德国慕尼黑 * 从15岁开始进入开发领域,前后端技术均很精通,毕业于慕尼黑大学硕士学位 * ...
- 德国Vue.js2终极开发教程(含Vue路由和Vuex)-Max-专题视频课程
德国Vue.js2终极开发教程(含Vue路由和Vuex)-808人已学习 课程介绍 新手入门现代前端开发的不二选择 课程目标: * 学会从简单到复杂企业级应用的VueJS程序编写方法 ...
- vue源码用了哪些设计模式,vue实际开发遇到的难点
Vue组件开发有哪些技巧 这次给大家带来Vue组件开发有哪些技巧,Vue组件开发的注意事项有哪些,下面就是实战案例,一起来看一下. Vue单文件组件开发当使用vue-cli初始化一个项目的时候,会发现 ...
- vscode用鼠标滚轮_前端开发神器 VSCode 使用总结
前端开发神器 VSCode 使用总结 VSCode 是微软出品的,基于 Electron 和 TypeScript 的,集成了 git 版本管理和命令行终端,而且开源稳定,插件丰富,再搭配一款 Chr ...
- FastBuilder 一款让人上瘾的新一代开发神器
这是一款让人上瘾的新一代开发神器,彻底告别Controller.Service.Dao等传统开发方式. FastBuilder 将不再区别"前端"与"后端"的概 ...
- BAT程序员们常用的开发神器
BAT程序员们常用的开发神器 黄小斜 今天 作者丨InfoQ编辑部 工欲善其事必先利其器,一个优秀的程序员除了代码写得好,善于利用各种开发工具同样可以事半功倍.以 BAT 为代表的各大厂程序员们在平时 ...
- 用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
- Java开发神器Lombok的使用与原理
在面向对象编程中必不可少需要在代码中定义对象模型,而在基于Java的业务平台开发实践中尤其如此.相信大家在平时开发中也深有感触,本来是没有多少代码开发量的,但是因为定义的业务模型对象比较多,而需要重复 ...
- 每天一点点之vue框架开发 - axios解决跨越问题
每天一点点之vue框架开发 - axios解决跨越问题 参考文章: (1)每天一点点之vue框架开发 - axios解决跨越问题 (2)https://www.cnblogs.com/cap-rq/p ...
最新文章
- 朱晔的互联网架构实践心得S1E2:屡试不爽的架构三马车
- Qt creator工程项目移植时因环境变换造成qmake错误的解决方案
- 电脑开机进入不了XP界面
- 在Windows Media Center中收听超过100,000个广播电台
- pojBuy Tickets2828线段树或者树状数组(队列中倒序插队)
- 在C#中实现托盘是多么简单
- 从17 个方面对比 Kafka、RabbitMQ、RocketMQ、ActiveMQ 等分布式消息队列
- js实现小时钟,js中Date对象的使用?
- android开发之调皮的权限
- 预处理: 主成分分析和白化
- Chrome中播放时视频编码为.h264和音频编码为acc,采样率为48000,双通道的视频文件时音画不同步
- linux 使用ACR122U-A9设备读写M1卡
- 如何用python做软件导出cad_基于Python运用PyComCAD进行Autocad二次开发实例汇集
- Proteus仿真STM32F103R6输出PWM波
- 计算机不支持win10 1809更新,Win10 1809更新失败解决方法
- ajax改变url参数,js修改URL参数_Javascript/Ajax_网页制作 - www.jscode.cn
- Mac桌面莫名出现黑色输入框的关闭方法
- 火狐浏览器安全连接失败解决办法
- SWOT分析法——进行项目管理的高效方法
- 让电脑无法使用QQ或微信