Vueプロジェクトの構造：App.vue と main.js を読む – 4/12

Vueも「どこに何を書くか」で迷子になりがちです。ここでは最重要ファイルの役割と、コンポーネントを追加する場所を整理します。

重要ファイルの全体像

Vite + Vueの典型構造は次の通りです。

• index.html：<div id="app"></div> がある
• src/main.js：アプリ起動点
• src/App.vue：ルートコンポーネント
• src/components/：部品を置く場所

main.jsの役割

main.js は「Vueアプリを作ってDOMへマウントする」入口です。

import { createApp } from "vue"
import App from "./App.vue"

createApp(App).mount("#app")

ここは基本触らず、まずは App.vue を編集します。

App.vueの役割

App.vue は単一ファイルコンポーネント（SFC）で、一般に次の3つを持ちます。

• <template>：HTMLに近いテンプレート
• <script setup>：ロジック
• <style>：CSS

最初はこれをシンプルにして理解を固めます。

練習：Headerコンポーネントを追加

src/components/Header.vue を作り、App.vue で使います。

Header.vue:

<template>
  <header><h1>Vue Tutorial</h1></header>
</template>

App.vue:

<script setup>
import Header from "./components/Header.vue"
</script>

<template>
  <Header />
  <p>本文</p>
</template>

表示されれば成功です。