この記事の目次
npm create vue@latestの使い方とは
npm create vue@latest は、Vue 公式のプロジェクト作成ツール create-vue を動かすコマンドです。Vue 公式のクイックスタートでは、このコマンドで作られるプロジェクトは Vite（開発用サーバーとビルドの道具）に基づいた設定になり、.vue ファイル（単一ファイルコンポーネント）が使えると説明しています。
この記事では、2026年10月時点の create-vue（3.24.0）で実際にプロジェクトを作り、質問の答え方、作られるファイルの役割、ブラウザで表示するまでの手順を説明します。
基本（前提と流れ）
| 項目 | 内容 |
|---|---|
| 必要なもの | Node.js（Vue 公式の前提は 22.18.0 以上の 22 系か、24.12.0 以上）とターミナル |
| 作成 | npm create vue@latest |
| 道具を取り寄せる | npm install |
| 開発用サーバー | npm run dev（既定では http://localhost:5173/） |
| 公開用にまとめる | npm run build（dist フォルダができる） |
create-vue の公式説明では、@latest を省くと、パソコンに残った古い版が使われるおそれがあるので省かないよう注意しています。
具体例（質問の答え方）
2026年10月時点の create-vue 3.24.0 では、次の順に質問されます（版によって変わることがあります）。
| 質問 | 意味 | はじめての人の答え |
|---|---|---|
| Project name | プロジェクト（フォルダ）の名前 | my-vue-app など、半角小文字とハイフン |
| Use TypeScript? | 型を書く TypeScript を使うか | No（JavaScript で始める） |
| Select features… | 追加する機能を選ぶ（スペースキーで選択、エンターで決定） | Router（画面の切り替え）と Pinia（共有データ）は必要なら選ぶ。ほかは選ばない |
| Select experimental features… | 試験的な機能 | 何も選ばずにエンター |
| Skip all example code…? | サンプルのコードを省くか | No（サンプルを見て学ぶ） |
TypeScript は、既定では Yes が選ばれた状態で表示されます。このまま進むと、ファイルが .ts になります。
動作確認（検証環境と結果）
- Windows 11、Node.js v24.19.0、create-vue 3.24.0（2026年10月）。
- 質問を省くため、機能をコマンドで指定する書き方（
npm create vue@latestの代わりにnpx create-vue@latest --router --pinia my-spa）で作成しました。作られたファイルは JavaScript（main.js）でした。 npm installは最後にadded 145 packages, and audited 146 packages in 12sとfound 0 vulnerabilitiesを表示して終わりました（数字は時期で変わります）。- 続けて
npm run devを実行すると、ターミナルにVITE v8.3.3 ready in …とLocal: http://localhost:5173/が表示され、ブラウザで画面が開きました。 - 入っていた主な版は vue 3.5.43、vite 8.3.3、vue-router 5.3.1、pinia 4.0.3 でした。
作られた主なファイルです（Router と Pinia を選んだ場合）。
my-spa/
├─ index.html … 入口の HTML（<div id="app"> がある）
├─ package.json … 使う道具の一覧と、dev・build などのコマンド
├─ vite.config.js … Vite の設定
├─ public/ … そのまま公開するファイル（favicon.ico など）
└─ src/
├─ main.js … createApp(App) でアプリを作り、mount する
├─ App.vue … 一番外側の部品
├─ components/ … 部品
├─ views/ … 画面ごとの部品（Router を選んだとき）
├─ router/index.js … URL と画面の対応表（Router を選んだとき）
└─ stores/counter.js … 共有データの例（Pinia を選んだとき）
npm create vue@latestの使い方の実践ステップ
- ターミナルで、プロジェクトを置きたいフォルダに移動します。
npm create vue@latestを実行し、上の表のとおりに答えます。- 表示された案内どおりに
cd my-vue-app、npm install、npm run devを順に実行します。 - ブラウザで
http://localhost:5173/を開きます。 src/App.vueの文字を書き換えて保存し、再読み込みしなくても画面が変わることを確かめます。- 止めるときは、ターミナルで Ctrl＋C を押します。
npm create vue@latestの使い方の注意点
- Node.js の版が古いと失敗します。
node -vで確かめます。 npm run devはプロジェクトのフォルダの中で実行します。package.jsonがある場所です。- PowerShell でオプションを渡すとき： create-vue の説明では、PowerShell では
npm create vue@latest '--' --helpのように--を引用符で囲む必要があるとしています。 - Vue 公式は、Vue CLI（webpack ベースの古いツール）はメンテナンスモードで、新しいプロジェクトは Vite で始めることを勧めています。
npm create vue@latestの使い方でよくあるミス
@latestを省いて古い版が動く。- TypeScript を Yes のまま進め、JavaScript の解説とファイルの形が合わずに混乱する。
- 開発用サーバーを止めたまま、画面が開かないと悩む。
npm create vue@latestの使い方のチェックリスト
- [ ]
node -vで前提の版以上を確かめた - [ ]
npm create vue@latestで作り、質問に答えた - [ ]
npm installとnpm run devを実行した - [ ]
http://localhost:5173/で画面が開いた - [ ] ファイルを保存すると画面が変わることを確かめた
npm create vue@latestの使い方のFAQ（よくある質問）
Q. Router と Pinia は後から追加できますか？
A. できます。npm install vue-router や npm install pinia で入れて、設定を書き足します。最初から選んでおくと、設定済みの例が付くので学びやすくなります。
Q. npm run dev と npm run build の違いは？
A. dev は開発中に使う確認用のサーバーを動かし、build は公開用に小さくまとめたファイルを dist に作ります。
Q. エディタは何を使えばいいですか？
A. Vue 公式のツールガイドは、推奨の IDE 構成として VS Code と Vue – Official 拡張機能を挙げています。ほかのエディタを使う場合は、.vue ファイルに対応しているか確かめます。
筆者の見解（npm create vue@latestの使い方）
create-vue は質問に答えるだけで、Vite・Vue・必要なら Router と Pinia まで、動く状態の設定をそろえてくれます。私は、はじめての人ほど自分で設定を組み立てず、このツールで作ってから中身を読むことを勧めます。特に main.js・App.vue・router/index.js の3つを読むと、アプリがどこから始まり、どう画面が切り替わるのかが一通り見えると考えます。
npm create vue@latestの使い方の関連項目
- Node.jsのインストール方法｜LTSの選び方とバージョン確認
- Vue 3 script setupとは｜書き方・defineProps・defineEmits（近日公開）
- Vue Routerの使い方｜ルート定義・RouterLink・RouterView
- Piniaの使い方｜ストアの作成とstate・getters・actions
- Vueアプリのビルドと公開｜npm run build・base・404対策
