Vue 2の記事をVue 3へ更新
旧記事はVue 2をCDNで読み込む内容でした。現在の新規プロジェクト向けに、Vue 3とViteを使う構成へ全面更新します。
Vueはテンプレート、状態、イベント処理をコンポーネント単位でまとめられます。小さなUIから段階的に導入できる点も特徴です。
プロジェクトを作成する
対話形式でTypeScript、Router、Pinia、テストなどを選択します。学習用なら必要最小限から始め、目的が決まってから追加しても構いません。
npm create vue@latest
cd 作成したプロジェクト名
npm install
npm run dev最初のコンポーネント
refで作った値はリアクティブになり、値が変わると表示も更新されます。template内では.valueを付けずに参照できます。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button type="button" @click="count++">
count: {{ count }}
</button>
</template>よくある失敗
- Vue 2とVue 3の記事を混ぜて読む
- リアクティブな値を通常変数として作る
- コンポーネントへ責務を詰め込みすぎる
- 本番ビルドを確認せず公開する
npm run build
npm run preview
