クイックスタート #

オンラインで Vue を試す #

• Vue をすぐに体験するには、Playground で直接試すことができます。

• もし、ビルドのステップのないプレーンな HTML のセットアップを好む場合は、この JSFiddle を出発点として使用できます。

• Node.js とビルドツールの概念に既に慣れている場合は、StackBlitz を使ってブラウザー内で完全なビルドセットアップを試すことも可能です。

Vue アプリケーションの作成 #

このセクションでは、ローカルマシン上で Vue のシングルページアプリケーションを生成する方法を紹介します。作成されたプロジェクトは、Vite に基づいたビルド設定を使用し、Vue の単一ファイルコンポーネント（SFC）を使用できるようにします。

Node.js の最新バージョンがインストールされていることを確認してから、コマンドラインで次のコマンドを（> 記号なしで）実行します:

> npm init vue@latest

このコマンドは、公式の Vue プロジェクトスキャフォールディングツールである create-vue をインストールして実行します。TypeScript やテストのサポートなど、いくつかのオプション機能がプロンプトに表示されます:

✔ Project name: … <your-project-name>
✔ 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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

もしオプションについてはっきりとわからないなら、今のところ単純にエンターを押して No を選んでください。プロジェクトが作成されたら、指示に従って依存関係をインストールし開発サーバーを起動しましょう:

> cd <your-project-name>
> npm install
> npm run dev

あなたの初めての Vue プロジェクトが今実行されているはずです！　なお、生成されたプロジェクトのサンプルコンポーネントは、Options API ではなく、Composition API と <script setup> で書かれていることに注意してください。いくつか追加のヒントをどうぞ:

• IDE の推奨構成は Visual Studio Code + Volar extension です。他のエディターを使用している場合は、IDE のサポートを確認してください。
• バックエンドフレームワークとの統合を含む、ツールのさらなる詳細については、ツールガイド で説明しています。
• 基礎となっているビルドツール Vite について学ぶには、Vite のドキュメント を確認しましょう。
• もし TypeScript を使うことを選択したなら、TypeScript の使い方 を確認しましょう。

あなたのアプリをプロダクション環境に出す準備ができたら、以下を実行してください:

> npm run build

これであなたのアプリのプロダクション向けビルドがプロジェクトの ./dist ディレクトリーに作成されます。プロダクション環境への出荷についてさらに学ぶには プロダクション環境への配信 を確認してください。

次のステップ ＞

CDN の Vue を使用する #

script タグで CDN から直接 Vue を使用できます:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

ここでは unpkg を使っていますが、例えば jsdelivr や cdnjs など、npm パッケージを提供する CDN なら何でも使えます。もちろん、このファイルをダウンロードして、自分で配信することもできます。

CDN から Vue を使用する場合は「ビルドステップ」は必要ありません。これによりセットアップが非常にシンプルになり、静的な HTML を拡張したり、バックエンドのフレームワークと統合したりするのに適しています。ただし、単一ファイルコンポーネント（SFC）の構文は使用できません。

グローバルビルドの使用 #

上記のリンクは、Vue のグローバルビルドを読み込んでいます。これは、すべてのトップレベル API がグローバルな Vue オブジェクトのプロパティとして公開されています。以下は、グローバルビルドを使用した完全な例です:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle のデモ

ES モジュール ビルドの使用 #

このドキュメントの残りの部分では、主に ES モジュール構文を使用します。最近のブラウザーは ES モジュールをネイティブでサポートしているので、次のようにネイティブの ES モジュールで CDN から Vue を使用できます:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="module"> を使用していることと、インポートされる CDN の URL が、（ひとつ前の例とは違って）Vue の ES モジュール ビルド を指していることに注意してください。

JSFiddle のデモ

インポートマップの有効化 #

上記の例では、完全な CDN URL からインポートしていますが、他のドキュメントでは、次のようなコードが表示されます:

import { createApp } from 'vue'

インポートマップを使って、vue のインポートの場所をブラウザーに教えることができます:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle のデモ

他の依存関係のエントリーをインポートマップに追加することもできますが、使おうとしているライブラリーの ES モジュールバージョンを指していることを確認してください。

モジュールの分割 #

ガイドをさらに深く潜っていくと、管理しやすくするためにコードを個別の JavaScript ファイルに分割する必要がでるかもしれません。例えば:

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

ES モジュールは file:// プロトコルでは動作しないため、上記の index.html をブラウザーで直接開くとエラーが発生します。これを動作させるには、ローカルの HTTP サーバーを使い http:// プロトコルで index.html を配信する必要があります。

ローカル HTTP サーバーを起動するには、まず Node.js をインストールし、HTML ファイルと同じディレクトリーで、コマンドラインから npx serve を実行します。正しい MIME タイプで静的ファイルを配信できる、他の HTTP サーバーを使用することもできます。

あなたはインポートされたコンポーネントのテンプレートが JavaScript 文字列としてインライン化されていることに気づいたかもしれません。あなたが VSCode を使っていれば、es6-string-html 拡張をインストールして /*html*/ コメントを文字列の前につけることで構文を強調表示 (syntax highlighting) できます。

ビルドステップなしで Composition API を使用する #

Composition API の例の多くは <script setup> 構文を使用しています。Composition API をビルドなしで使用する場合は、setup() オプションの使用方法を参照してください。

次のステップ #

あなたが はじめに を跳ばしたなら、残りのドキュメントに移る前にこれを読むことを強く推奨します。