Vue.jsプロジェクトを構成する方法

完璧なVue.jsフォルダー構造と、スマートコンポーネントとダムコンポーネントを備えたコンポーネントアーキテクチャ

Vue.jsは誇大広告ではなく、優れたフロントエンドフレームワークです。使い始めて、ウェブアプリを作成するのは非常に簡単です。 Vue.jsは、多くの場合、小さなアプリのフレームワークと呼ばれ、サイズが小さいためjQueryの代替としても説明されています!個人的には、より大きなプロジェクトにも適していると思います。この場合、コンポーネントアーキテクチャの観点から、適切に構造化することが重要です。

最初の大きなVue.jsプロジェクトを開始する前に、完璧なフォルダー構造、コンポーネントアーキテクチャ、および命名規則を見つけるためにいくつかの調査を行いました。 Vue.jsのドキュメント、いくつかの記事、多くのGitHubオープンソースプロジェクトを調べました。

いくつかの質問に対する答えを見つける必要がありました。それがこの投稿にあります:

  • Vue.jsプロジェクト内のファイルとフォルダーをどのように構成しますか?
  • SmartコンポーネントとDumbコンポーネントはどのように作成し、どこに配置しますか?これは、Reactのコンセプトです。
  • Vue.jsのコーディングスタイルとベストプラクティスは何ですか?

また、より良い理解を得るために、インスピレーションを得たソースと他のリンクを文書化します。

Vue.jsフォルダー構造

srcフォルダーの内容は次のとおりです。 Vue CLIでプロジェクトを開始することをお勧めします。個人的にデフォルトのWebpackテンプレートを使用しました。

。
├──app.css
├──App.vue
├──資産
│└──...
├──コンポーネント
│└──...
├──main.js
├──ミックスイン
│└──...
├──ルーター
│└──index.js
├──店舗
│├──index.js
│├──モジュール
││└──...
│└──Mutation-types.js
├──翻訳
│└──index.js
├──utils
│└──...
└──ビュー
    └──...

これらの各フォルダーに関するいくつかの詳細:

  • アセット—コンポーネントにインポートされるアセットを配置する場所
  • components —メインビューではないプロジェクトのすべてのコンポーネント
  • ミックスイン—ミックスインは、さまざまなコンポーネントで再利用されるJavaScriptコードの一部です。ミックスインでは、Vue.jsのコンポーネントのメソッドを、それを使用するコンポーネントのメソッドとマージできます。
  • router —プロジェクトのすべてのルート(私の場合、index.jsにあります)。基本的にVue.jsでは、すべてがコンポーネントです。しかし、すべてがページではありません。ページには、「/ dashboard」、「/ settings」、「/ search」などのルートがあります。コンポーネントにルートがある場合、ルーティングされます。
  • store(オプション)— Mutation-type.jsのVuex定数、サブフォルダーモジュールのVuexモジュール(index.jsに読み込まれます)。
  • 翻訳(オプション)—ロケールファイル、私はVue-i18nを使用していますが、それは非常にうまく機能します。
  • utils(オプション)—正規表現値のテスト、定数、フィルターなど、一部のコンポーネントで使用する関数。
  • views —プロジェクトを読みやすくするために、ルーティングされるコンポーネントを分離し、このフォルダーに配置します。私のためにルーティングされるコンポーネントは、ページを表し、ルートを持っているため、コンポーネント以上のものです。ページをチェックすると、このフォルダに行くときに「ビュー」に入れます。

最終的には、フィルターや定数、APIなどの必要に応じて他のフォルダーを追加できます。

インスピレーションを得たいくつかのリソース

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Vue.jsを使用したスマートコンポーネントとダムコンポーネント

スマートコンポーネントとダムコンポーネントは、Reactから学んだ概念です。スマートコンポーネントはコンテナとも呼ばれ、状態の変化を処理するものであり、物事の仕組みに責任があります。反対に、プレゼンテーションとも呼ばれるダムコンポーネントは、ルックアンドフィールのみを処理します。

MVCパターンに精通している場合は、ダンプコンポーネントをビューと比較し、スマートコンポーネントをコントローラーと比較できます。

Reactのスマートコンポーネントとダムコンポーネントは通常、異なるフォルダーに配置されますが、Vue.jsでは、すべてを同じフォルダー(コンポーネント)に配置します。 Vue.jsで区別するために、命名規則を使用します。ダムカードコンポーネントがあるとします。次の名前のいずれかを使用する必要があります。

  • BaseCard
  • AppCard
  • VCard

BaseCardを使用していくつかのメソッドを追加するスマートコンポーネントがある場合、たとえばプロジェクトに応じて名前を付けることができます。

  • ProfileCard
  • ItemCard
  • NewsCard

スマートコンポーネントがメソッドを備えた「Smarter」BaseCardだけではない場合、コンポーネントに合った任意の名前を使用し、Base(またはApp、V)で始めずに、たとえば次のようにします。

  • ダッシュボード統計
  • の検索結果
  • UserProfile

この命名規則は、命名規則も含まれるVue.js公式スタイルガイドに基づいています!

命名規則

プロジェクトを適切に構成するために必要なVue.js公式スタイルガイドからのいくつかの規則を以下に示します。

  • ルートの「アプリ」コンポーネントを除き、コンポーネント名は常にマルチワードにする必要があります。たとえば、「Card」ではなく「UserCard」または「ProfileCard」を使用します。
  • 各コンポーネントは独自のファイルにある必要があります。
  • 単一ファイルコンポーネントのファイル名は、常にPascalCaseまたはkebab-caseである必要があります。 「UserCard.vue」または「user-card.vue」を使用します。
  • 1ページに1回だけ使用されるコンポーネントは、接頭辞「The」で始まり、1つしか存在できないことを示す必要があります。たとえば、navbarまたはフッターの場合、「TheNavbar.vue」または「TheFooter.vue」を使用する必要があります。
  • 子コンポーネントには、プレフィックスとして親名を含める必要があります。たとえば、「UserCard」で「Photo」コンポーネントを使用する場合は、「UserCardPhoto」という名前を付けます。通常、フォルダ内のファイルはアルファベット順になっているため、読みやすくするためです。
  • コンポーネントの名前には、略語ではなく常にフルネームを使用してください。たとえば、「UDSettings」を使用せず、代わりに「UserDashboardSettings」を使用します。

Vue.js公式スタイルガイド

Vue.jsの上級者でも初心者でも、このVue.jsスタイルガイドを読む必要があります。このガイドには、多くのヒントと命名規則が含まれています。するべきこととしないことの多くの例が含まれています。

この投稿が気に入ったら、下の拍手cボタンを数回クリックしてサポートを示してください!また、コメントやフィードバックをお寄せください。私に従うことを忘れないでください!

このような記事をもっと見たいですか? Patreonで私をサポートしてください