6 bibliothèques vue à connaître en 2022 ['explosion']

Cet article partagera avec vous 6 bibliothèques liées à vue qui valent la peine d'être connues. Ces 6 bibliothèques sont très susceptibles de "exploser" en 2022. Venez les collectionner pour en savoir plus.

2022 Quel nouveau cheval noir va émerger dans le cercle du front-end ? Personne ne le sait. 2022 年前端圈又会蹦出什么新黑马呢？这个无人知晓。

但根据我个人理解，下面这 6款 和 vue 相关的库，在 2022 年极有可能会“爆火”，或者“继续爆火”！让我们赶紧学起来！【相关推荐：vue.js视频教程】

一、vueuse：  vue开发者专属工具集！

官网地址：https://vueuse.org/

一款基于Vue组合式API的函数工具集。

在任何可以使用 Vue Composition Api (组合式API) 的环境下，你都可以通过安装 vueuse 工具库，来提高你的开发效率（没错，vue2.x 和 vue3.x 都能玩 ）。

可以理解为 vue 专属的 lodash!

它都有哪些工具集呢？那可太多了，只有你想不到，没有你用不到！

总体上分为以下几个类别提供工具函数：

• 动画
• 浏览器
• 组件
• 格式化
• 传感器
• State(状态机)
• 公共方法
• 监听
• 杂项

以我自己为例，useTemplateRefsList 就是我最近在实际项目开发中大量使用的超级实用的方法。

useTemplateRefsList： 这个方法可以在 vue3 组件式 api 中帮助你快速绑定 for 循环中的 组件ref。比自己实现考虑得更加完备。

<script setup>
import { onUpdated } from &#39;vue&#39;
import { useTemplateRefsList } from &#39;@vueuse/core&#39;

const refs = useTemplateRefsList<HTMLDivElement>() // 用来存储元素 ref 的数组

onUpdated(() => {
  console.log(refs)
})
</script>
<template>
  <!-- 在这里绑定 ref -->
  <div v-for="i of 5" :key="i" :ref="refs.set"></div>
</template>

另外，还有各种形形色色的好用工具，如 useVModel、useInterval, useCssVar 等等，都等着大家去发掘。

简单来说，这是一个能让你更早下班的工具库，早用早下班。

二、Pinia：更好用的 vue store 库( vuex 竞品)

天下苦 vuex 久矣！

官网地址：https://pinia.vuejs.org/

想当年，vuex 顶着 “官方钦定，尤老祖亲传” 的名声独占 vue 状态管理的王座，但太多太多的人在使用时都亲身感受到了其设计上的“复杂”与“不便”。
我随手画了个漫画，表达我的感受：

那么，Pinia 到底有啥优势呢？

• 它不用注册 Mutation! Action 就能直接操作 state。

• 它支持通过插件提升 Pinia 的能力。

• 良好的 Typescript 支持。

• 服务器端渲染支持。

定义：

// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

使用：

import { useCounterStore } from '@/stores/counter'
export default {
  setup() {
    const counter = useCounterStore()
    counter.count++
    counter.$patch({ count: counter.count + 1 })
    counter.increment()
  },
}

看起来是不是比使用 vuex 要轻便一些？

据说，vuex 5.x 在 API 的设计上也，也参考了 Pinia 的设计思路，由此也能见得 Pinia 也得到了官方的认可

因此，Pinia 确实值得一学，在 2022 年也是非常有潜力大火的框架。

三、Element Plus: 真正的 ElementUI 3.0

为啥 ElementUI 2.x 的正统续作叫 Element Plus, 而不叫 Element 3.0 ？

这是个李逵和李鬼的故事，懂的都懂。

官网地址：https://element-plus.gitee.io/zh-CN/

说 ElementUI 2.x 是 vue 2.x 版本里最为著名与传播最广的 UI组件库

