1.

Vue.js のインストール方法完全ガイド (CDN / npm / Vite)

▶
編集
この記事の要点
  • Vue.js のインストール方法は 4 通り: ① CDN (script タグ 1 行) ② npm (npm install vue) ③ create-vue (npm create vue@latest、推奨) ④ Vue CLI (レガシー)
  • 初学者は CDN、本格開発は create-vue (Vite ベース)
  • Vue 3 がメインライン (2022〜)。Vue 2 は 2023/12/31 EOL
  • create-vue は Vite + Vue 3 + TypeScript / Router / Pinia / Vitest 等を対話形式で選択
  • Composition API + <script setup> が現在の主流書き方

方法1: CDN で 1 行インストール

最も手軽な方法。HTML ファイル 1 つで動きます。学習や検証、既存ページへの部分導入に向いています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Hello</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="count++">{{ count }} 回押された</button>
  </div>

  <!-- ★ ここで Vue 3 を読み込む -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue;
    createApp({
      setup() {
        const message = ref('こんにちは Vue 3!');
        const count = ref(0);
        return { message, count };
      }
    }).mount('#app');
  </script>
</body>
</html>

本番では vue.global.prod.js を使い、サイズを小さく:

<!-- 開発版 (warnings あり) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 本番版 (圧縮、warnings なし) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- ES Modules で読む場合 -->
<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  // ...
</script>

方法2: create-vue (推奨)

公式の Vite ベース足場ツール。Node.js 18+ が必要です。

# Node.js 18+ を用意 (推奨は 20 LTS)
node -v   # v20.x 以上

# プロジェクト作成 (対話形式)
npm create vue@latest

# 質問内容 (例)
# ✔ Project name: … my-vue-app
# ✔ Add TypeScript? … No / Yes
# ✔ Add JSX Support? … No / Yes
# ✔ Add Vue Router for Single Page Application development? … No / Yes
# ✔ Add Pinia for state management? … No / Yes
# ✔ Add Vitest for Unit Testing? … No / Yes
# ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
# ✔ Add ESLint for code quality? … No / Yes
# ✔ Add Prettier for code formatting? … No / Yes

cd my-vue-app
npm install
npm run dev
#   ➜  Local:   http://localhost:5173/

方法3: 既存プロジェクトに npm で追加

# Vue 本体だけ追加
npm install vue@3

# よく入れる関連
npm install vue-router@4   # ルーティング
npm install pinia          # 状態管理 (Vuex 後継)
npm install @vitejs/plugin-vue --save-dev  # Vite で .vue を扱う
npm install -D vite        # ビルドツール

# package.json の起動スクリプト
# "scripts": {
#   "dev":   "vite",
#   "build": "vite build",
#   "preview": "vite preview"
# }

方法4: Vue CLI (レガシー、非推奨)

Webpack ベースの旧足場。新規プロジェクトでは create-vue (Vite) を使ってください。

# 旧 CLI (Webpack)
npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve

# 公式は 2023 以降 maintenance mode
# 新規は create-vue 推奨

create-vue で作られる構成

my-vue-app/
├── index.html
├── package.json
├── vite.config.js
├── public/
│   └── favicon.ico
└── src/
    ├── main.js            # ← createApp(App).mount('#app')
    ├── App.vue            # ← ルートコンポーネント
    ├── components/
    │   └── HelloWorld.vue
    ├── router/            # vue-router 選択時
    │   └── index.js
    └── stores/            # pinia 選択時
        └── counter.js

最初のコンポーネント (Single File Component)

<!-- src/App.vue -->
<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);
const increment = () => count.value++;
</script>

<template>
  <h1>Hello Vue 3</h1>
  <p>count: {{ count }} / doubled: {{ doubled }}</p>
  <button @click="increment">+1</button>
</template>

<style scoped>
h1 { color: #42b883; }
</style>

Composition API vs Options API

項目Composition API (推奨)Options API
記法<script setup> + ref / computeddata() {} / methods: {}
ロジック再利用composable 関数 (useFoo())mixin (非推奨)
TypeScript型推論が効きやすい型注釈が冗長
学習曲線やや高低 (直感的)
推奨Vue 3 の標準既存プロジェクト互換

開発サーバ / ビルドコマンド

# 開発サーバ (HMR 付き、http://localhost:5173)
npm run dev

# 本番ビルド (dist/ に出力)
npm run build

# ビルド結果のローカルプレビュー
npm run preview

# 型チェック (TS 利用時)
npm run type-check

# テスト (Vitest 選択時)
npm run test:unit

FAQ

Q: Vue 2 と Vue 3、どちらを学ぶべき？
A: 新規は Vue 3。Vue 2 は 2023/12/31 で EOL。既存 Vue 2 プロジェクトは vue-demi や Vue 2.7 を経て段階的に移行。

Q: TypeScript は必須？
A: 必須ではないが推奨。create-vue で「Add TypeScript? Yes」を選ぶだけで設定済。

Q: Nuxt.js とは？
A: Vue の SSR / SSG フルスタックフレームワーク。Next.js (React) に相当。npx nuxi@latest init my-app で開始。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. クリック時のイベント処理(on:click)
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法
2026-06-11 07:12:00 guest 492

人気ページ

最近更新/作成されたページ