vue3.0プロジェクトアーキテクチャを段階的に構築する方法を教えます

vue3.0プロジェクトアーキテクチャを段階的に構築する方法を教えます

序文:

vue-cli および vue-cli3 ライブラリを GitHub でオープンソース化しました。GitHub リポジトリのアドレスは記事の最後に添付します。今回は2.0を書き直して最適化しました。その後、2.0 の機能とコード、vue3.0 の構文に合わせて全面的に書き直しました。名前は cli ですが、実際にはどちらのライブラリも vue-cli をベースに作成されています。これを行う目的は、プロジェクトをすぐに作業に取り掛かることです。結局のところ、スライスとパッケージ化、less、axios、vuex、ルーター、UI フレームワーク、基本的なファイル ディレクトリ、権限、これらはすべて基本的な操作です。もちろん、プロジェクトによってはまだ調整が必要です。これら 2 つのプロジェクトのマスター ブランチは最も基本的なブランチであり、いくつかのカスタム コンポーネントも含まれています。 vue-cli3 は別のアプリ ブランチを切り出しました。このブランチでは、hightCharts のガント チャート、three.js、ユーザーがカスタマイズできる大画面ディスプレイなどの機能が随時追加されます。現在は何もなく、時間次第で、時間があるときに更新されます。Vue3.0 が最初に作成され、2.0 については後で議論されます。また、このライブラリの改善に皆さんが協力してくれることを願っています。結局のところ、このライブラリはプロジェクトを迅速に開始するために構築されているので、より良いものほど良いのです。アプリ ブランチでは、全員の思考を広げるために、優れた機能モジュール ケースをいくつか用意したいと考えています。

1. vue-cliでプロジェクトを作成する

npm uninstall vue-cli -g 古いバージョンのcliをアンインストールします
npm i @vue/cli -g cliの新しいバージョンをインストールします
npm install -g @vue/cli-init cli をインストールします  
vue -V cliのバージョン番号を確認します。大文字と小文字に注意してください。vue create vue-cli vue3.0プロジェクトを作成します。vue3を選択することを忘れないでください。

上記の手順に従ってください。私の vue-cli のバージョン番号は 4.5.11 です。プロジェクトを作成するときは、2.0 プロジェクトを作成するか 3.0 プロジェクトを作成するかを手動で選択する必要があることに注意してください。デフォルトは 2.0 で、スキャフォールディングは下位互換性があります。

2. ルーターをインストールする

npm install vue-router@4 ルーティング、バージョン 4.0 をインストールします。

私のルーターのバージョンは4.0.12です

3. ディレクトリ構造を改善し、設定ファイルvue.config.jsを作成します。

ディレクトリと vue.config.js はこちらに掲載しています。詳細については GitHub にアクセスしてソースコードを直接参照してください。ここではスペースを取りません。ここで、app.less はシステム全体の色を統一するために色変数を設定します。これにより、後でテーマを作成する場合のメンテナンスが容易になります。このうち、antd、vuex などについては後ほど説明します。

4. ant-design-vue、less、dayjsをインストールします。

npm i --save ant-design-vue@next antd3.xバージョン3.0をインストールします。まだ継続的な更新段階です。npm install babel-plugin-import --save-dev babelをインポートし、babel.configファイルを設定し、antdコンポーネントを必要に応じてロードします。npm install --save @ant-design/icons-vue 必要に応じて、antdのアイコンをインポートします。
npm install less --save lessをインポートする
npm i [email protected] バージョン番号をメモします。npm i style-resources-loader vue-cli-plugin-style-resources-loader -D プラグイン、vue.config.js ファイルをインストールし、less ファイルのグローバル設定を追加し、主にグローバル変数を構成します。npm install dayjs --save で dayjs をグローバルに設定します。エラーが発生した場合は、ant-design-vue を再インストールします。dayjs は moment よりも軽量です。

UI フレームワークとして ant-design-vue を使用しましたが、ニーズや好みに応じて選択できます。ただし、antd の現在のバージョン 2.0 は vue3 をサポートしており、安定していることをお知らせします。現在、バージョン 3.0 にアップグレード中です。プロジェクトでは 3.0 の書き込み方法を使用しており、その安定性はまだ検証されていません。また、antd には dayjs が必要なので、ここでも dayjs が使われています。使い方は似ていますが、非常に小さいです。このプロジェクトでは、antd のオンデマンド ロードを使用します。未使用のコンポーネントは導入しない方がよいでしょう。必要な場合は、antdUse.js ファイルで導入するだけです。オンデマンド読み込み方法は公式ドキュメントに詳細に説明されており、babel.config.js を変更する必要があります。 antd3 のアイコンはコンポーネントの形で導入されており、使いにくく注意が必要です。