Mais selon ma compréhension personnelle, les bibliothèques suivantes liées à 6 et vue sont très susceptibles "d'exploser" en 2022 , ou de "continuer exploser"! Apprenons vite ! [Recommandations associées : tutoriel vidéo vue.js]🎜

1. vueuse : ensemble d'outils exclusif pour les développeurs vue !

🎜 🎜🎜Adresse officielle du site Web : https://vueuse.org/🎜

🎜Un ensemble d'outils de fonctions basé sur l'API combinée de Vue. 🎜

🎜Dans tout environnement où Vue Composition Api (API combinée) peut être utilisé, vous pouvez améliorer votre développement en installant la bibliothèque d'outils vueuse Efficiency (oui, vue2.x et vue3.x peuvent être lus). 🎜🎜peut être compris comme le lodash exclusif de vue !🎜🎜De quels ensembles d'outils dispose-t-il ? Il y en a trop, on n’y pense pas, mais on ne peut pas les utiliser ! 🎜🎜Généralement, les fonctions des outils sont fournies dans les catégories suivantes : 🎜

• Animation
• Navigateur
• Composants
• Formatage
li >
• Capteur
• État (machine à états)
• Méthodes publiques
• Écoute
• Divers

🎜Prenez-moi comme exemple, useTemplateRefsList est une méthode super pratique que j'ai récemment largement utilisée dans le développement de projets réels. 🎜🎜useTemplateRefsList : Cette méthode peut vous aider à lier rapidement la référence du composant dans l'API du composant vue3 strong>. Réfléchissez plus attentivement que de vous en rendre compte vous-même. 🎜rrreee🎜De plus, il existe divers outils utiles, tels que useVModel, useInterval, useCssVar, etc., qui attendent tous que vous les utilisiez Creuser. 🎜🎜En termes simples, il s'agit d'une bibliothèque d'outils qui vous permet de quitter le travail plus tôt. Utilisez-la tôt et quittez le travail plus tôt. 🎜

2. Pinia : une bibliothèque vue store mieux utilisée (produit concurrent vuex)

🎜Le monde souffrevuex depuis longtemps ! 🎜

🎜🎜🎜Adresse officielle du site : https://pinia.vuejs.org/🎜🎜Je pense qu'à l'époque, vuex avait la réputation d'être "officiellement nommé et transmis personnellement par les ancêtres" pour monopoliser vue Le trône de la gestion étatique, mais trop de gens ont personnellement expérimenté la « complexité » et les « inconvénients » de sa conception lors de son utilisation.
J'ai dessiné un dessin pour exprimer mes sentiments : 🎜🎜🎜🎜Alors, quels sont les avantages du Pinia ? 🎜

• 🎜Il peut directement faire fonctionner state sans enregistrer le code <code>Mutation ! >. 🎜
• 🎜Il prend en charge l'amélioration des capacités de Pinia via des plug-ins. 🎜
• 🎜Bon support Typescript. 🎜
• 🎜Prise en charge du rendu côté serveur. 🎜

🎜Définition : 🎜rrreee🎜Utilisation : 🎜rrreee🎜Est-ce que cela semble plus léger que d'utiliser vuex ? 🎜🎜On dit que vuex 5.x fait également référence aux idées de conception de Pinia dans la conception de l'API, ce qui peut également être vu à partir de ce Pinia Il a également été officiellement reconnu<br>🎜🎜<img src="https://img.php.cn/upload/image/584/721/203/1643024379649926%20biblioth%C3%A8ques%20vue%20%C3%A0%20conna%C3%AEtre%20en%202022%20%5Bexplosion%5D" title="1643024379649926 bibliothèques vue à connaître en 2022 [explosion] " alt="6 bibliothèques vue à connaître en 2022 [explosion]">🎜🎜Par conséquent, <code>Pinia vaut effectivement la peine d'être appris, et c'est également un framework avec un grand potentiel pour devenir populaire en 2022. 🎜

3. Element Plus : le véritable ElementUI 3.0

