Vue.js

# SFC ツール

# オンラインプレイグラウンド

Vue SFC を試すため、あなたのコンピュータに何かをインストールする必要はありません。ブラウザ上で操作できるオンラインプレイグラウンドがたくさんあります:

また、バグを報告する際には、これらのオンラインプレイグラウンドを使って、再現したものを提供することをおすすめします。

# プロジェクトの足場

# Vite

Vite (opens new window) はファーストクラスの Vue SFC サポートをする軽量で高速なビルドツールです。Vue 自体の作成者でもある Evan You によって作成されました！　Vite + Vue を使い始めるには、単に次のコマンドを実行するだけです:

npm init vite@latest
1

その後、Vue テンプレートを選択して、指示に従います。

SFC Playground (opens new window) は Vite プロジェクトとしてファイルダウンロードすることもサポートします。

# Vue CLI

Vue CLI (opens new window) は Vue プロジェクト用の webpack をベースとした公式のビルドツールです。Vue CLI ではじめるには:

npm install -g @vue/cli
vue create hello-vue
1
2

# Vite それとも Vue CLI？

開発サーバの起動や HMR の更新パフォーマンスの点で、開発体験が大幅に向上するため、Vite で新しいプロジェクトを開始することをおすすめします（詳細 (opens new window)）。特定の webpack の機能（Module Federation など）に依存する場合にのみ、Vue CLI を使用してください。

Rollup (opens new window) のユーザならば、本番向けビルドに Rollup を使用して、Rollup 互換のプラグインシステムをサポートしているため、Vite を安全に採用できます。Rollup のメンテナでさえ、Vite を Rollup のウェブ開発用のラッパーとして推奨しています (opens new window)。

# IDE サポート

推奨される IDE のセットアップは VSCode (opens new window) と Volar (opens new window) 拡張機能です。Volar は、テンプレート式、コンポーネントの props、スロットの検証のために、シンタックスハイライトと高度なインテリセンスを提供します。Vue SFC を可能な限り最高に活用したい場合、特に TypeScript も利用している場合、このセットアップを強くおすすめします。

WebStorm (opens new window) も Vue SFC に適切なサポートを提供しています。ただし現時点では <script setup> のサポートが 進行中 (opens new window) であることには注意してください。

他のほとんどのエディタには、コミュニティが作成した Vue のシンタックスハイライトのサポートがありますが、同じレベルのコードインテリセンスはありません。長期的には、Volar のコアロジックが標準言語サーバとして実装されているため、Language Service Protocol (opens new window) を活用することでエディタのサポート範囲を広げることができればと考えています。

# テストサポート

# カスタムブロックの統合

カスタムブロックは、異なるリクエストクエリを同じ Vue ファイルへのインポートにコンパイルされます。これらのインポートリクエストを処理するのは、基盤となるビルドツールに任されています。

  • Vite を使用する場合、カスタム Vite プラグインを使用して、一致したカスタムブロックを実行可能な JavaScript に変換する必要があります。[例 (opens new window)]

  • Vue CLI やプレーンな Webpack を使用する場合、一致したブロックを変換するように Webpack loader を構成する必要があります。[例 (opens new window)]

# 下位レベルのツール

# @vue/compiler-sfc

このパッケージは Vue コアのモノレポの一部で、メインの vue パッケージと常に同じバージョンで公開されます。通常、プロジェクト内で vue の Peer Dependency としてリストアップされます。正しい動作を保証するため、そのバージョンは常に vue と同期している必要があります。つまり、vue のバージョンをアップグレードするときはいつも、それに合わせて @vue/compiler-sfc もアップグレードする必要があります。

このパッケージ自体は、Vue SFC を処理するための低レベルなユーティリティを提供して、カスタムツールで Vue SFC をサポートする必要があるツールの作成者のためのものです。

# @vitejs/plugin-vue

Vite で Vue SFC サポートを提供する公式プラグインです。

# vue-loader

Webpack で Vue SFC のサポートを提供する公式の Loader です。Vue CLI を使用している場合は、vue-loader オプション変更についての Vue CLI ドキュメント (opens new window) も参照してください。

← <script setup> →