収集する価値のある 7 つの実用的な Vue3 開発ツール (共有)

他の大規模なフレームワークと比較して、Vue はより柔軟であるため、開発者は Vue を使用して新しいプロジェクトを開発するか、既存のプロジェクトに Vue を導入するかを選択できます。コードが簡潔で使いやすいため、開発者に好まれています。よく使われる Vue 開発ツール 7 つを以下の記事にまとめて紹介しますので、ぜひお気に入りに追加してください。

1. unplugin-vue-components

antfu はオンデマンド コンポーネントを自動的にインポートし、すぐに使える Vue 2 と Vue 3 をサポートします。 Tree -shakable は、一般的な UI ライブラリ用の組み込みパーサーを使用して、使用するコンポーネントのみを登録します。 (学習ビデオ共有: vuejs チュートリアル)

ダウンロード アドレス: https://www.npmjs.com/package/unplugin-vue-components

unplugin-vue-components プラグインは、コンポーネントを Vue ファイルに自動的に導入できます (プロジェクト独自のコンポーネントやさまざまなコンポーネント ライブラリ内のコンポーネントを含む)。作者は Vite エコシステムで有名な Anthony Fu です。 。

このプラグインを使用した後は、import { Button } from 'ant-design-vue' のようなコードを手動で記述する必要はありません。プラグインは自動的に実行します。テンプレートで使用されているカスタム コードを認識し、コンポーネントを定義して自動的に登録します。

2. vuex-persistedstate

vuex はグローバルな状態管理を実行できますが、データは更新後に消えます。私たちは見たくないのです。これを解決するにはどうすればよいでしょうか? ローカル ストレージを組み合わせてデータの永続性を実現するか、永続化プラグイン vuex-persistedstate を使用します。

ページのリロードの間に Vuex の状態を保持してリロードできます

github アドレス: https://github.com/robinvdvleuten/vuex-persistedstate

3. vuex-persist

は、アプリケーションの状態を永続ストレージなどに保存できる Typescript Vuex プラグインをサポートしています。 Cookie または localStorage

公式アドレス: https://championswimmer.in/vuex-persist/

4. @vueuse/ジェスチャー

##アプリケーションをインタラクティブにするジェスチャー ライブラリ

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

5、unplugin-auto-import

antfu は、Vite、Webpack、Rollup、esbuild API を自動的にインポートします。 TypeScript がサポートされています。

github アドレス: https://github.com/antfu/unplugin-auto-import

#6、pinia-plugin - persedstate (Pinia データ永続ストレージ)

Pinia ストアの構成可能な永続性

github アドレス: https://github.com/prazdevs/ pinia-plugin- persistedstate

7、Vue TermUI

Vue.js フレームワークに基づくターミナル UI。最新のターミナル アプリケーションを簡単に構築するには

公式アドレス: https://vue-termui.dev/

(学習ビデオ共有:

Web フロント-開発終了, プログラミング入門)

以上が収集する価値のある 7 つの実用的な Vue3 開発ツール (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。