6 wissenswerte Vue-Bibliotheken im Jahr 2022 [„Explosion']

In diesem Artikel stellen wir Ihnen 6 wissenswerte Vue-Bibliotheken vor. Diese 6 Bibliotheken werden im Jahr 2022 höchstwahrscheinlich „explodieren“. Kommen Sie und sammeln Sie sie, um mehr zu erfahren.

2022 Welcher neue Dark Horse wird im Front-End-Kreis auftauchen? Niemand weiß das. 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组件库

Aber nach meinem persönlichen Verständnis ist es sehr wahrscheinlich, dass die folgenden 6- und vue-bezogenen Bibliotheken im 2022 „explodieren“ oder „weitermachen“. explodieren“! Lasst uns schnell lernen! [Verwandte Empfehlungen: vue.js-Video-Tutorial]🎜

1. vueuse: Exklusives Toolset für Vue-Entwickler!

🎜 🎜🎜Offizielle Website-Adresse: https://vueuse.org/🎜

🎜Ein Funktions-Toolset basierend auf der kombinierten API von Vue. 🎜

🎜In jeder Umgebung, in der Vue Composition Api (kombinierte API) verwendet werden kann, können Sie Ihre Entwicklung durch die Installation der vueuse-Toolbibliothek verbessern. Effizienz (ja, sowohl vue2.x als auch vue3.x können abgespielt werden. 🎜🎜kann als exklusives lodash von vue verstanden werden!🎜🎜Welche Toolsets gibt es? Es sind zu viele, man kann sie sich nicht vorstellen, aber man kann sie nicht nutzen! 🎜🎜Im Allgemeinen werden Werkzeugfunktionen in den folgenden Kategorien bereitgestellt: 🎜

• Animation
• Browser
• Komponenten
• Formatierung
li >
• Sensor
• Zustand (Zustandsmaschine)
• Öffentliche Methoden
• Zuhören
• Verschiedenes

🎜Nehmen Sie mich als Beispiel: useTemplateRefsList ist eine super praktische Methode, die ich in letzter Zeit ausgiebig in der tatsächlichen Projektentwicklung verwendet habe. 🎜🎜useTemplateRefsList: Diese Methode kann Ihnen helfen, die Komponentenreferenz in der vue3-Komponenten-API strong> schnell zu binden. Denken Sie gründlicher nach, als es selbst zu realisieren. 🎜rrreee🎜Darüber hinaus warten verschiedene nützliche Tools wie useVModel, useInterval, useCssVar usw. darauf, von Ihnen verwendet zu werden Ausgraben. 🎜🎜Einfach ausgedrückt handelt es sich um eine Werkzeugbibliothek, mit der Sie früher von der Arbeit gehen können. 🎜

2. Pinia: eine besser genutzte vue-Store-Bibliothek (vuex-Konkurrenzprodukt)

🎜Die Welt leidet schon lange untervuex! 🎜

🎜🎜🎜Offizielle Website-Adresse: https://pinia.vuejs.org/🎜🎜Ich glaube, vuex hatte damals den Ruf, „von den Vorfahren offiziell ernannt und persönlich weitergegeben“ zu werden und ausschließlich verwendet vue Der Thron der Staatsverwaltung, aber zu viele Menschen haben bei der Verwendung persönlich die „Komplexität“ und „Unannehmlichkeiten“ seines Designs erlebt.
Ich habe einen Cartoon gezeichnet, um meine Gefühle auszudrücken: 🎜🎜🎜🎜Was sind also die Vorteile von Pinia? 🎜

• 🎜Es kann state direkt bedienen, ohne Action zu registrieren! > Code>. 🎜
• 🎜Es unterstützt die Verbesserung der Funktionen von Pinia durch Plug-Ins. 🎜
• 🎜Gute Typescript-Unterstützung. 🎜
• 🎜Serverseitige Rendering-Unterstützung. 🎜

🎜Definition: 🎜rrreee🎜Verwendung: 🎜rrreee🎜Erscheint es leichter als die Verwendung von vuex? 🎜🎜Es wird gesagt, dass sich vuex 5.x auch auf die Designideen von Pinia im Design der API bezieht, was auch aus diesem Pinia Es wurde auch offiziell anerkannt<br>🎜🎜<img src="https://img.php.cn/upload/image/584/721/203/1643024379649926%20wissenswerte%20Vue-Bibliotheken%20im%20Jahr%202022%20%5B%E2%80%9EExplosion%5D" title="1643024379649926 wissenswerte Vue-Bibliotheken im Jahr 2022 [„Explosion] " alt="6 wissenswerte Vue-Bibliotheken im Jahr 2022 [„Explosion]">🎜🎜Daher lohnt es sich, <code>Pinia zu lernen, und es ist auch ein Framework mit großem Potenzial, im 2022 populär zu werden. 🎜

3. Element Plus: Das echte ElementUI 3.0

🎜Warum ElementUI ist die orthodoxe Fortsetzung von 2.x namens Element Plus, nicht Element 3.0? 🎜

🎜Das ist die Geschichte von Li Kui und Li Gui, jeder versteht sie. 🎜

🎜🎜🎜Offizielle Website-Adresse: https://element-plus.gitee.io/zh-CN/🎜🎜 sagte, dass ElementUI 2.x im vue 2.x ist code>-Version Die bekannteste und am weitesten verbreitete <code>UI-Komponentenbibliothek, ich denke, die meisten Leute in der Branche sollten sie kennen. 🎜

Jetzt ist vue3 die offizielle Version von vue. Mit der Zunahme der vue3-Benutzer wird Element Plus unweigerlich dazukommen leitete eine Phase schnellen Wachstums ein. 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

Was sind die Vorteile von Element Plus?

• API und Element UI 2.x sind hochkonsistent, mit geringer Codemigration und Lernkosten.
• Kernimplementierung ist Element UI 2.x sehr ähnlich, wie zum Beispiel dem PopupManager, den ich eingeführt habe. 🎜
• 🎜Verwenden Sie den Stildefinitionsmodus von css var, um den Stilwechsel reibungsloser zu gestalten. 🎜
• 🎜Vertrauenswürdiges Wartungsteam. 🎜

🎜Man kann mit Sicherheit vorhersagen, dass Element-Plus auch im Jahr 2022 noch beliebt sein wird. 🎜

4. Navie UI: Von Ihnen persönlich empfohlene Komponentenbibliothek

🎜Nicht-KPI-Arbeit, mit ansprechendem Stil und vollständigen Komponenten , der Schreibstil ist herzlich. 🎜

🎜🎜🎜Offizielle Website: https://www.naiveui.com/zh-CN/os-theme🎜🎜Obwohl Navie UI nur in einigen kleinen Projekten und Demoverwendet wird > Code>, aber dieses Projekt macht wirklich Spaß. 🎜🎜Es stammt aus der Open Source eines selbst genutzten Frameworks einer Firma namens „Tucson“. Der Name der Firma und der Name des Frameworks können als sehr interessant bezeichnet werden. 🎜

🎜„Navie UI“ von „Tucson“, emmm....🎜

🎜Lassen Sie uns kurz die Highlights dieses Frameworks auflisten: 🎜

• 🎜Die Vollständigkeit und der Reichtum der Komponenten sind sehr beeindruckend. 🎜
• 🎜Die Skinning- und Theme-Unterstützung ist großartig. 🎜
• 🎜Ausgezeichnete TypeScript-Unterstützung. TS YYDS! 🎜

🎜Mir persönlich gefällt dieses Projekt sehr gut, aber wie weit es gehen kann, muss wirklich überprüft werden. 🎜🎜Ich hoffe, dass es im Jahr 2022 mehr Menschen gefällt und von ihnen genutzt wird! 🎜

5. Nuxt: SSR Die Hoffnung des ganzen Dorfes

🎜Einseitige Anwendungen sind großartig, langsames Laden und niedriger SEO-Score. 🎜

🎜🎜🎜Da React und Vue die beiden dominierenden Akteure sind (Angular: „Was ist mit mir?“), wollen wir eine Web-Single Seite Die Anwendung (SPA) ist zu einfach.
Aber es wirft auch andere Probleme auf: Obwohl die Erfahrung mit Single-Page-Anwendungen ausgezeichnet ist, ist SEO tatsächlich ein Manko. 🎜🎜So entstand SSR. 🎜🎜React hat Next und Vue hat auch Nuxt. 🎜🎜Jeder Bruder, der entschlossen ist, ein guter „SSR“ zu sein, muss jedoch möglicherweise klar genug verstehen: Dies ist ein tiefes Loch, also gehen Sie vorsichtig vor. 🎜🎜Im Jahr 2022 wird SSR bei vielen Unternehmen weiterhin stark nachgefragt sein. vue hat derzeit keinen Konkurrenten im Bereich SSR im Vergleich zu Nuxt Ein fähigerer Gegner, daher können Sie dieses Jahr immer noch an seine Leistung glauben. 🎜

6. vite: Schnell ist gut

🎜webpack ist zwar gut, aber es ist langsam in der Entwicklung. 🎜

🎜🎜🎜Offizielle Website: https://vitejs.cn/🎜

🎜Vite (ausgesprochen ähnlich wie [weɪt], Französisch, was schnell bedeutet) ist ein Webentwicklungs- und Build-Tool, das vom nativen ES-Modul gesteuert wird. Es wird basierend auf den nativen ES-Importen des Browsers in der Entwicklungsumgebung entwickelt und basierend auf Rollup in der Produktionsumgebung gepackt. 🎜

🎜Wer wird 2022 der König des Frontendbaus sein? Meine Antwort ist „Webpack“. (vite: Loben Sie andere auf meiner Website?) 🎜🎜Aber der Markt von webpack wird definitiv durch vite kannibalisiert werden, insbesondere für kleine und mittlere Anwendungen. 🎜🎜Warum? Nur weil es „schnell“ ist! 🎜🎜Der attraktivste Aspekt von webpack 5 ist die „Modulföderation“, die die Führungsrolle von webpack 5 in Mikroanwendungsszenarien festigt. 🎜🎜Aber nicht jeder braucht eine „Modulföderation“. Was viele Unternehmen brauchen, ist SPA, das kurz und schnell ist und sofort genutzt werden kann. 🎜

🎜Sie sagten: vue-cli@next wird auf vite basieren. (Erleben Sie es selbst...) 🎜

🎜vites Wachstum hat seinen Höhepunkt noch lange nicht erreicht, und 2022 ist es wert, sich darauf zu freuen! 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt von6 wissenswerte Vue-Bibliotheken im Jahr 2022 [„Explosion']. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!