"成功的路上，有许多事先无法预料的挫折一个接一个地出现，最后的成功是用坚毅的精神、敏锐的眼光，从挫折中汲取营养，从失败中汲取教训，以此这动力，而奋勇前进"
--出自《稻盛和夫给年轻人的忠告》
01
前言
随着Vue3的越来越成熟，也出现了很多好用的工具和类库，下面我们介绍几款非常好用的工具或者类库。可以在工作中极大的提高开发效率。多点时间摸鱼
02
vueuse
vueuse我之前的文章也有过简单的介绍，确实非常的好用，里面有大量好用的函数，直接使用，做到开箱即用。
vueuse 是基于 CompositionAPI 开发的一套实用的函数库，在开始学习这个库的时候，官方建议应该了解一下什么是CompositionAPI。
自v4.0版本之后，vueuse能同时支持vue2 和 vue3，但先安装 vue-demi这个库。不过个人觉得还是用在 vue3中吧，用vue2的写法总感觉怪怪的
官方文档：https://vueuse.org
安装也很简单：
代码语言：javascript复制npm i @vueuse/core用法：
代码语言：javascript复制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 }
}
}
个人平时用到比较多的几个函数：
代码语言：javascript复制useEventListener
useTitle
useStyleTag
useFullscreen
useLocalStorage
useScriptTag还有其它很多实用的函数，大家可以去官网查看一下。
03
volar
对于习惯使用了vscode开发的小伙伴来说，对于vutur肯定不会陌生，但是自从使用了Vue3之后，总感觉vutur不是那么好用，正好尤神也推出了volar。安装了一下确实也带来了很多实用的功能。
与vetur相同，volar是一个针对vue的vscode插件，不过与vetur不同的是，volar提供了更为强大的功能。除了集成了vetur的相关功能，如高亮、语法提示等之外。还有其它好多功能，如:
- 可以在<template></template>里面使用多个根标签。
- 可以快速的把<template>、<style>、<script>标签分割开
- 在<style>里面显示class的引用情况等
喜欢使用vscode的小伙伴开发vue3是必不可少的一个插件。没有下载的赶紧去下载吧
04
pinia
作为Vuex的升级和替代品，pinia的推出可以说是非常抢眼，简单的api。简单的逻辑让人深深喜爱。个人也是非常喜欢这款状态管理库。
我之前的几篇文章也有对 Pinia 的介绍。如果大家感兴趣可以去查看一下。
使用起来直接 useXXX 就可以了，非常的简单。
05
组件库
再给大家推荐两款不错的UI组件库，vueadminwork系列框架也都它们进行了适配，大家可以关注我的公众号免费获取下载地址。 1、ArcoDesign，ArcoDesign是字节团队出品，大厂加持肯定是没得说，而且其设计风格和漂亮的UI组件，也是让人眼前一亮。 官网地址：https://arco.design/ 最后说的是 ArcoDesign 支持React 和 Vue两大平台，非常不错
2、NaiveUI，NaiveUI是尤神推荐的一款Vue3组件库，个人也是比较喜欢的一款组件库，有众多的组件和好用的功能
官网地址：https://www.naiveui.com/