babel または less をインストールするときは、バージョン番号に注意してください。バージョンが高いとエラーが発生します。プロジェクトのすべてのレベルでフォントサイズや色などを統一するために、グローバルless変数を定義しました。

5. vuexとaxiosをインストールする

npm install vuex@next --save vuexをインストールして設定する npm install axios axiosをインストールして統一された設定を行う

axios には変更はありません。 Vuex では、公式の 3.0 から 4.0 への移行ドキュメントを詳しく確認することをお勧めします。ここでいくつか重要なものを簡単に挙げておきます。新しいバージョンでは、createStore を使用してインスタンスを作成し、useStore を通じて現在の vuex インスタンスを取得します。具体的な書き方はコードを参照してください。

6. vue3 の新しい構文

Vue3 は React Hooks の実装方法を指すため、書き方やプログラミングの考え方は非常に似ています。You Yuxi 氏のこの記事を読むことを強くお勧めします。ここをクリックしてジャンプしてください。彼はアップグレードの原因と結果を詳しく説明しています。これを読めば、このアップグレードについてより明確に理解できるでしょう。このアップデートでは、主に共通コンポーネントロジックの抽出と再利用、および単一コンポーネントの論理構成に大きな変更が加えられています。もちろん、基本的な原動力は依然として TypeScript のサポートです。 tsは一般的な傾向です。私の個人的な観点からすると、この変更は非常に大きく、初心者が Vue3 を使い始めるのは非常に難しくなります。プログラマーに対する要求も大幅に増加しました。コードが乱雑になり、ロジックがわかりにくくなるのはよくあることです。えっと…あと、.value や props. の書き方が長すぎる。要求しすぎかな?イライラするわ、ハハ。

しかし、頻繁に使用すると、非常に便利で役立つことがわかります。 vue3.0 のデータフローは非常に明確であり、データの応答性という従来の利点も保持しています。とても快適です。ブロガーは最初 react を使用しており、最初は vue を使用していませんでした。書き方に理由がありましたが、最大の問題はデータが明確ではなかったことです。すべてのデータがこれにバインドされていたため、可読性が大幅に低下していました。

。 。 。本題に戻って、Vue3 にどのような変更が加えられたのか、そして私の理解に基づいてそれをどのように使用するのかについて話しましょう。

まず、vue3 は TypeScript、拍手、花をサポートしています。 。 。習得することをお勧めしますが、もちろん使用するかどうかは問題ではありません。 ts は js のスーパーセットとして、js の無秩序で自由を愛する性質を完全に排除し、より慣習的なものにしたとしか言えません。また、コードの標準化と制御性も向上します。しかし、面白いのはvue3ではvue2のルールや規制を完全に排除し、自由を完全に解放している点です。変数やメソッドはsetup内で直接定義され、ロジックもその中に記述されます。従来のように監視プロパティや宣言メソッドを規定の場所に宣言する必要はありません。このプロジェクトはjsで書かれており、私のtsレベルは平均的です。また、誰もがそれに慣れていないのではないかと心配しています。結局のところ、この段階ではtsの人気はまだ少し低いです。

いくつかの変更点がソース コードとコメントとともに以下にリストされています。プロジェクトを取得して実行する方がよいでしょう。ここでは、いくつかの重要な変更点について簡単に説明します。

main.js ファイル。 createApp メソッドを使用して vue インスタンスを作成し、app.config.globalProperties を使用してインスタンス プロトタイプにグローバル プロパティを追加します。汚染を心配することなく複数のインスタンスを作成できます。

report.js ファイル。 defineComponent を通じてコン​​ポーネントを宣言し、setup 関数を使用してコンポーネント ロジックを開発します。詳細については、report.js ソース ファイルを参照してください。

