10 個以上のトップ Vue.js ツールとライブラリ (共有)

Vue は引き続き人気があり、多くの開発者にすぐに採用されており、Vue.js ツールは広く入手可能です。それには理由がないわけではありません。Vue の浅い学習曲線、明確な機能主導の構造、優れたドキュメントにより、初心者でも簡単に始めることができ、経験豊富な開発者は React や Angular などの他のフレームワークから切り替えることができます。

Vue の開発に真剣に取り組むなら、遅かれ早かれ、傑出した重要なツールやライブラリに出会うでしょう。これらを使用すると、Vue 開発者としてのキャリアが向上し、専門家になったように感じることができます。

私は、知っておくべき、そして最終的には Vue.js プロジェクトで使用する必要がある最も有名なツールとライブラリのリストをまとめました。 UI コンポーネント ライブラリのみをリストする他の多くの記事とは異なり、この編集では、Vue エコシステム内のツール、ライブラリ、プラグインの幅広い組み合わせについて調査します。

私は、GitHub の人気やスターではなく、有用性、有効性、独自性に基づいてそれらを選択しました。

Vue CLI

最近のすべての JavaScript アプリケーション フレームワークには、何らかの CLI ツールが必須であるように思えます。 Vueも例外ではありません。 Vue CLI は、Vue を迅速に開発するためのフル機能のツールセットです。通常のプロジェクトのスキャフォールディングに加えて、インスタント プロトタイピング機能を使用して、完全なプロジェクトを作成しなくても新しいアイデアを試すこともできます。

デフォルトでは、Vue CLI は、Babel、TypeScript、ESLint、PostCSS、PWA、Jest、Mocha、Cypress、Nightwatch などの主要な Web 開発ツールとテクノロジーをサポートします。これは拡張可能なプラグイン システムのおかげです。これは、コミュニティが一般的なニーズに合わせて再利用可能なプラグインを構築して共有できることを意味します。

しかし、さらに素晴らしいのは、強力な GUI (CLI に同梱されている Vue UI) です。これを使用すると、ポップアップを必要とせずにプロジェクトを簡単に作成し、それらを構成および管理できます。

ここをクリックして表示します:Vue CLI

VuePress

Vue 内エコシステム 次の主要プレーヤーは、Vue を利用した静的サイト ジェネレーターである VuePress です。元々は技術文書を作成するためのツールとして作成されましたが、現在は小型、コンパクト、かつ強力なヘッドレス CMS となっています。バージョン 1.x からは、優れたブログ機能と強力なプラグイン システムが提供されます。 (技術ドキュメントによると) デフォルトのテーマが付属していますが、カスタム テーマを構築したり、コミュニティからの既製のオプションを使用したりすることもできます。

VuePress では、Markdown でコンテンツを記述し、それを事前にレンダリングされた静的 HTML ファイルに変換できます。これらのファイルが読み込まれると、サイトは Vue、Vue Router、Webpack を利用した単一ページ アプリケーションとして実行されます。

VuePress の主な利点の 1 つは、Markdown ファイルに Vue コードまたはコンポーネントを含めることができることです。これにより、通常の Vue アプリとほぼ同じように Web サイトを開発でき、その利点をすべて活用できるため、優れた機能と柔軟性が得られます。

ここをクリックして表示: VuePress

Gridsome

#GridsomeVuePress と多くの類似点がありますが、データ ソースを扱う際には非常に強力なアプローチを採用します。これにより、アプリケーションからさまざまなデータに接続して消費し、このデータを GraphQL レイヤーで統合することができます。基本的に、Gridsome はフロントエンド機能に Vue を使用し、データ管理に GraphQL を使用します。その仕組みは次の 3 つのステップに要約できます。

• コンテンツを Markdown、JSON、YAML、または CVS データ形式で提供するか、WordPress や Drupal などの CMS からコンテンツをインポートします。

• コンテンツは GraphQL レイヤーに変換され、一元的なデータ管理が可能になります。このデータを使用して、Vue 経由でアプリケーションを構築できます。

• 事前レンダリングされた HTML ファイルを、Netlify、Amazon S3、Now.sh、Surge.sh などの静的 Web ホストまたは CDN にデプロイできます。

Gridsome は、コード分割、アセットの最適化、プログレッシブ イメージ、リンクのプリフェッチなどの優れたベスト プラクティスを提供します。したがって、Gridsome は高速で、PWA 対応で、SEO に適しています。

ここをクリックして表示:

Gridsome

Vuex

状態管理は、開発者が Web アプリケーションを構築するときに遭遇する主要な問題の 1 つです。この問題を解決するために、Vue は状態管理システム Vuex を提供します。これは、アプリケーション内のすべてのコンポーネントの集中ストアとして機能し、状態は予測可能な方法でのみ変更されます。ストアは 4 つの部分に分かれた特別なオブジェクトです。

• state – アプリケーション データを格納するオブジェクト

• getters – 抽象化するオブジェクトが含まれます。状態にアクセスするためのメソッド

• mutations – 状態に直接影響を与えるメソッドを含むオブジェクト

• actions – 突然変異と実行をトリガーするためのメソッドが含まれています オブジェクト

##非同期コードのメソッドのストアは、保守性を高めるために複数のモジュールに分割することもできます。

ここをクリックして表示:Vuex

Nuxt

