vue3.0プロジェクトのアーキテクチャを構築するための便利なツール

2022-01-13 21:29:21

まえがき

私はvue-cliとvue-cli3のライブラリをGitHubでオープンソース化しており、記事の末尾にGitHubのリポジトリアドレスを記載することにしています。今回は2.0を書き換えて最適化しました。その後、2.0の機能とコードに従って、vue3.0の文法に従って完全に書き直した。名前はcliですが、実はどちらのライブラリもvue-cliをベースに作成されています。これを行う目的は、クイックスタートプロジェクトに取り組むために、結局、スライスされたパッケージング、less、axios、vuex、ルータ、UIフレームワーク、ベースファイルディレクトリ、パーミッション、これらは基本操作ですが、もちろん、プロジェクトは異なっているか、いくつかの調整を行うことです。vue-cli3別のアプリのブランチを切り取り、このブランチは、このようなhightChartsガントチャートとして、随時いくつかの機能を追加します、three.jsは、ユーザーが大画面表示をカスタマイズできるようにいくつかの機能で、まだ何も、時間を参照して、更新する時間があるだろう、vue3.0を書くことを優先されます、2.0それを言っている。私はまた、すべての後に、迅速に構築するプロジェクトを開始するために、当然より良い、私はこのライブラリを改善するために役立つことができます願っています。

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

I divided the columns by default with spaces ('\t'), and some of the character fields in the data were divided into two columns because they contained spaces. This causes more columns to be written to the data than the cols target column.

上記のステップに従うだけです。私のvue-cliのバージョンは4.5.11です。ここで注意してほしいのは、プロジェクトを作成するときに2.0と3.0のどちらを作成するかを手動で選択する必要があることです。デフォルトは2.0で、scaffoldingは下位互換性があります。

II. ルーティングのインストール

sep='\t'

私のルーティングのバージョンは4.0.12です。

3つ目は、ディレクトリ構造を洗練させ、設定ファイルvue.config.jsを作成します。

ディレクトリとvue.config.jsが掲載されている、特定のまたはソースコードを直接見てGitHubに行く、ここで多くのスペースを取ることはありません。ここでapp.lessは、カラー変数を設定し、システム全体の色を統一し、後でテーマを行えば、メンテナンスもしやすくなります。このうち、antd、vuexなどについては後述します。

IV. ant-design-vueのインストール、lessのインストール、dayjsのインストール

sep=','

UIフレームワークはant-design-vueを使用しましたので、ニーズや好みに応じて自由にお使いください。ただ、antdのバージョン2.0はvue3をサポートしており安定していますが、現在バージョン3.0へのアップグレードを行なっていることをお伝えしておきます。そしてまた、antdはdayjsを必要とするので、dayjsもここで使用されています、使用量は多かれ少なかれ同じですが、彼は非常に小さいです。このプロジェクトでは、antdのオンデマンドローディングを使用しているので、使用しないコンポーネントは導入せず、必要に応じてantdUse.jsファイルで導入するのがよいでしょう。オンデマンド方式は公式ドキュメントに詳しく書かれており、babel.config.jsを修正する必要があります。antd3のアイコンがコンポーネントという形で導入されており、少し使い勝手が悪くなっているので注意が必要です。

lessのバベルをインストールするときは、バージョン番号に注意してください、より高いバージョンはエラーを報告します。プロジェクトの全てのレベルでフォントサイズや色などを標準化するために、ここでグローバルな less 変数を定義した

V. vuex、axiosのインストール

def copy_from_data(df, table, cols):
	conn = pgconnection()

	# Write to PG table data
	output = StringIO()
	df.to_csv(output, sep=',', index=False, header=False)
	output1 = output.getvalue()
	print(StringIO(output1))

	curs_ins = conn.cursor()
	start2 = datetime.datetime.now()
	curs_ins.copy_from(StringIO(output1), table,sep=',' ,columns=cols)
	end2 = datetime.datetime.now()
	print('insert data time cost:', (end2 - start2))
	conn.commit()
	curs_ins.close()

	conn.close() # Close the database at the end
	print('insert %s data time cost:%s seconds' % (df.shape, (end2 - start2)))

axiosはあまり変わっていません。vuexは3.0から4.0への移行について、公式ドキュメントを詳しく見ることを推奨しています。ここでは、重要なものをいくつか簡単に列挙します。新しいバージョンでは、インスタンスを作成するためにcreateStoreを使用します。現在のvuexのインスタンスはuseStoreで取得されます。詳しい書き方はコードをご覧ください。

VI. vue3のいくつかの新しい構文

