この記事の要点

前提: Node.js + npm インストール済み、対象 OS は macOS、Vue CLI 3 系以上 導入: npm install -g @vue/cli で Vue CLI をグローバルインストール 作成: vue create プロジェクト名 でプリセット (Default / Manually) を選択して雛形生成 起動: npm run serve で開発サーバー起動 — ホットリロード対応 現代では Vue 3 + Vite が主流。npm create vue@latest でより新しい構成が選べる

Vue プロジェクトを npm で作成する

macOS 上で Vue CLI を使って Vue.js プロジェクトを新規作成し、開発サーバーで動作確認するまでの手順です。

前提環境

• npm (Node.js) インストール済み — node -v / npm -v で確認
• 対象 OS: macOS
• Vue CLI 3 系以上 (Vue 2/3 両対応)

# バージョン確認
$ node -v
v20.10.0
$ npm -v
10.2.3

Node.js 未導入なら Homebrew で入れるのが簡単:

$ brew install node

1. Vue CLI の導入

Vue CLI をグローバルにインストールします。

$ npm install -g @vue/cli

インストール後、vue --version でバージョン確認:

$ vue --version
@vue/cli 5.0.8

権限エラーが出る場合は sudo npm install -g @vue/cli。あるいは nvm (Node Version Manager) で Node.js を入れ直すと sudo 不要になります。

2. プロジェクトの作成

$ vue create my-app

するとプリセット選択画面が表示されます:

Vue CLI v5.0.8
? Please pick a preset:
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

選択肢	内容
Default (Vue 3)	Vue 3 + Babel + ESLint の最小構成
Default (Vue 2)	Vue 2 系の最小構成
Manually select features	TypeScript / Router / Vuex / CSS プリプロセッサ等を選択

初回学習ならDefault (Vue 3) で十分。慣れたら Manually で TypeScript / Vue Router / Vuex (Pinia) などを追加。

3. 生成されるディレクトリ構成

my-app/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

4. プロジェクトの起動

作成したプロジェクトディレクトリに移動して開発サーバーを起動:

$ cd my-app
$ npm run serve

 DONE  Compiled successfully in 2456ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.5:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

表示されたLocal URL にブラウザでアクセスすると、Vue のロゴと HelloWorld コンポーネントが表示されます。ホットリロード対応なので、ソース編集すれば即座にブラウザに反映されます。

5. よく使う npm スクリプト

コマンド	用途
npm run serve	開発サーバー起動
npm run build	本番用ビルド (dist/ 出力)
npm run lint	ESLint チェック
npm install パッケージ名	パッケージ追加
npm install	package.json から依存をインストール

Vue 3 + Vite (現代的な構成)

2026 年現在、Vue 公式は Vue 3 + Vite を推奨しています。Vue CLI より起動が高速で開発体験が良い:

$ npm create vue@latest

? Project name: my-vue-app
? Add TypeScript? Yes
? Add JSX Support? No
? Add Vue Router? Yes
? Add Pinia? Yes
? Add Vitest? No
? Add an End-to-End Testing Solution? No
? Add ESLint? Yes
? Add Prettier? Yes

$ cd my-vue-app
$ npm install
$ npm run dev

新規プロジェクトはこちらを推奨。Vue CLI は既存プロジェクトの維持用と捉えるとよいです。

トラブルシュート

Q: command not found: vue
A: グローバルインストールが PATH に通っていない。npm config get prefix で出るディレクトリの bin を PATH に追加するか、npx @vue/cli create my-app で実行。

Q: EACCES エラー
A: グローバルインストール先に書き込み権限がない。nvm を使うか、npm config set prefix '~/.npm-global' でユーザーローカルに変更。

Q: ポート 8080 が使われている
A: npm run serve -- --port 3000 で別ポート指定。または既存プロセスを lsof -i :8080 で確認して止める。

Q: npm と yarn / pnpm どちらを使えばいい？
A: シングルプロジェクトなら npm で十分。モノレポや高速化を求めるなら pnpm が現代的。yarn も健在だが採用率は減少傾向。

vue.config.js のカスタマイズ

プロジェクトルートに vue.config.js を置くと開発サーバーやビルドの詳細を調整できます。

// vue.config.js
module.exports = {
    devServer: {
        port: 3000,
        open: true,                  // 起動時にブラウザを開く
        proxy: {
            // /api 配下を別サーバーにプロキシ (CORS 回避)
            '/api': {
                target: 'http://localhost:8000',
                changeOrigin: true,
            },
        },
    },
    publicPath: process.env.NODE_ENV === 'production' ? '/myapp/' : '/',
    outputDir: 'dist',
};

本番ビルドとデプロイ

開発が終わったら本番用に最適化されたバンドルを生成します。

$ npm run build

# dist/ ディレクトリに index.html / js / css が生成される
$ ls dist
css  favicon.ico  index.html  js

生成された dist ディレクトリを静的ホスティング (Netlify / Vercel / S3 + CloudFront / GitHub Pages) にアップロードすればデプロイ完了です。SPA の場合はサーバー側ですべてのリクエストを index.html に返すルールを設定する必要があります。