ホームページ > 記事 > ウェブフロントエンド > 2022 年に知っておく価値のある 6 つの Vue ライブラリ ["爆発"]
この記事では、知っておく価値のある 6 つの Vue 関連ライブラリを紹介します。これら 6 つのライブラリは、2022 年に「爆発」する可能性が非常に高いです。ぜひ集めて詳細を学んでください。皆さんのお役に立てれば幸いです。
2022
フロントエンドサークルからどのような新たなダークホースが現れるでしょうか?これは誰も知りません。
しかし、私の個人的な理解によると、次の 6
および vue
関連ライブラリは 2022
に「爆発」する可能性が非常に高いです。 「爆破し続けろ!」早速学んでいきましょう! [関連する推奨事項: vue.js ビデオ チュートリアル ]
vueuse
: Vue 開発者向けの専用ツールセット! 公式 Web サイトのアドレス: https://vueuse.org/
Vue の結合 API に基づく関数ツールセット。
Vue Comboposition Api (結合 API) を使用できる環境では、vueuse
ツール ライブラリをインストールすることでパフォーマンスを向上させることができます。 開発効率 (はい、vue2.x
と vue3.x
の両方を再生できます)。
は、vue
専用の lodash
!
どのようなツールセットがあるのか?多すぎて思いつかないのに使えない!
一般に、ツールの機能を提供するために次のカテゴリに分類されます:
自分自身を取る例として、useTemplateRefsList
は、私が最近 実際のプロジェクト開発で広範囲に使用している非常に実用的なメソッドです。
useTemplateRefsList: このメソッドは、vue3 コンポーネント API
## の for
コンポーネント ref# をすばやくバインドするのに役立ちます。自分で理解するよりも徹底的に考えてください。 <script setup>
import { onUpdated } from 'vue'
import { useTemplateRefsList } from '@vueuse/core'
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>
さらに、
、useInterval
、useCssVar
など、さまざまな便利なツールがあなたを待っています。発見に行ってください。 簡単に言うと、これは
これを使って早く仕事を終えましょう。 2.
Piniavue ストア
ライブラリ (vuex
競合製品)
vuexお久しぶりです!
公式サイトアドレス: https://pinia.vuejs.org/
当時を思い出すと、
vuex 「先人が認め、受け継いできた公認」という名声が独占的にステータス管理の座を占めているvue
ですが、その設計の「複雑さ」や「不便さ」を実際に使ってみた人はあまりにも多いです。 自分の気持ちを表現するために漫画を描きました:
それでは、
Pinia の利点は何でしょうか?
! Action
を登録せずに、state
を直接操作できます。
を強化する機能をサポートします。
サポート。
// 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
を使用するよりも軽いように思えますか?
も API の設計において Pinia
の設計思想を参考にしていると言われており、この Pinia からもそれがわかります。
これも公式に認められています
したがって、
Pinia は学ぶ価値があり、## でも非常に役立ちます。 #2022 潜在的な炎のフレーム。
3.
Element Plus
Why正統派の続きは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 年も依然として人気があると大胆に予測できます。
Navie UI
: あなたが個人的に推奨するコンポーネント ライブラリ は、心地よいスタイル、完全なコンポーネント、フレンドリーな書き方を備えた非 KPI 作品です。 。
公式 Web サイト: https://www.naiveui.com/zh-CN/os-theme
一部の小規模プロジェクトのみですがNavie UI
は Demo
で使用されていますが、このプロジェクトは本当に楽しいです。
「Tucson」という自作フレームワークのオープンソースから来ており、会社名もフレームワーク名も非常に興味深いと言えます。
#「Tucson」の「Navie UI」、えっと....このフレームワークのハイライトを簡単に挙げてみましょう:
2022 年はより多くの人に気に入っていただき、使っていただければ幸いです。
5.
NuxtSSR
村全体の希望
現在、
React と Vue
が 2 つの主要な企業です (Angular: 「私はどうでしょうか?」 )、web
シングル ページ アプリケーション (SPA
) が必要ですが、これは単純すぎます。 しかし、他の問題も引き起こします。単一ページ アプリケーションのエクスペリエンスは優れていますが、
SEO
には確かに欠点があります。 そこで、
が誕生しました。
Next
を使用すると、Vue
には Nuxt
も含まれます。 ただし、「SSR」で良い仕事をしようと決意しているすべての兄弟は、これは深い落とし穴であるため、慎重に作業を進めることを十分に明確に理解する必要があるかもしれません。
2022 年も、
SSR は多くの企業から依然として強い需要があるでしょう。vue
現在、SSR
にこれより優れた はありません。 Nuxt
はより有能な相手であるため、今年もそのパフォーマンスを信頼できます。 6.
公式ウェブサイト: https://vitejs.cn/
Vite (フランス語、速い [weɪt] に似た発音) (意味) は、ネイティブ ES モジュールによって駆動される Web 開発ビルド ツールです。開発環境ではブラウザのネイティブ ES インポートに基づいて開発され、運用環境ではロールアップに基づいてパッケージ化されます。2022 年のフロントエンド構築の王者は誰になるでしょうか?私の答えは「ウェブパック」です。 (vite: 私のサイトで他の人を褒めていますか?)
しかし、
webpack の市場は、特に中小規模のアプリケーションでは間違いなく vite
によって共食いされるでしょう。 。 ######なぜ?理由は「速い」からです!
の最も魅力的な側面は、マイクロアプリケーション シナリオにおける
webpack 5 のリーダーシップを確立する「モジュール フェデレーション」です。 しかし、誰もが「モジュール フェデレーション」を必要とするわけではありません。多くの企業が必要としているのは、短く、簡単で、高速で、一度始めれば使える
SPA
です。
あなたは次のように言いました:
vue-cli@next
viteに基づいています。 (ご自身で体験してください...)
の成長はピークには程遠く、2022 年が楽しみです。vite
プログラミング関連の知識について詳しくは、プログラミング入門
をご覧ください。 !
以上が2022 年に知っておく価値のある 6 つの Vue ライブラリ ["爆発"]の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。