site iconKoei's Digital Garden

Archive

Vue.js Quick Start - プロジェクト作成と環境構築

3 min read

Vue.js Quick Start - プロジェクト作成と環境構築

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

What（何についてか）

Vueプロジェクトを始める3つのアプローチ。オンラインで試す、ローカルで本格構築する、CDNでビルドなしで使う。

Why（なぜ必要か）

開発規模に応じた適切な始め方を知る必要がある。本格開発にはVite + SFC構成が推奨だが、既存HTMLへの組み込みなど軽量用途にはCDN版も存在する。

How（どう動くか）

アプローチ比較

graph TD
    A["Vueを始める"] --> B["オンライン"]
    A --> C["ローカル: npm create vue@latest"]
    A --> D["CDN（ビルドなし）"]
    B --> B1["Playground"]
    B --> B2["StackBlitz"]
    C --> C1["Vite + SFC"]
    C --> C2["Composition API"]
    C --> C3["ホットリロード"]
    D --> D1["Global Build"]
    D --> D2["ES Module"]
    D --> D3["Import Maps"]

推奨: npm create vue@latest

前提: Node.js ^20.19.0 || >=22.12.0

npm create vue@latest
# → TypeScript / Router / Pinia / Vitest 等の選択プロンプト
cd <project-name>
npm install
npm run dev     # 開発サーバー起動（ホットリロード付き）
npm run build   # ./dist に本番用ビルド出力

生成されるコンポーネントは Composition API + <script setup> で書かれている。

推奨IDE: VS Code + Vue - Official拡張機能

CDN版（ビルドなし）

方式特徴
Global Build<script> タグで読み込み。Vue グローバルオブジェクトから全APIにアクセス
ES Moduleimport 構文使用。<script type="module"> が必要
Import Mapsブラウザに vue の解決先を教える。npmプロジェクトと同じ import from 'vue' 書き方が可能

CDN版の制限:

  • SFC（.vueファイル）が使えない
  • テンプレートはJS文字列として書く必要がある
  • ES modulesは file:// で動かない（HTTPサーバー必須）

モジュール分割（CDN版）

import / export でファイル分割可能だが、SFCが使えないため実用性は低い。

Key Concepts

用語説明
create-vue公式スキャフォールディングツール。対話形式でプロジェクト構成を選択
Viteビルドツール。開発サーバーの高速起動とホットリロードを提供
Import Mapsブラウザの機能。モジュール名 → URL のマッピングを定義
npm run devVite開発サーバーを起動。ファイル変更時に自動リロード
npm run build本番用ビルドを ./dist に生成

Graph View

Backlinks