過去バージョン

本番では 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