Vue 3入門①：プロジェクト作成の標準ステップ【2025年11月時点】

📝 序文

この記事は、Vue 3を初めて触る方を対象としています。HTMLやJavaScriptの基本知識がある方が、Vueの基礎を理解し、プロジェクトを立ち上げるまでを目的としています。

✅ この記事でできること

• VSCode環境の整備とおすすめ拡張の導入
• Node.jsのインストール
• Vite の導入
• プロジェクトの初期化手順

🧩環境構築については以下の設定を行います。

◎Visual Studio Code（本体）

　https://code.visualstudio.com/

◎Visual Studio Code（拡張機能）

🛠 VSCodeおすすめ拡張＆設定一覧（Vue + TypeScript向け）

🌐 日本語化

• Japanese Language Pack for Visual Studio Code
  VSCodeのUIを日本語に切り替える拡張。初心者にも安心

🎨 テーマ＆UI強化

• Dracula Theme
  目に優しいダークテーマ。長時間のコーディングに最適
• Material Icon Theme
  ファイルアイコンを視覚的にわかりやすく表示
• Indent Rainbow
  インデントに色を付けて、ネスト構造を視覚的に把握しやすくする

🧩 Vue開発環境

• Vue – Official
  Vue公式が提供する拡張。Volarの後継で、Vue 2/3 両対応。TypeScriptとの連携も強力。

⚙️ TypeScript言語機能の確認

• @builtin typescript
  VSCodeに組み込み済みの「TypeScript and JavaScript Language Features」拡張。
  無効化されていなければOK（有効化されているか確認推奨）

⚠️ 注意：VolarとTypeScript Vue Pluginは現在不要です

Vue 3の開発環境として、以前は「Volar」や「TypeScript Vue Plugin (Volar)」の導入が推奨されていましたが、2024年以降は非推奨となっています。

現在は、Vue公式が提供する拡張機能「Vue Language Features (Vue – Official)」にVolarの機能が統合されており、これひとつで十分です。

また、VSCodeに組み込み済みの「TypeScript and JavaScript Language Features」拡張は有効化されたままでOKです。無効化する必要はありません。

誤って旧拡張を導入すると、補完や型チェックが正しく動作しない可能性があります。必ず最新の構成で環境を整えましょう。

◎Node.jsのインストール

LTSをインストールしてください
https://nodejs.org/ja

必須ではありませんがnvmをインストールすると簡単にバージョンの変更が可能です。

https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows
https://github.com/coreybutler/nvm-windows/releases

### 🧩 nvm-windows 基本コマンド一覧　###

# ✅ バージョンを指定してインストール
nvm install 18.17.1

#現在のNode.js環境を指定バージョンに切り替えます。
nvm use 18.17.1

#📋インストール済みのNode.jsバージョンを一覧表示します。
nvm list

#🗑 指定したNode.jsバージョンを削除します。
nvm uninstall 18.17.1

◎Vite の導入

Vue公式の create-vue パッケージを使って Vite ベースの Vue 3 プロジェクトを構築します。

PS > npm init vue@latest   

Need to install the following packages:
create-vue@3.18.2
Ok to proceed? (y)

##これは、npm init vue@latest コマンドが create-vue パッケージ
##（Vue公式のプロジェクト初期化ツール）をまだインストールしていないため、
##インストールしてもよいか確認しているプロンプトです。

> npx
> create-vue

┌  Vue.js - The Progressive JavaScript Framework
│
◆  Project name (target directory):
│  vue-project
└

##vue-projectの部分にフォーカスされるのでプロジェクト名を入力します。
##小文字で入力してください

◇  Project name (target directory):
│  helloworld
│
◆  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  ◼ TypeScript
│  ◻ JSX Support
│  ◻ Router (SPA development)
│  ◻ Pinia (state management)
│  ◻ Vitest (unit testing)
│  ◻ End-to-End Testing
│  ◼ ESLint (error prevention)
│  ◼ Prettier (code formatting)

##スペースで選択できます。
##後で作り直しますので、いったんこれで作成してください。

 Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  ◻ Oxlint
│  ◻ rolldown-vite (experimental)

##高速なJavaScript/TypeScript用のLinter（構文チェックツール）
##- ViteのビルドエンジンをRollupからRust製のRolldownに置き換える試み
##チェックを入れずにそのままEnterでOKです

◇  Skip all example code and start with a blank Vue project?
│  No

##サンプルコード付きのVueプロジェクトが作成されます。

Scaffolding project in C:\vue202511\helloworld...
│
└  Done. Now run:

##次に実施するコマンドです。この通りに実行してください
   cd helloworld
   npm install
   npm run format
   npm run dev

| Optional: Initialize Git in your project directory with:

   git init && git add -A && git commit -m "initial commit"

これでprojectができましたが、起動まで実行してみましょう

PS> cd helloworld
PS> npm install

added 294 packages, and audited 295 packages in 1m

76 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

PS>  npm run format

> helloworld@0.0.0 format
> prettier --write src/

src/App.vue 199ms (unchanged)
src/assets/base.css 63ms (unchanged)
src/assets/main.css 11ms (unchanged)
src/components/HelloWorld.vue 86ms (unchanged)
src/components/icons/IconCommunity.vue 14ms (unchanged)
src/components/icons/IconDocumentation.vue 6ms (unchanged)
src/components/icons/IconEcosystem.vue 5ms (unchanged)
src/components/icons/IconSupport.vue 5ms (unchanged)
src/components/icons/IconTooling.vue 6ms (unchanged)
src/components/TheWelcome.vue 83ms (unchanged)
src/components/WelcomeItem.vue 36ms (unchanged)
src/main.ts 12ms (unchanged)

PS >  npm run dev

> helloworld@0.0.0 dev
> vite

  VITE v7.2.2  ready in 3857 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

🚀 開発サーバー起動後の案内メッセージ解説

🌐 サーバーアクセス情報

• Local: http://localhost:5173/
  自分のPCで開発中のVueアプリを確認できるURLです。
  ブラウザでアクセスするとアプリが表示されます。

• Network: use --host to expose
  他の端末（スマホや別PC）からアクセスしたい場合は、以下のように起動します：

  npm run dev -- --host
  
  

• **Vue DevTools（ブラウザ版）
  以下のURLで開くと、Vueの状態やコンポーネント構造を確認できます：
  http://localhost:5173/__devtools__/

• **Vue DevTools（ショートカット起動）
  アプリ画面上で以下のキーを押すと、DevToolsパネルが表示されます：
  Windows：Alt + Shift + D

この通り起動しました。

---

※参考
　https://qiita.com/ksakiyama134/items/8ca98295897dc1280644