vue3はreactのフックの実装方法を参考にしているので、書き方やプログラミングの考え方は非常に似ており、大御所であるYou Yu Xi氏のこちらの記事を読むことを強くお勧めします。クリックするとジャンプしますここでは、彼がバージョンアップの原因と結果について非常に詳しく説明してくれているので、バージョンアップのイメージが湧きやすいと思います。今回のアップデートは、コンポーネントのパブリックロジックの抽出と再利用、単一コンポーネントロジックの構成に大きな変更を加えることが主な内容ですが、もちろん根本の動機はtypescriptのサポートです。 tsは大きなトレンドです。個人的な見解ですが、この変化が非常に大きいので、新規参入の方にとってのvue3は、とっつきにくさが非常に大きいです。プログラマーに求められる要件もずいぶん増えました。コードのポット、ロジックの混乱が起きやすいのです。ええと......。そして、.valueとprops.はあまりにも冗長で、私は多くを求め、マニュアル犬の頭、ハハ。

しかし、あなたはそれが素敵で使いやすいことがわかります。vue3.0のデータフローは明確で、データの応答性という昔の利点を保持しています。相性がいいんです。ブログ主は最初reactで、vueに乗り換えたときは、書き方もあって慣れるまで大変でしたが、一番はデータが明確でなく、すべてのデータがこれに縛られていて、可読性がかなり低くなっていたことです。

.... 話を戻して、私が理解しているvue3で何が変わったのか、どう使うべきなのか、さっそく見ていきましょう。

まず、vue3がtypescriptをサポートするようになったので、拍手と花束を。習得することが推奨されていますが、もちろん使っても使わなくても問題ありません。ただ一つ言えることは、tsはjsのスーパーセットとして、jsの自由度を完全に切り捨て、より標準化したことです。また、コードをより標準化し、よりコントロールしやすくする。しかし、非常に面白いことに、vue3はvue2の決まりごとを完全に断ち切って、完全に自由にして、変数、メソッドを直接定義内の設定で、ロジックもその中に書き、もはやリスニングプロパティを宣言する必要もなく、従来通りメソッドを所定の場所に宣言しているのである。このプロジェクトはjsで書かれており、私のtsのレベルも一般的であり、その後、我々は、すべての後に、tsの人気のこの段階ではまだ少し低いですが表示するために使用されていないことを恐れている。

以下に、ソースコード、コメント、およびプロジェクトを実行するための良い直接のプルを使用して、変更のリストを見つける、ちょうどここにいくつかの重要な変更点の簡単な言及です。

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

report.jsファイルです。defineComponentでコンポーネントを宣言し、setupを複合関数としてコンポーネントロジックを完成させます。詳細はソースのreport.jsファイルを参照してください。

setup (props, context) 関数は、vue2.0 の computed watch lifecycle メソッドなどの全セットの直接の置き換えとなります。すべてのロジックは、この関数の内部に実装されています。したがって、以前の書き方もサポートされていますが、そのセットの前に、または全くない個人的なアドバイス、統一することをお勧めします。セットアップとメソッドを同時に登場させないようにしましょう。

setup beforeCreate と created はもはや必要ありません。setup は実際には beforeCreate と同時にトリガーされます。彼はインスタンスが初期化されたときに一度だけ実行され、二度と実行されない、setupは同期的です。
2つのパラメータ、propsは親コンポーネントから渡されたデータで、リアルタイムに更新されます。分解するとリスナーを失ってしまうので、分解はできない。torefを使って、コンポーネント内部でpropsをリスナーデータにすることができます。しかし、個人的にはこの方法は良くないと感じていて、やはりprops.という形を使いたい。そうすれば、コードが一目瞭然で、使うデータがpropsで渡されたものか、現在のコンポーネント宣言なのかが明確になる。データの流れが明確で、contextは分解して使えるオブジェクトで、emitなどの属性が含まれている、何も言うことはない、ドキュメントを見ればいい。
setupthisはまだリターンがないので意味がなく、この機能に対応するために各依存パッケージが適宜更新されています router vuexでは導入することでインスタンスを取得する専用のメソッドが用意されています。以下の画像でそのコードを見ることができます。
計算されたプロパティ、リスニングプロパティ、ライフサイクル。これらはすべてメソッドとしてコンポーネントに注入され、ライフサイクルは名前が少し変わっただけで機能的には変化はなく、リスニングプロパティも、書き方が変わっています。ドキュメントが非常にわかりやすいので、ここでは詳細は割愛します。第二に、いくつかの新しいAPIが追加されました。 ref reactiveは、応答性の変数を宣言し、親子コンポーネント相互運用性を提供/注入、 watchEffect自動リスニング、お勧めしません、彼は自動的にすべての応答性の変数を聞いて、任意の変更は、更新にやや似てコールバックがトリガーされます。もちろん、実装上の問題も頻繁に発生します。いくつかの簡単なページは使用できますが、他のケースでは、手動でリッスンする変数をマークするために時計を使用するのが最善です。

VII. まとめ

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

最後に、このプロジェクトが大丈夫だと思ったら星を付けてください。また、コードに問題があれば修正して、良いコンポーネントやエフェクトがあれば共有していただければと思います。もし、良いコンポーネントやエフェクトがあれば、それをシェアしてください。

vue-cli アドレス

vue-cli3 アドレス

vue3.0のプロジェクト・アーキテクチャを手作業で構築するこの記事はこれで終わりです。勉強になるし、Scripting Houseをもっと応援してくれると嬉しいな。