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

序文：
1. vue-cliでプロジェクトを作成する
2. ルーターをインストールする
3. ディレクトリ構造を改善し、設定ファイルvue.config.jsを作成します。
4. ant-design-vue、less、dayjsをインストールします。
5. vuexとaxiosをインストールする
6. vue3 の新しい構文
VII. 結論

序文：

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

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