Vue.js Creating an Application - アプリの起動フロー

ロードマップ: Vue.js学習ロードマップ

What（何についてか）

Vueアプリが起動するまでの流れと、関連する4つの基本概念。

Why（なぜ必要か）

Vueアプリを構築する上で、ファイル構成と起動フローを理解していないと「どこに何を書けばいいか」がわからない。

How（どう動くか）

4つの基本概念

用語	一言で	例
アプリケーション	Vueで作るサイト全体	Todoアプリ全体
インスタンス	アプリの管理者オブジェクト	const app = createApp(App) の app
コンポーネント	画面の1パーツ（.vueファイル1個）	ボタン、リスト、ヘッダー
グローバル設定	アプリ全体に効くルール	エラーハンドラ、共通コンポーネント登録

起動フロー

graph TD
    A["createApp(App)"] --> B["app.use(router) 等"]
    B --> C["app.component(...) 等"]
    C --> D["app.mount('#app')"]
    D --> E["描画開始"]

1. createApp() でインスタンス生成
2. プラグイン登録（Router等）
3. グローバルアセット登録
4. 最後に mount() を呼ぶ → 初めて描画される

ファイル構成（Viteプロジェクト）

index.html          → 空の <div id="app"></div>（土台）
src/main.ts         → 組み立て（createApp → mount）
src/App.vue         → ルートコンポーネント（画面の中身）

ViteプロジェクトとCDN版の違い

項目	Viteプロジェクト	CDN版（ビルドなし）
テンプレートの書き場所	.vue ファイルの <template>	index.html に直接書ける
テンプレートコンパイラ	ビルド時に処理	実行時に必要（ランタイムビルドを使用）
SFC	使える	使えない

Viteのデフォルトビルドはテンプレートコンパイラを含まない（軽量化のため）。そのため index.html に直接Vue構文を書いても動かない。テンプレートは .vue ファイルに書くこと。

複数アプリケーションインスタンス

1ページに複数のVueアプリを置ける。それぞれ独立したスコープを持つ。既存HTMLの一部だけVueで制御したい時に使用。

Key Concepts

用語	説明
createApp()	アプリインスタンスを生成する関数
ルートコンポーネント	コンポーネントツリーの頂点。通常 App.vue
.mount('#app')	インスタンスをDOM要素に紐付けて描画を開始する
app.config	アプリ全体の設定（errorHandler等）
app.component()	グローバルにコンポーネントを登録（どこでも使える）
In-DOM テンプレート	mount先のinnerHTMLをテンプレートとして使う仕組み。CDN版専用