ツールガイド
オンラインで試す
Vue の SFC を試すためにマシンに何かをインストールする必要はありません - ブラウザーですぐに試せるオンラインのプレイグラウンドがあります:
- Vue SFC Playground
- 常に最新のコミットがデプロイされています
- コンポーネントのコンパイル結果を確認できるように設計されています
- Vue + Vite on StackBlitz
- ブラウザー上で Vite の開発サーバーを実行している IDE 的な環境です
- ローカルでセットアップした状態に近いです
また、バグ報告の際には、これらのオンラインのプレイグラウンドで再現方法を提供することが推奨されます。
プロジェクトの雛形の作成 (Project Scaffolding)
Vite
Vite は、ファーストクラスの Vue SFC のサポートがある軽量で高速なビルドツールです。Vue の作者でもある Evan You によって作成されました！
Vite + Vue で始めるには、以下を実行するだけです:
$ npm init vue@latestこのコマンドは、Vue 公式の雛形作成 (scaffolding) ツールである create-vue をインストールして実行します。
- Vite の詳細については、Vite ドキュメント を参照してください。
- Vite のプロジェクトで Vue のコンパイラーにオプションを渡すなどの、Vue 固有の設定をするには、@vitejs/plugin-vue のドキュメントを参照してください。
上記のオンラインプレイグラウンドはいずれも Vite プロジェクトとしてのファイルのダウンロードにも対応しています。
Vue CLI
Vue CLI は、Vue のための公式の webpack ベースのツールチェーンです。現在はメンテナンスモードで、特定の webpack のみの機能に依存していない限り、新しいプロジェクトは Vite で始めることを推奨します。ほとんどの場合において Vite は優れた開発経験を提供します。
Vue CLI から Vite への移行は以下を参照してください:
ブラウザー上でのテンプレートコンパイルについての注意点
Vue をビルドステップなしで使用する場合、コンポーネントテンプレートはページの HTML に直接もしくはインラインの JavaScript の文字列として書き込まれます。Vue はオンザフライでテンプレートのコンパイルを実行するために、テンプレートコンパイラーをブラウザーに同梱する必要があります。一方、ビルドステップでテンプレートをプリコンパイルすれば、コンパイラーは不要になります。Vue は、クライアントのバンドルサイズを小さくするために、ユースケースごとに最適化された さまざまな「ビルド」 を提供しています。
vue.runtime.*で始まるビルドファイルは、ランタイムのみのビルド です: コンパイラーは含まれません。これらのビルドを使用する場合、全てのテンプレートはビルド時にプリコンパイルする必要があります。.runtimeを含まないビルドファイルは、フルビルド です: コンパイラーを含み、ブラウザー上でのテンプレートのコンパイルをサポートします。しかし、ペイロードが ~14kb 増加します。
デフォルトのツールのセットアップでは、SFC 内の全てのテンプレートがコンパイル済みのため、ランタイムのみのビルドを使用します。もし、何らかの理由でビルドステップが有ってもブラウザー上でのコンパイルが必要な場合は、vue の代わりに vue/dist/vue.esm-bundler.js にエイリアスするようにビルドツールを設定すれば、コンパイルできるようになります。
ビルドステップが無いより軽量なものをお探しの場合は、petite-vue をチェックしてみてください。
IDE のサポート
推奨の IDE の設定は VSCode + Volar の拡張です。Volar は、シンタックスハイライト、TypeScript のサポート、テンプレート内の式とコンポーネントプロパティの intellisense を提供します。
TIP
Volar は Vue 2 用の以前の VSCode 拡張である Vetur を置き換えるものです。Vetur をインストールしている場合は、Vue 3 のプロジェクトでは無効にすることを忘れないでください。
WebStorm も Vue SFC の素晴らしいサポートを提供しています。
Language Service Protocol (LSP) をサポートする他の IDE も LSP を介して Volar のコア機能を利用できます。
ブラウザーの開発者ツール
Vue のブラウザー開発者ツール拡張では、Vue アプリのコンポーネントツリーの探索や、個別のコンポーネントの状態の確認、状態管理イベントの追跡、パフォーマンスのプロファイルなどができます。
TypeScript
主な記事: TypeScript で Vue を使用する.
Volar は
<script lang="ts">ブロックを使用した SFC に対して、テンプレート内の式やコンポーネント間のプロパティの検証を含む型チェックを提供します。コマンドラインから同様の型チェックを行う場合や、SFC 用の
d.tsファイルを生成する場合は、vue-tscを使用します。
テスト
主な記事: テストガイド.
E2E テストには Cypress を推奨します。また、Cypress Component Test Runner を介して、Vue の SFC のコンポーネントテストに使用することも可能です。
Vitest は、Vue / Vite チームのメンバーによって作成された、スピードに重点を置いたテストランナーです。Vite ベースのアプリケーションにユニット/コンポーネントテストと同じ即時のフィードバックループを提供するために、特別に設計されています。
Jest は vite-jest を介して Vite で動作させることができます。しかし、これは、既存の Jest ベースのテストスイートを Vite ベースに移行する必要がある場合にのみ推奨される方法で、Vitest では同様の機能をより効率的に統合することができます。
リント
Vue チームは、SFC 固有のリントルールをサポートする ESLint プラグインである eslint-plugin-vue をメンテナンスしています。
Vue CLI を使用していたユーザーは、webpack ローダーを介してリンターを設定することに慣れているかもしれません。しかし、Vite ベースのビルド設定を使用する場合、私たちの一般的な推奨事項は次のとおりです:
npm install -D eslint eslint-plugin-vueを実行し、それからeslint-plugin-vueの 設定ガイド に従います。ESLint for VSCode などの ESLint の IDE 拡張を設定することで、開発中にエディターで直接リンターのフィードバックを受けることができます。また、開発サーバーの起動時に不要なリントが実行されるコストを回避することができます。
プロダクションビルドコマンドの一部として ESLint を実行し、プロダクションにリリースする前に完全なリンターのフィードバックを受けることができます。
(任意) lint-staged のようなツールを設定して、git commit 時に変更したファイルを自動的にリントするようにします。
コードフォーマット
SFC カスタムブロック統合
カスタムブロックは、異なるリクエストクエリを持つ同じ Vue ファイルへのインポートにコンパイルされます。これらのインポートリクエストを処理するのは、ビルドツールに任されています。
Vite を使用する場合、カスタム Vite プラグインを使用して、マッチしたカスタムブロックを実行可能な JavaScript に変換する必要があります。例
Vue CLI またはプレーンな webpack を使用している場合、マッチしたブロックを変換するために webpack ローダーを設定する必要があります。例
低レベルのパッケージ群
@vue/compiler-sfc
このパッケージは Vue core のモノレポの一部で、常にメインの vue パッケージと同じバージョンで公開されています。このパッケージはメインの vue パッケージの依存関係として含まれており、 vue/compiler-sfc の下にプロキシされているので、個別にインストールする必要はありません。
このパッケージ自体は、Vue SFC を処理するための低レベルのユーティリティーを提供し、カスタムツールで Vue SFC をサポートする必要があるツールの作者のみを対象としています。
TIP
Vue のランタイムと同期したバージョンであることを保証するため vue/compiler-sfc のディープインポートを介して使用するのが好ましいです。
@vitejs/plugin-vue
Vite で Vue SFC のサポートを提供するための公式プラグインです。
vue-loader
webpack で Vue の SFC サポートを提供するための公式ローダーです。Vue CLI をお使いの方は、Vue CLI の vue-loader オプションの編集についてのドキュメント もご覧ください。