web-dev-qa-db-ja.com

Vueプロジェクトのビューとコンポーネントフォルダーの違いは何ですか？

コマンドライン（CLI）を使用して、Vue.jsプロジェクトを初期化しました。 CLIは、src/componentsおよびsrc/viewsフォルダーを作成しました。

Vueプロジェクトで作業してから数か月が経ちましたが、フォルダー構造は私には新しいようです。

vue-cli で生成されたVueプロジェクトのviewsフォルダーとcomponentsフォルダーの違いは何ですか？

vue.jsvuejs2vue-clivue-cli-3
58
drsnark

まず、src/componentsとsrc/viewsの両方のフォルダーにVueコンポーネントが含まれています。

主な違いは、一部のVueコンポーネントがルーティングのViewsとして機能することです。

通常Vueでルーティングを処理する場合、通常は Vue Router で、現在のview<router-view> コンポーネントで使用されます。これらのルートは通常、src/router/routes.jsにあり、次のように表示されます。

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
]

src/componentsの下にあるコンポーネントは、ルートで使用される可能性が低いのに対し、src/viewsの下にあるコンポーネントは、少なくとも1つのルートで使用されます。

Vue CLIは、Vueエコシステムの標準的なツールベースラインを目指しています。さまざまなビルドツールが適切なデフォルトとスムーズに連携するため、設定に何日も費やすのではなく、アプリの作成に集中できます。同時に、イジェクトする必要なしに各ツールの構成を微調整する柔軟性を提供します。

Vue CLIは、迅速なVue.js開発を目的としており、物事をシンプルに保ち、柔軟性を提供します。その目標は、さまざまなスキルレベルのチームが新しいプロジェクトをセットアップして開始できるようにすることです。

一日の終わりには、それは利便性とアプリケーション構造の問題です。

  • this 企業ボイラープレートのように、src/routerの下にViewsフォルダーを配置したい人もいます。
  • 一部の人々は、ViewsではなくPagesと呼んでいます。
  • 一部の人々はすべてのコンポーネントを同じフォルダーの下に持っています。

作業中のプロジェクトに最適なアプリケーション構造を選択してください。

ボーナス： Dan Abramov 推奨 this ReactおよびVueプロジェクト。

91
Ricky

もっと慣習だと思う。再利用可能なものはsrc/componentsフォルダーに保存でき、ルーターに関連付けられているものはsrc/viewsに保存できます

7
Ravi