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 +

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

    方法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)

    Composition API vs Options API

    項目Composition API (推奨)Options API
    記法
    Post Share
    子ページ

    子ページはありません

    同階層のページ
    1. インストール(ファイルのダウンロード)
    2. npmを使用したプロジェクトの作成(mac)
    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-05-17 15:24:25 guest 488

    人気ページ

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