2022 年に知っておく価値のある 6 つの Vue ライブラリ ['爆発']

この記事では、知っておく価値のある 6 つの Vue 関連ライブラリを紹介します。これら 6 つのライブラリは、2022 年に「爆発」する可能性が非常に高いです。ぜひ集めて詳細を学んでください。皆さんのお役に立てれば幸いです。

2022 フロントエンドサークルからどのような新たなダークホースが現れるでしょうか?これは誰も知りません。

しかし、私の個人的な理解によると、次の 6 および vue 関連ライブラリは 2022 に「爆発」する可能性が非常に高いです。 「爆破し続けろ！」早速学んでいきましょう！ [関連する推奨事項: vue.js ビデオ チュートリアル ]

1. vueuse: Vue 開発者向けの専用ツールセット!

公式 Web サイトのアドレス: https://vueuse.org/

Vue の結合 API に基づく関数ツールセット。

Vue Comboposition Api (結合 API) を使用できる環境では、vueuse ツール ライブラリをインストールすることでパフォーマンスを向上させることができます。 開発効率 (はい、vue2.x と vue3.x の両方を再生できます)。

は、vue 専用の lodash!

どのようなツールセットがあるのか​​?多すぎて思いつかないのに使えない！

一般に、ツールの機能を提供するために次のカテゴリに分類されます:

• アニメーション
• ブラウザ
• コンポーネント
• フォーマット変更
• センサー
• State(ステートマシン)
• パブリックメソッド
• Listening
• その他

自分自身を取る例として、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 など、さまざまな便利なツールがあなたを待っています。発見に行ってください。 簡単に言うと、これは

仕事を早く終わらせるためのツール ライブラリです。

これを使って早く仕事を終えましょう。 2.

Pinia

: よりよく使用される vue ストア ライブラリ (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 潜在的な炎のフレーム。 3. Element Plus

: 本当の

ElementUI 3.0Why

ElementUI 2.x

正統派の続きは

Element 3.0 ではなく、Element Plus という名前ですか?

これは李逵と李逵の物語です、誰もがそれを理解しています。

公式 Web サイトのアドレス: https://element-plus.gitee.io/zh-CN/

说

ElementUI 2 . x

は、

vue 2.x バージョンの中で最も有名で広く普及している UI コンポーネント ライブラリ で、業界のほとんどの人がそれを認識しているはずです。

Nowvue3 も vue の正式バージョンになりました。vue3 ユーザーの増加に伴い、必然的に Element Plus が登場します。高度成長期。

Element Plus 利点は何ですか?

• API は Element UI 2.x との一貫性が高く、コードの移行と学習コストが低くなります。

• コア実装 は、先ほど紹介した PopupManager などの Element UI 2.x と非常によく似ています。

• スタイルの切り替えをよりスムーズにするには、css var のスタイル定義モードを使用します。

• 信頼できるメンテナンスチーム。

Element-Plus は 2022 年も依然として人気があると大胆に予測できます。

4. Navie UI: あなたが個人的に推奨するコンポーネント ライブラリ

は、心地よいスタイル、完全なコンポーネント、フレンドリーな書き方を備えた非 KPI 作品です。 。

公式 Web サイト: https://www.naiveui.com/zh-CN/os-theme

一部の小規模プロジェクトのみですがNavie UI は Demo で使用されていますが、このプロジェクトは本当に楽しいです。

「Tucson」という自作フレームワークのオープンソースから来ており、会社名もフレームワーク名も非常に興味深いと言えます。

#「Tucson」の「Navie UI」、えっと....

このフレームワークのハイライトを簡単に挙げてみましょう:

• コンポーネントの完成度と豊富さは非常に印象的です。

• スキニングとテーマのサポートは優れています。

#優れた TypeScript サポート。 TSイーズ！
私は個人的にこのプロジェクトがとても気に入っていますが、どこまで実現できるかは検証するのに時間が必要です。

2022 年はより多くの人に気に入っていただき、使っていただければ幸いです。

5.

Nuxt

: SSR 村全体の希望

シングルページ アプリケーションは優れていますが、読み込みが遅く、 SEO スコアが低い。

現在、

React

と Vue が 2 つの主要な企業です (Angular: 「私はどうでしょうか?」 )、web シングル ページ アプリケーション (SPA) が必要ですが、これは単純すぎます。 しかし、他の問題も引き起こします。単一ページ アプリケーションのエクスペリエンスは優れていますが、SEO
には確かに欠点があります。 そこで、

SSR

が誕生しました。

React

Next を使用すると、Vue には Nuxt も含まれます。 ただし、「SSR」で良い仕事をしようと決意しているすべての兄弟は、これは深い落とし穴であるため、慎重に作業を進めることを十分に明確に理解する必要があるかもしれません。

2022 年も、

SSR

は多くの企業から依然として強い需要があるでしょう。vue 現在、SSR にこれより優れた はありません。 Nuxt はより有能な相手であるため、今年もそのパフォーマンスを信頼できます。 6.

vite

: 速いことは良いことです

webpack は確かに優れていますが、開発が遅いです。

公式ウェブサイト: https://vitejs.cn/

Vite (フランス語、速い [weɪt] に似た発音) (意味) は、ネイティブ ES モジュールによって駆動される Web 開発ビルド ツールです。開発環境ではブラウザのネイティブ ES インポートに基づいて開発され、運用環境ではロールアップに基づいてパッケージ化されます。

2022 年のフロントエンド構築の王者は誰になるでしょうか?私の答えは「ウェブパック」です。 (vite: 私のサイトで他の人を褒めていますか?)

しかし、

webpack

の市場は、特に中小規模のアプリケーションでは間違いなく vite によって共食いされるでしょう。 。 ＃＃＃＃＃＃なぜ？理由は「速い」からです！

webpack 5

の最も魅力的な側面は、マイクロアプリケーション シナリオにおける

webpack 5

のリーダーシップを確立する「モジュール フェデレーション」です。 しかし、誰もが「モジュール フェデレーション」を必要とするわけではありません。多くの企業が必要としているのは、短く、簡単で、高速で、一度始めれば使える SPA です。

あなたは次のように言いました: vue-cli@next

は

vite

に基づいています。 (ご自身で体験してください...) vite

の成長はピークには程遠く、2022 年が楽しみです。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上が2022 年に知っておく価値のある 6 つの Vue ライブラリ ['爆発']の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。