タイトル: インストール(ファイルのダウンロード)
SEOタイトル: Vue.js のインストール方法完全ガイド (CDN / npm / Vite)
| この記事の要点 |
|
方法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 / computed | data() {} / 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:unitFAQ
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 で開始。