序文: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 の計算されたウォッチライフサイクルメソッドなどの書き込みメソッドのセット全体を直接置き換えます。すべてのロジックはこの関数に実装されています。そのため、書き方は統一することをお勧めします。以前の書き方もサポートされていますが、個人的な提案としては、以前の書き方を使用するか、まったく使用しないことです。セットアップとメソッドが同時に表示されないようにします。
VII. 結論Vue3 には多くの新しいプロパティがあるので、ドキュメントを読んで勉強してください。ただし、コミュニティはまだあまり完成していません。個人的には、2022 年末までに大幅に改善され、ほとんどの依存関係がサポートされるようになると感じています。 最後に、このプロジェクトがよく書かれていると思ったら、星を付けてください。コードに問題がある場合は、修正していただければ幸いです。良いコンポーネントや効果があれば、ぜひ共有してください。万が一プロジェクトに必要なら、使いますよ、ハハ。 vue-cli アドレス vue-cli3 アドレス これで、Vue 3.0 プロジェクト アーキテクチャの構築方法に関するこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。 以下もご興味があるかもしれません:
|
>>: Webアプリケーションにおけるコンテキストパスの設定の詳細な説明
その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...
初心者は自分で録音しましょう1. スーパーバイザーをインストールします。 Supervisor は ...
この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...
目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...
Linuxバージョン: CentOS 7 [root@azfdbdfsdf230lqdg1ba91 ...
この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...
nginx、mysql、tomcat などのサービスをインストールするときに、使用する必要があるポー...
HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小...
nginx の HTTP モジュールを作成する場合、リクエスト開始時のアクセス許可の有無、コンテンツ...
目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...
最近、ポーターを学んでいます。こんなに強力なものがあったなんて、今まで知らなかった気がします。クラス...
目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...
すべてのデータベースの合計サイズを照会する方法は次のとおりです。 mysql> informa...
目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...
Mysqlが2つのテーブルを関連付けると、次のエラーメッセージが生成されます:照合順序の不正な組み合...