[吐血の整理] 40 以上の Vue3 実践ツールを共有

Vue3 が正式にリリースされてから約 2 年が経ち、今年 2 月に Vue3 が正式に Vue プロジェクトのデフォルト バージョンになりました。以下の記事では、Vue3 の実用的なツール、UI ライブラリ、プラグイン、エコロジーを 40 個まとめて紹介しますので、皆様のお役に立てれば幸いです。

1. Vue3 UI コンポーネント ライブラリ

UI コンポーネント ライブラリは、再利用されたインターフェイス設計要素のコレクションとして理解できます。図書館。 UI コンポーネント ライブラリは、システム全体の動作上の接続の役割を果たし、チーム内のデザイナーと開発者間の水平コラボレーションであり、一貫した製品出力を確保するための規範的な基盤です。 (学習ビデオ共有: vue ビデオ チュートリアル )

ここでは、13 の Web UI ライブラリと 4 つのモバイル UI ライブラリを含む 17 の Vue3 UI コンポーネント ライブラリを紹介します。記事「 17 Vue3 実践」をお読みください。 UIコンポーネントライブラリ（Webモバイル）は、》を共有することで入手できます。

#Web UI ライブラリ

#ElementUI Plus: デザイナーと開発者のためのコンポーネント ライブラリ
Ant Design Vue の: Ant Design の Vue は、エンタープライズ レベルのバックエンド製品を実装、開発、提供します
BalmUI: Google のマテリアル デザインに基づいて設計された UI コンポーネント ライブラリ
Naive UI: Vue 3.0/TypeScript に基づく無料のオープンソース フロントエンド UI コンポーネント ライブラリ
arco.design: Bytedance エンタープライズ レベルの製品設計システム、React および Vue Dual バージョンをサポート
Quasar: パフォーマンスを重視した完全なフレームワーク
。 。 。
#モバイル UI ライブラリ

Vant: モバイル コンポーネント ライブラリ

• NutUI: Jingdong スタイルの軽量モバイル Vue コンポーネント ライブラリ

• Varlet: マテリアル スタイル モバイル コンポーネント ライブラリ

• nutui-bingo: に基づく Jingdong の宝くじコンポーネント ライブラリNutUI

2、Vue3 実践開発ツール

前回の記事「7 Vue3 実践開発ツール」収集 (共有) する価値がある

" では、7 つの実用的な Vue3 開発ツールを紹介しました。

#unplugin-vue-components: オンデマンド コンポーネント プラグインを自動的にインポートする

• vuex-persistedstate: Vuex 永続化プラグイン

• vuex-persist: Typescript をサポートする Vuex 永続化プラグイン

• @vueuse/gesture: アプリケーションをインタラクティブにするジェスチャー ライブラリ

• ##unplugin-auto-import

• pinia-plugin-persistedstate: Pinia データ永続ストレージ

##vue-termui.dev: Vue.js に基づくターミナル UI フレームワーク

• 3. Vue3視覚化ツール

テクノロジーの頻繁な更新に伴い、ビジュアル開発ツールは開発効率を向上させる効果的なツールとなっています。前回の記事「[まとめ] 4 つの Vue3 視覚化ツール 」では、次の 4 つの Vue3 視覚化ツールを紹介しました。

Pdfvuer: Vue アプリケーション用 ## の PDF ビューア

#vue3-marquee: シームレスなスクロール コンポーネント

• Vue-ECharts: Baidu ECharts の Vue.js コンポーネント

• iconpark: テクノロジーを通じてベクター アイコン スタイルを推進するオープン ソース アイコン ライブラリ
• 4、Vue3 共通プラグイン

前の記事「

開発効率を向上させるためによく使用される 10 個の Vue3 プラグイン (ぜひ集めてください)」では、効率の向上に役立つ 10 個の vue プラグインについて学びました。

vue-multiselect-next: Vue のユニバーサル選択/複数選択/マーカー コンポーネント

vue-print-nb: ディレクティブ ラッパー

• vue-i18n-next: Vue3 用国際プラグイン

• #vue-cropper: vue 画像トリミング プラグイン

• # Vue Grid Layout: Vue のグリッド レイアウト システム

• Vue Qrcode Reader: QR (二次元コード) コードを検出およびデコードするための Vue.js コンポーネントのセット

• Makeit Captcha: スライダー検証コード プラグイン

• vue3-clipboard: Vue3 に基づくプラグインの貼り付けとコピー

• #vue.draggable Sortable.js をベースにした Vue 3 ドラッグ アンド ドロップ コンポーネント

• BetterScroll は、モバイル端末上のさまざまなスクロール シナリオのニーズを解決するプラグインです (PC では

• 5. Vue3 関連の生態

• 前回の記事「
6 実践的な Vue3 関連」エコロジー (概要共有)

》では、6 つの Vue3 関連エコシステムについて学びました:

Vue プラグイン ライブラリ (vue365.cn)

Pinia: 軽量のレベル状態管理ライブラリ

• Nuxt モジュール

• Nuxt 3: サーバーサイド レンダリング (SSR) の作成に使用できます。アプリケーション

#vuepress: Vue 駆動の静的 Web サイト ジェネレーター

• VueUse: 基本的な Vue 組み合わせユーティリティ関数のコレクション

6、Vue3 アニメーション プラグイン

1) vue-starport

アニメーションを使用した共有コンポーネントのクロスルーティング

github アドレス: https://github.com/antfu/vue -starport /blob/main/README.zh-Hans.md

デモ アドレス: https://vue-starport.netlify.app/

2) @vueuse/motion

Vue Composables でコンポーネントを動かす

公式アドレス: https://motion.vueuse.org/

githubアドレス: https://github.com/vueuse/motion

7. オーディオとビデオのコンポーネント

@vueuse/sound

サウンドエフェクトを再生するための Vue の組み合わせ

公式アドレス: https://sound.vueuse.org/

githubアドレス: https://github.com/VueUse/sound

[関連ビデオチュートリアルの推奨事項: vuejs 入門チュートリアル、Web フロント-紹介終了 ]