6 実践的な Vue3 関連エコロジー (概要共有)

この記事は、実用的な vue 関連の生態学を整理して共有するのに役立ちます。皆さんのお役に立てれば幸いです。

1. Vue プラグイン ライブラリ

Vue プラグイン ライブラリは、最新かつ最も完全な Vue プラグインを収集し、詳細な使用方法を提供します。さまざまな Vue プラグインのメソッド。オンライン プレビューと Vue プラグインのダウンロードをサポートします。 (学習ビデオ共有: vue ビデオ チュートリアル)

公式アドレス: https://www.vue365.cn/

vueプラグイン ライブラリは、Web およびモバイル アプリケーション開発者に最新の無料の Vue.js コンポーネントとプラグインを提供することを目的としています。

2、Ponia

軽量状態管理ライブラリ。API 設計は Vuex 5 提案に近く、Vuex 5 が推奨する状態でもあります。 Vue コア チーム管理ライブラリ。Vue2 と Vue3 の両方をサポートします。

公式アドレス: https://pinia.vuejs.org/

特徴

Pinia には、以下のいくつかの機能:

• 直感的、コンポーネントを定義するのと同じようにストアを定義

• 完全な Typescript サポート

• ミューテーションを削除し、状態、ゲッター、アクションのみを削除します

• アクションは同期および非同期をサポートします

• Vue Devtools は Ponia をサポートし、より良い開発エクスペリエンスを提供します

• 複数ストアの構築と自動コード分割を実現

• 存在を感じさせない超軽量(1kb)

#Pinia を使用すると多くのメリットがあります:

• 開発ツールのサポート
  のタイムラインを追跡します。アクション、ミューテーション
  • ストアは、それを使用するコンポーネントに表示されます
  • タイムトラベルと簡単なデバッグ
• hotmodulechange
  ページを再読み込みせずにストアを変更します
  • 開発中に既存の状態を維持します
• プラグイン: プラグインを使用して Ponia の機能を拡張します

• JS ユーザーに適切な TypeScript サポートまたは

  オートコンプリート機能を提供します

• サーバー側レンダリングのサポート

#3、Nuxt モジュール

Nuxt チームとコミュニティによって作成されました。Nuxt プロジェクトを強化するためのモジュールのリストです。

• 公式アドレス: https://modules.nuxtjs.org/

• github アドレス: https://github.com/nuxt/ modules

4、Nuxt 3

は、使用できる軽量のアプリケーション フレームワークです。サーバーサイド レンダリング (SSR) アプリケーションを作成するには

公式アドレス: https://v3.nuxtjs.org/

中国語ドキュメント: https://www.nuxtjs.org.cn/

vue vue3 構成 API、CLI、DevTools、および Nuxt Kit の統合により、これが優れたコード構成と非常に高度な開発を提供できる完全な一般開発フレームワークであることがわかります。効率性、開発経験、サーバー側レンダリング/静的 Web サイト生成 (SSR/SSG) 機能、これが核心です。

Nuxt 3 の新機能

Nuxt 3 のリファクタリングにより、カーネルが合理化され、高速化され、より良い開発エクスペリエンスが提供されます。

• さらなる軽量化
  最新のブラウザを対象とする場合、サーバーの展開とクライアント側の制作を最大 75 倍削減できます。

• 高速化
  nitro を活用した動的なサーバー側のコード分割により、コールド スタートを最適化します。

• ハイブリッド
  増分静的生成およびその他の高度なパターンが可能になりました。

• サスペンス
  ナビゲーションの前後に任意のコンポーネントからデータを取得します。

• Composition API
  Composition API と Nuxt 3 のコンポーザブルを使用して、真の再利用性を実現します。

• Nuxt CLI
  プロジェクトを簡単に構築し、モジュールを統合するのに役立つ、依存関係のない新しいエクスペリエンス。

• Nuxt Devtools
  詳細情報と、ブラウザーで効率的に作業するためのクイックフィックス。

• Nuxt Kit
  TypeScript に基づいた新しいモジュール開発とクロスバージョン互換性。

• Webpack 5
  構成不要で、ビルドが高速化され、ビルド アーティファクトが小さくなります。

• Vite
  Vite をパッケージャーとして使用して、軽量で高速な HMR を体験してください。

• Vue3
  Vue3 は、次のアプリケーションの強固な基盤になります。

• TypeScript
  ネイティブ TypeScript と ESM から構築されており、追加の手順はありません。

5、vuepress

vuepress は、vue に基づいた静的 Web サイト ジェネレーターであり、ドキュメントの作成に使用できます。 。

公式アドレス: https://v2.vuepress.vuejs.org/zh/

#vuepress は、Vuejs によって公式に提供される Vue 駆動の静的 Web サイトジェネレーターであり、Web を生成しますMarkdown 構文に基づいたページ。簡単に言うとドキュメントサイトを素早く構築するためのツールで、簡単な機能設定を行った後は各Markdownドキュメントを書いてgithubに公開するだけです。

特長

• 技術文書用に最適化された組み込みのマークダウン拡張機能

• 活用機能マークダウン ファイルに埋め込まれた Vue コード

#Vue 駆動のカスタム テーマ システム

• #PWA サポート

• Google Analytics の統合

• デフォルトのテーマ:

• レスポンシブ レイアウト

  • オプションのホームページ

  • シンプルですぐに使えるタイトルベースの検索機能

  • # カスタマイズ可能なナビゲーション バーとサイド サイドバー

  • 自動生成された GitHub リンクとページ編集リンク

6、VueUse

強力な Vue 合成ユーティリティ コレクションは、Composition API に基づいて実装された基本的な Vue 合成ユーティリティ関数のコレクションです。 公式アドレス: https://vueuse.org/

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

##VueUse は、vue-demi の強力な機能を使用して、1 つのパッケージで Vue2 と Vue3 の両方に適用します。

Vue 3 デモ:

vite の使用: https://github.com/vueuse/vueuse-vite-starter

#Webpack の使用: https://github.com/vueuse/vueuse-vue3-example
Vue 2 デモ: Vue CLI

Vue CLI の使用: https://github.com/vueuse/vueuse-vue2-example

また、ライブラリにも注意してください。バージョン:

• バージョン v6.0 以降、vue3 には vue >= v3.2 が必要です。vue2 は
@vue/composition-api>@vue/composition >= に依存する必要があります。 v1.1

[関連ビデオ チュートリアルの推奨事項: vuejs エントリ チュートリアル

、

Web フロントエンド エントリ ]

以上が6 実践的な Vue3 関連エコロジー (概要共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。