1. ホーム
  2. vue.js

[解決済み] Vueプロジェクトにおけるviewsフォルダとcomponentsフォルダの違いは何ですか?

2022-04-17 22:46:44

質問

先ほど、コマンドライン( CLI ) を使って、Vue.js プロジェクトを初期化しました。このとき CLI を作成しました。 src/componentssrc/views フォルダーに格納されます。

Vueのプロジェクトに携わるのは数ヶ月ぶりなので、フォルダ構造が新鮮に感じられます。

とはどのような違いがあるのでしょうか? viewscomponents で生成されたVueプロジェクト内の vue-cli ?

解決方法は?

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

重要な違いは、一部のVueコンポーネントが ビュー をルーティングのために使用します。

Vueでルーティングを扱う場合、通常は Vue ルーター を切り替えるために、ルートが定義されています。 ビュー で使用される <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の迅速な開発を目指し、物事をシンプルに保ち、柔軟性を提供します。その目標は、さまざまなスキルレベルのチームが新しいプロジェクトをセットアップして始められるようにすることです。

一日の終わりに 利便性とアプリケーションの構造の問題である .

  • 人によっては、Views フォルダを src/router のように これ エンタープライズ・ボイラープレートです。
  • と呼ぶ人もいます。 ページ ではなく ビュー .
  • 人によっては、すべてのコンポーネントを同じフォルダの下に置いている人もいます。

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