VueJS プロジェクトにおけるスキーマの変換とファイル配布の問題

Question

私は VueJS の学習を始めましたが、典型的な .vue ファイルは <template>、<script> ## という 3 つの異なる部分で構成されていることに気付きました。 # と <style>。

私の質問は、VueJs を使用した実際のプロフェッショナルなプロジェクトでこれら 3 つの部分をどのように処理するかについてです。私の理解では、これらは 3 つの異なる部分に分けられるはずです。

たとえば、私は次のフォルダーに分けることが多いです:

src フォルダーの下に、次のサブフォルダーを作成します。 リーリー これは実際の中規模から大規模の VueJS プロジェクトで扱われますか?そうでない場合は、なぜですか?このアプローチの長所と短所は何ですか?

ご回答いただきありがとうございます。

＃＃＃よろしくお願いします、＃＃＃

ポール

Answer 1

ドキュメントを読むことについての良いヒントです。見つかりませんでした。 https://vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns によると:

従来の Web 開発のバックグラウンドを持つ一部のユーザーは、SFC が同じ場所にさまざまな懸念事項 (HTML/CSS/JS を分離する必要がある) を混在させているのではないかと心配するかもしれません。

この質問に答えるには、懸念事項の分離はファイル タイプの分離と同等ではないという合意に達する必要があります。エンジニアリング原則の最終的な目標は、コード ベースの保守性を向上させることです。関心の分離をファイル タイプの分離に厳密に適用しても、ますます複雑化するフロントエンド アプリケーション環境ではこの目標を達成することはできません。

現代の UI 開発では、コード ベースを絡み合った 3 つの巨大なレイヤーに分割するのではなく、疎結合コンポーネントに分割してそれらを組み合わせる方が合理的であることがわかりました。コンポーネント内では、そのテンプレート、ロジック、スタイルは本質的に結合されており、これらを組み合わせることで実際にコンポーネントの一貫性と保守性が向上します。

単一ファイル コンポーネントのアイデアが気に入らない場合でも、JavaScript と CSS を分離することで、Src Imports を使用してホット リロードおよびプリコンパイル機能をプロジェクトに適用できます。