クイックスタート #

あなたのユースケースや好みに応じて、ビルドステップの有無に関わらず Vue を使うことができます。

ビルドツールあり #

ビルドセットアップによって Vue の単一ファイルコンポーネント (SFC) を使うことができます。Vue の公式ビルドセットアップは、モダンで軽量、そして非常に高速なフロントエンドビルドツールである Vite に基づいています。

オンライン #

SFC を StackBlitz 上のオンラインで試してみることができます。StackBlitz は Vite に基づいたビルドセットアップをブラウザー上で直接実行するので、ローカルのセットアップとほとんど同じですが、あなたのマシンに何かをインストールする必要がありません。

ローカル #

マシン上にビルドツール対応の Vue プロジェクトを作成するためには、コマンドラインで次のコマンドを（> 記号なしで）実行します。

> 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 ディレクトリーに作成されます。プロダクション環境への出荷についてさらに学ぶには プロダクション環境への配信 を確認してください。

次のステップ ＞

ビルドツールなし #

ビルドステップなしで Vue を始めるには、単に次のコードを HTML ファイルにコピーしてブラウザーでそれを開くだけでよいです:

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

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

<script>
  const { createApp } = Vue

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

上記の例では、Vue のグローバルビルドを使用しており、すべての API はグローバル変数 Vue の下で公開されています。例えば、ref という API も使いたい場合は、以下のようにします:

const { createApp, ref } = Vue

グローバルビルドは機能しますが、以降のドキュメントでは一貫性を保つため主に ES modules 構文を使用します。ネイティブ ES モジュールで Vue を使うには、代わりに次の HTML を使用してください。

<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>

コード中の 'vue' から直接インポートする方法に注目してください - これは <script type="importmap"> ブロックによって可能になり、Import Maps と呼ばれるネイティブのブラウザー機能を活用します。

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

HTTP 経由の提供 #

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

<!-- index.html -->
<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>`
}

これを機能させるためには、file:// プロトコルの代わりに http:// プロトコル経由で提供する必要があります。ローカル HTTP サーバーを起動するには、まず Node.js をインストールし、そしてコマンドラインから HTML ファイルと同じディレクトリーで npx serve を実行します。静的ファイルを正しい MIME タイプで提供できる他の HTTP サーバーを使うこともできます。

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

次のステップ #

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