サーバー側の使用レンダリング (SSR) では、Nuxt が通常使用されます。これは、ユニバーサル アプリケーションを構築するためのシンプルでわかりやすいフレームワークです。またモジュール式なので、アプリケーションに必要なモジュールのみを使用できます。

Nuxt を使用すると、サーバー レンダリング アプリケーション (SSR)、シングルページ アプリケーション (SPA)、プログレッシブ Web アプリケーション (PWA) を作成したり、単に静的サイト ジェネレーターとして使用したりできます。

つまり、Nuxt はアプリケーションの構築と最適化という退屈な作業から解放し、合理化されたより楽しい開発体験を提供します。

ここをクリックして表示: Nuxt

Vuetify

##Vuetify は、現在最高の UI コンポーネント ライブラリの 1 つです。マテリアル デザイン仕様に基づいて適切に設計された多数のコンポーネント (80 以上) が提供され、ほぼすべてのアプリケーションのニーズを満たすことができます。

これを使用して、SSR アプリケーション、SPA、PWA、モバイル アプリケーションを構築できます。新しいアプリを起動したり、既存のアプリに追加したりできます。無料テーマとプレミアムテーマが提供されていますが、独自のテーマを作成することもできます。また、使用されているコンポーネントのみを選択して選択するシステムも提供され、アプリケーションの最終的なサイズが大幅に削減されます。

Vuetify のすべてのコンポーネントは明確な例とともに十分に文書化されています。

ここをクリックして表示:

Vuetify

Quasar

##Quasar

は、「一度書けばどこでも実行できる」という Java 哲学の JavaScript バージョンです。これは、同じコード ベースを使用してさまざまなプラットフォーム用のアプリケーションを作成できる、Vue 対応の汎用フレームワークです。 spas、pwas、ssr アプリ、ハイブリッド モバイル アプリ、マルチプラットフォーム デスクトップ アプリなど、何でも構いません。 優れたドキュメントと多数のコンポーネントがあり、パフォーマンスと応答性を念頭に置いて設計されています。 Quasar は、ベスト プラクティス (html/css/js の縮小化、キャッシュ無効化、ツリー シェーキング、ソース マッピング、遅延読み込みのためのコード分割、es6 トランスポート、コード lint、アクセシビリティ) をデフォルトで統合しているため、アプリケーションのプログラム機能に主に集中できます。新しいプロジェクトを簡単に構築するための cli ツールも提供します。

ここをクリックして表示:

Quasar

ストーリーブック

Vue は主にコンポーネントベースのフレームワークであるため、すべてのアプリケーション開発者にとって、よく書かれた効率的なコンポーネントが重要です。

ストーリーブック

は、このプロセス中に役立つ場合があります。これにより、使いやすく分離された環境で UI コンポーネントを開発、管理、テストできます。このツールを使用すると、開発者はメイン アプリケーションから独立してコンポーネントを作成し、アプリケーション固有の依存関係や要件を気にすることなく、分離された開発環境で対話的にコンポーネントを提示できます。

Storybook は、ニーズに応じて Storybook をカスタマイズするための多くのアドオンと柔軟な API を提供します。静的 Web アプリケーションをエクスポートして、プロジェクトを任意の HTTP サーバーにデプロイすることもできます。

ここをクリックして表示: ストーリーブック

Vue Apollo

##最近、GraphQL について多くの議論が行われています。したがって、すでに Vue Apollo に慣れていて、Vue と統合したい場合は、

Vue Apollo を試してください。このライブラリにより、Vue と GraphQL/Apollo の操作がよりスムーズかつ楽しくなります。

ここをクリックして表示:

Vue Apollo

Eagle.js

##Eagle.js

は、Vue を使用して構築された強力かつ柔軟でユニークなスライドショー システムです。これにより、プレゼンテーション内で再利用可能なコンポーネント、スライド、スタイルを簡単に作成できます。アニメーション、テーマ、インタラクティブなウィジェットもサポートしているため、Web プレゼンテーションの作成に最適です。 Eagle.js にはシンプルでハッキングしやすい API があるため、希望するスライドショーを本当に自由に作成できます。 このライブラリでできる最大のことの 1 つは、スライドを別のファイルに配置して、他のスライド ショーで再利用できることです。特定のスライドから別のスライドにスライドをインポートすることもできます。このような強力なツールを使用すると、複雑でインタラクティブで楽しいプレゼンテーションを作成できます。

ここをクリックして表示:

Eagle.js

5 つのその他の有名な Vue ツールとライブラリ

• Vue DevTools

  は、Vue および Vuex アプリケーションをデバッグするための優れたブラウザ拡張機能です。

• Vue Test Utils

  は、Vue コンポーネントをテストするための便利なユーティリティのコレクションです。

• Vue Router

  は Vue の公式ルートです。

• Vue Native

  は、React Native に似た、モバイル アプリケーション用の JavaScript フレームワークです。

• Weex

  は、Vue などの最新の Web テクノロジーを使用してモバイル アプリケーションを構築するためのフレームワークです。

元のアドレス: https://www.zeolearn.com/interview-questions/vue-js

関連する推奨事項:

2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 最新の 5 つの vue.js ビデオ チュートリアル2020 年厳選

プログラミング関連の知識については、

プログラミング入門

をご覧ください。 ！

以上が10 個以上のトップ Vue.js ツールとライブラリ (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。