"成功的路上,有许多事先无法预料的挫折一个接一个地出现,最后的成功是用坚毅的精神、敏锐的眼光,从挫折中汲取营养,从失败中汲取教训,以此这动力,而奋勇前进"
--出自《稻盛和夫给年轻人的忠告》
前言
随着Vue3的越来越成熟,也出现了很多好用的工具和类库,下面我们介绍几款非常好用的工具或者类库。可以在工作中极大的提高开发效率。多点时间摸鱼
vueuse
vueuse我之前的文章也有过简单的介绍,确实非常的好用,里面有大量好用的函数,直接使用,做到开箱即用。
vueuse 是基于 CompositionAPI 开发的一套实用的函数库,在开始学习这个库的时候,官方建议应该了解一下什么是CompositionAPI。
自v4.0版本之后,vueuse能同时支持vue2 和 vue3,但先安装 vue-demi这个库。不过个人觉得还是用在 vue3中吧,用vue2的写法总感觉怪怪的
官方文档:https://vueuse.org
安装也很简单:
npm i @vueuse/core
用法:
import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core' export default { setup() { // tracks mouse position const { x, y } = useMouse() // is user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorage( 'my-storage', { name: 'Apple', color: 'red', }, ) return { x, y, isDark, store } } }
个人平时用到比较多的几个函数:
useEventListener useTitle useStyleTag useFullscreen useLocalStorage useScriptTag
还有其它很多实用的函数,大家可以去官网查看一下。
volar
对于习惯使用了vscode开发的小伙伴来说,对于vutur肯定不会陌生,但是自从使用了Vue3之后,总感觉vutur不是那么好用,正好尤神也推出了volar。安装了一下确实也带来了很多实用的功能。
与vetur
相同,volar
是一个针对vue
的vscode
插件,不过与vetur
不同的是,volar
提供了更为强大的功能。除了集成了vetur
的相关功能,如高亮、语法提示等之外。还有其它好多功能,如:
- 可以在里面使用多个根标签。
- 可以快速的把