vue.js ファミリー バケットには何が含まれますか?

Vue.js ファミリー バケットには、スキャフォールディング vue-cli、ルーティング vue-router、状態管理モード vuex、axios、および UI フレームワークが含まれています。 Vue は、ユーザー インターフェイスを構築するための JavaScript フレームワークで、標準の HTML、CSS、および JavaScript に基づいて構築されており、開発者がユーザー インターフェイスを効率的に開発できるように、一連の宣言型およびコンポーネントベースのプログラミング モデルを提供します。

このチュートリアルのオペレーティング システム: Windows 10 システム、vue バージョン 3.0、Dell G3 コンピューター。

Vue.js ファミリー バケットは、スキャフォールディング vue-cli、ルーティング vue-router、状態管理モード vuex、axios、UI フレームワークで構成されています。 Vue (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための JavaScript フレームワークです。標準の HTML、CSS、および JavaScript に基づいて構築されており、開発者がユーザー インターフェイスを効率的に開発できるよう、宣言型のコンポーネント ベースのプログラミング モデルを提供します。

1. プロジェクト構築ツール: vue-cli

vue-cli はスキャフォールディングとも呼ばれ、Vue.js 開発の標準ツールとして正式に定義されています。 Vue-cli は、Vue.js に基づく迅速な開発のための完全なシステムであり、Vue.js Webpack プロジェクト テンプレートを自動的に生成できます。 Vue cli は、新しいプロジェクトのカスタマイズ、プロトタイプの構成、プラグインの追加、Webpack 構成の検査のための強力な機能を提供します。 @vue/cli 3.x バージョンでは、vue create コマンドを通じて新しいプロジェクトのスキャフォールディングをすばやく作成でき、vue 2.x のようにプロジェクトを構築するために webpack に依存する必要はありません。

vue-cli スキャフォールディングは scirpt タグの導入と比較して以下のような特徴があります:

1) 豊富な機能

Babel、TypeScript、ESLint、PostCSS、PWA、単体テストとエンドツーエンド テストはすぐにサポートされます。

2) 拡張が簡単

そのプラグイン システムにより、コミュニティは共通のニーズに基づいて再利用可能なソリューションを構築して共有できます。

3) イジェクトは必要ありません

Vue CLI は完全に構成可能であり、イジェクトは必要ありません。こうすることで、プロジェクトを長期間更新し続けることができます。

4) CLI のグラフィカル インターフェイス

サポートされているグラフィカル インターフェイスを通じてプロジェクトを作成、開発、管理します。

5) プロトタイプを即座に作成

単一の Vue ファイルを使用して、新しいインスピレーションを即座に実装します。

6) 将来性のある

最新のブラウザー用にネイティブ ES2015 コードを簡単に生成したり、Vue コンポーネントをネイティブ Web コンポーネントとして構築したりできます。

インストール

npm install -g @vue/cli
# OR
yarn global add @vue/cli

//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
vue create my-project
# OR
vue ui

2. ルーティング マネージャー: vue-router

vue-router は、Vue によって起動された公式のルーティング マネージャーです。は主に URL の管理、URL とコンポーネント間の対応の実現、URL を介したコンポーネント間の切り替えに使用され、シングルページ アプリケーションの構築を容易にします。主に次の機能があります:

1) ネストされたルーティング/ビュー テーブル

2) モジュール式のコンポーネントベースのルーティング構成

3) ルーティング パラメータ、クエリ、ワイルドカード

4) Vue.js トランジション システムに基づくビュートランジション効果

##5) きめ細かいナビゲーション コントロール

##6) 自動的にアクティブ化された CSS クラスとのリンク

7) HTML5 履歴モードまたはハッシュ モード、IE9 で自動的にダウングレード

8) カスタマイズされたスクロール バーの動作

vue ルーターのインストール コード

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. 状態管理モード: vuex

一部の大規模なプロジェクトでは、多数のコンポーネントと複雑なデータ構造を含む 1 つのページに遭遇することがありますが、それらは異なる場合があります。コンポーネントは、相互の状態にも影響を与えます。この場合、コンポーネント ツリー内のイベント フローはすぐに非常に複雑になり、デバッグが非常に困難になる可能性があります。この問題を解決するために、Vuex の状態管理モデルが導入されました。Vuex は状態管理モデルの実装ライブラリであり、主にプラグインの形で Vue.js と組み合わせて使用​​されます。 Vue.js での複雑なタスクの管理、コンポーネント イベント フロー。

vuex インストール方法

npm install vuex --save

4. axios

#Axios は Promise ベースの HTTP ライブラリで、簡単に言うと get 、投稿リクエスト。

Axios の機能

1) ブラウザーから XMLHttpRequest を作成します

2) node.js から http リクエストを作成します

3) Promise API をサポートします

4) リクエストとレスポンスを傍受する

5) リクエスト データとレスポンス データを変換する

6) リクエストをキャンセルする機能

7) JSON データを自動的に変換する

8) クライアントは XSRF に対する防御をサポートします

インストール方法

npm install axios

または直接導入

dc3d2a42cde368288cf027f65da6001a

5. UI フレームワーク: iview、vant、elementUI

iview Vue に基づく高品質の UI コンポーネント ライブラリのセット(ミニ プログラムと PC バージョンなどの異なるバージョンに分かれています);

vant は軽量で信頼性の高いモバイル Vue コンポーネント ライブラリであり、Youzan によってオープンソース化された Vue 2.0 をベースにしたモバイル コンポーネント ライブラリのセットであり、 Vue に基づいて美しく使いやすいモバイル サイトを開発します。

Ant Design Vue は、エンタープライズ レベルのバックエンド製品を開発および提供する Ant Design の Vue 実装です。

elementUI は、Vue 2.0 デスクトップのミドルおよびバックエンド コンポーネント ライブラリに基づいています。

以上がvue.js ファミリー バケットには何が含まれますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。