組み合わせ関数 setup(props, context) は、vue2.0 の計算されたウォッチライフサイクルメソッドなどの書き込みメソッドのセット全体を直接置き換えます。すべてのロジックはこの関数に実装されています。そのため、書き方は統一することをお勧めします。以前の書き方もサポートされていますが、個人的な提案としては、以前の書き方を使用するか、まったく使用しないことです。セットアップとメソッドが同時に表示されないようにします。

  1. setup beforeCreate と created は必要なくなり、setup は実際には beforeCreate の前にトリガーされます。インスタンスが初期化されるときに 1 回だけ実行され、再度実行されることはありません。セットアップは同期的に行われます。
  2. 2 つのパラメータ、props は親コンポーネントによって渡され、リアルタイムで更新されるデータです。解体できず、監視が失われます。 torefs を使用すると、コンポーネント内の props を監視データに変換できます。しかし、個人的には、これは良い方法ではないと感じています。私は依然として、props の形式で使用することを好みます。この方法であれば、コードは一目でわかり、使用するデータが props によって渡されるのか、現在のコンポーネントによって宣言されるのかが明確になります。データ フローは非常に明確です。コンテキストは分解して使用できるオブジェクトであり、emit などのプロパティが含まれています。特に言うことはありません。ドキュメントを読むだけです。
  3. setupthis はまだ戻っていないため役に立たないので、各依存パッケージはこの機能をサポートするために対応する更新を行っています。Router vuex には、これを導入してインスタンスを取得するための特別な方法があります。下の図のコードをご覧ください。
  4. 計算されたプロパティ、監視されたプロパティ、およびライフ サイクル。これらはすべて、メソッドの形でコンポーネントに注入されます。ライフサイクルの名前は少し変更されていますが、機能は変更されていません。リスニングプロパティについても同様ですが、記述方法が変更になっています。文書は非常に明確なので、ここでは詳細には触れません。次に、いくつかの新しい API が追加されました。 ref reactive はレスポンシブ変数を宣言します。親子コンポーネントが相互に通信できるように提供/注入します。watchEffect は自動的に監視しますが、これは推奨されません。すべてのレスポンシブ変数を自動的に監視し、変更があるとコールバックがトリガーされます。これは update に似ています。もちろん、頻繁に実行すると問題も発生します。これはいくつかの単純なページで使用できますが、他の場合には、監視する必要がある変数を手動でマークするために watch を使用する方が適切です。

VII. 結論

Vue3 には多くの新しいプロパティがあるので、ドキュメントを読んで勉強してください。ただし、コミュニティはまだあまり完成していません。個人的には、2022 年末までに大幅に改善され、ほとんどの依存関係がサポートされるようになると感じています。

最後に、このプロジェクトがよく書かれていると思ったら、星を付けてください。コードに問題がある場合は、修正していただければ幸いです。良いコンポーネントや効果があれば、ぜひ共有してください。万が一プロジェクトに必要なら、使いますよ、ハハ。

vue-cli アドレス

vue-cli3 アドレス

これで、Vue 3.0 プロジェクト アーキテクチャの構築方法に関するこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。

以下もご興味があるかもしれません:
  • 完全な Vue3.0+ts プロジェクトを構築する手順
  • vite+vue3+element-plus プロジェクトをビルドする手順
  • Vue3.0 プロジェクト構築概要(詳細手順)
  • vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明
  • Vue3.0プロジェクトの構築と利用プロセス
  • vue3.0 プロジェクトを素早く構築するための手順を完了する

<<:  アーティストの自己啓発におけるいくつかの経験

>>:  Webアプリケーションにおけるコンテキストパスの設定の詳細な説明

推薦する

Vueの計算プロパティの詳細な説明

1. 計算属性とは何ですか? 簡単に言えば、計算された結果が属性に保存されるもので、キャッシュとして...

Vueコンポーネント間の通信の非常に詳細な要約

目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...

一般的な MySQL ストレージ エンジンとパラメータ設定およびチューニングの紹介

MyISAM、MySQLでよく使われるストレージエンジン特性: 1. 同時実行性とロックレベル2. ...

MySQL データ型 DECIMAL の使用方法の詳細な説明

MySQL DECIMALデータ型は、データベースに正確な数値を保存するために使用されます。会計シス...

Docker で TLS と CA 認証を有効にする方法

目次1. 証明書を生成する2. リモートを有効にする3. リモート接続3.1 Jenkins接続3....

Docker ベースの Jenkins のデプロイに関する詳細なチュートリアル

このドキュメントを作成した当時は2019年12月頃で、er2.200が最新バージョンでした。 1.画...

CSS で 3D ルービック キューブを実装するサンプル コード

今日は簡単な3Dルービックキューブを作ってみましょうまずはレンダリングを見てみましょう!これを学んだ...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

JavaScript でロジック判定コードを最適化する方法

序文日常生活で使用する論理的判断文には、if...else...、switch...case...、...

ページの下部にHTMLフッターを配置する簡単な方法

要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下...

行の高さと垂直方向の配置についての深い理解

いくつかの概念行ボックス: インライン ボックスを囲むボックス。1 つ以上の行ボックスが積み重ねられ...

Nginx の break と last の違いの詳細な分析

まずは違いについて話しましょう最後に、書き換えられたルールは、次の場所と一致させるために書き換えられ...

jQueryチェーン呼び出しの詳細な説明

目次チェーン呼び出し小さなケースチェーン呼び出しjQuery オブジェクトが任意のメソッド (ノード...

Vue nextTickの原理の分析

目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...

CentOS7におけるKVM仮想化の基本管理の詳しい説明

1. kvm仮想化をインストールする : : : : : : : : : : : : : : : :...