Vue.jsの環境構築と最初の画面 | Vue.js入門

必要なもの

Vueの開発にはNode.jsとnpmを使います。Node.jsはJavaScriptを実行する環境、npmはパッケージを管理する道具です。公式サイトからLTS版をインストールしてください。

バージョン確認SHELL

node --version
npm --version

バージョン番号が表示されれば準備完了です。バージョンそのものよりも、コマンドが見つからない状態でないことが重要です。

Viteでプロジェクトを作る

Vue公式の作成ツールを実行します。プロジェクト名は半角英数字とハイフンにしておくとトラブルが少なくなります。

作成と起動SHELL

npm create vue@latest vue-practice
cd vue-practice
npm install
npm run dev

ブラウザーで開くURLOUTPUT

http://localhost:5173/

作成時の質問でRouterやPiniaを選ぶと最初から依存関係が入ります。仕組みを理解してから追加したい場合は、すべてNoにして始めても問題ありません。

App.vueを編集する

src/App.vueは、画面の見た目と動きをまとめるSingle-File Componentです。まず内容を次のように置き換えてください。

src/App.vueVUE

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value += 1
}
</script>

<template>
  <main>
    <h1>Vueの練習</h1>
    <p>クリック回数: {{ count }}</p>
    <button @click="increment">増やす</button>
  </main>
</template>

<style scoped>
main { max-width: 32rem; margin: 3rem auto; }
button { padding: .5rem 1rem; }
</style>

操作結果OUTPUT

最初: クリック回数: 0
1回クリック: クリック回数: 1
2回クリック: クリック回数: 2

この例では、ref(0)でリアクティブな状態を作り、count.valueを変更しています。テンプレート中ではcountと書くだけで値が表示されます。

トラブル対処

画面が真っ白
ターミナルのエラー、ブラウザーの開発者ツールのConsole、タグの閉じ忘れを確認します。コードを一度に大きく変えず、直前に変更した箇所から戻って調べます。

次の確認

npm installを実行したか
開発サーバーを起動したままか
URLのポート番号がターミナルの表示と同じか
ファイル名の大文字・小文字が正しいか

環境構築ができたら、次はテンプレートの条件分岐・繰り返し・イベントを使ってUIを作ります。

Vue.js入門の講座一覧

必要なもの

Viteでプロジェクトを作る

App.vueを編集する

トラブル対処