🎜Pourquoi ElementUI est la suite orthodoxe de 2.x appelée Element Plus, pas Element 3.0 ? 🎜

🎜C'est l'histoire de Li Kui et Li Gui, tout le monde la comprend. 🎜

🎜🎜🎜Adresse officielle du site : https://element-plus.gitee.io/zh-CN/🎜🎜 dit que ElementUI 2.x est dans la vue 2.x code> version La <code>bibliothèque de composants d'interface utilisateur la plus célèbre et la plus répandue, je pense que la plupart des gens de l'industrie devraient la reconnaître. 🎜

Maintenant, vue3 est devenu la version officielle de vue Avec l'augmentation du nombre d'utilisateurs de vue3, Element Plus le sera inévitablement. a marqué le début d’une période de croissance rapide. vue3 也成为 vue 的正式版本，随着 vue3 用户的增多，Element Plus 也必然会迎来一次高速增长期。

Element Plus 有什么优点呢？

• API 和 Element UI 2.x 高度一致，迁移代码和学习成本小。

• 核心实现 和 Element UI 2.x 高度相似，比如我介绍过的 PopupManager 等。

• 使用 css var 的样式定义模式，样式切换更丝滑。

• 值得信任的维护团队。

可以大胆预测，Element-Plus 2022年其依然会爆火。

四、Navie UI：尤某亲自推荐的组件库

非KPI作品，风格讨喜，组件完备，文风亲切。

官方网站：https://www.naiveui.com/zh-CN/os-theme

虽然只在一些小型项目及 Demo 中使用了 Navie UI，但这款项目确实是实实在在的讨喜。

它来自一个名叫“图森”公司自用框架的开源，这公司名和这框架名可以说非常有梗了。

来自“图森”的“Navie UI”，emmm....

让我们来简单列举一下此框架的亮点：

• 组件完善和丰富程度都非常可观。

• 换肤和主题支持非常棒。

• TypeScript 优秀的支持。TS YYDS！

我个人是非常喜欢这个项目的，不过它能走多远确实需要时间的验证。

希望它在 2022 能够被更多人喜欢和使用！

五、Nuxt：SSR 全村的希望

单页应用万般好，加载慢，SEO得分少。

在 React 和 Vue 两家独大（Angular:"我呢？"）的当前，我们要一个 web 单页应用（SPA），实在过于简单。
但也引发了其他的问题：单页应用虽然体验极好，但 SEO 确实是短板。

因此，SSR 应运而生。

React 有了 Next，Vue 也就有了 Nuxt。

不过，每一个立志想做好“SSR”的兄弟，可能都得有足够清醒的认识：这是个深坑，清谨慎前行。

2022年，SSR 依然会是众多公司的强需求，vue 目前在 SSR 这块还没出现比 Nuxt 更能打的对手，因此依然可以相信它在本年的表现。

六、vite：快就是好

webpack 确实好，但它开发时就是慢。

官方网站：https://vitejs.cn/

Vite(读音类似于[weɪt]，法语，快的意思) 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

2022 年谁会是前端构建界的王者？我的回答是“webpack”。（vite: 你在我的地盘夸别人？）

但 webpack 的市场一定会被 vite 蚕食掉一大块，尤其是中小型应用。

为什么？就是因为“快”！

webpack 5 最吸引人的地方是"模块联邦"，它奠定了 webpack 5 在微应用场景下的领先性。

但不是所有人都需要“模块联邦”啊，有很多企业的需求就是 SPA，就是短平快，就是上手就能干。

尤某说：vue-cli@next 会基于 vite。（自己体会...）

vite

Quels sont les avantages de Element Plus ?

• API et Element UI 2.x sont très cohérents, avec une faible migration de code et frais d'apprentissage.
• L'implémentation principale est très similaire à Element UI 2.x, comme le PopupManager que j'ai présenté. 🎜
• 🎜Utilisez le mode de définition de style de css var pour rendre le changement de style plus fluide. 🎜
• 🎜Équipe de maintenance digne de confiance. 🎜

🎜On peut prédire avec audace que Element-Plus sera toujours populaire en 2022. 🎜

4. Navie UI : bibliothèque de composants recommandée par vous personnellement

🎜Travail sans KPI, avec un style agréable et des composants complets , le style d'écriture est cordial. 🎜

🎜🎜🎜Site officiel : https://www.naiveui.com/zh-CN/os-theme🎜🎜Bien que Navie UI ne soit utilisé que dans certains petits projets et Démo code>, mais ce projet est vraiment agréable. 🎜🎜Il vient de l'open source d'un framework auto-utilisé d'une société appelée "Tucson". Le nom de la société et le nom du framework peuvent être considérés comme très intéressants. 🎜

🎜"Navie UI" de "Tucson", emmm....🎜

🎜Listons brièvement les points forts de ce framework : 🎜

• 🎜L'exhaustivité et la richesse des composants sont très impressionnantes. 🎜
• 🎜Le support du skinning et du thème est excellent. 🎜
• 🎜Excellente prise en charge de TypeScript. TS YYDS ! 🎜

🎜Personnellement, j'aime beaucoup ce projet, mais il faut vraiment du temps pour vérifier jusqu'où il peut aller. 🎜🎜J'espère qu'il pourra être apprécié et utilisé par davantage de personnes en 2022 ! 🎜

5. Nuxt : SSR L'espoir de tout le village

🎜Applications d'une seule page sont excellents, chargement lent et faible score SEO. 🎜

🎜🎜🎜Maintenant que React et Vue sont les deux acteurs dominants (Angular : "Et moi ?"), nous voulons un single web page L'application (SPA) est trop simple.
Mais cela soulève également d'autres problèmes : bien que l'expérience des applications monopage soit excellente, le SEO est effectivement une lacune. 🎜🎜Ainsi, SSR est né. 🎜🎜React a Next, et Vue a également Nuxt. 🎜🎜Cependant, tout frère déterminé à être un bon « RSS » devra peut-être avoir une compréhension suffisamment claire : c'est un gouffre profond, alors procédez avec prudence. 🎜🎜En 2022, SSR sera toujours très demandé par de nombreuses entreprises. vue n'a actuellement aucun concurrent en SSR par rapport à Nuxt. Un adversaire plus compétent, vous pouvez donc toujours croire en sa performance cette année. 🎜

6. vite : Rapide, c'est bien

🎜webpack est en effet bon, mais son développement est lent. 🎜

🎜🎜🎜Site officiel : https://vitejs.cn/🎜

🎜Vite (prononcé similaire à [weɪt], français, signifiant rapide) est un outil de développement et de construction Web piloté par le module ES natif. Il est développé sur la base des importations ES natives du navigateur dans l'environnement de développement et packagé sur la base du Rollup dans l'environnement de production. 🎜

🎜Qui sera le roi de la construction front-end en 2022 ? Ma réponse est "webpack". (vite : faites-vous l'éloge des autres sur mon site ?) 🎜🎜Mais le marché de webpack sera certainement cannibalisé par vite, en particulier pour les applications de petite et moyenne taille. 🎜🎜Pourquoi ? Tout simplement parce que c’est « rapide » ! 🎜🎜L'aspect le plus attrayant du webpack 5 est la "fédération de modules", qui établit le leadership du webpack 5 dans les scénarios de micro-applications. 🎜🎜Mais tout le monde n'a pas besoin d'une "fédération de modules". Ce dont de nombreuses entreprises ont besoin, c'est de SPA, qui est court, simple et rapide, et peut être utilisé une fois que vous avez commencé. 🎜

🎜Vous avez dit : vue-cli@next sera basé sur vite. (Faites-en l'expérience par vous-même...) 🎜

🎜La croissance de vite est loin d'avoir atteint son apogée, et 2022 mérite d'être attendue avec impatience ! 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!