Vueの基本

Nuxt は、Vue.js というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。
エディタに表示されているのは、Vueシングルファイルコンポーネント(SFC)です。

SFC は、HTML、CSS、および JavaScript を 1 つの .vue ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための <script setup> ブロック、HTML テンプレートを定義するための <template> ブロック、および CSS スタイルを定義するためのオプションの <style> ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、公式のVueドキュメント で詳細を読むことができます。

Nuxt では Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、Vueユーティリティを自動インポート することです。そのため、refcomputed などの Vue API を直接インポートせずに使用することができます。

ヒント: Vue コンポーネントを定義する方法はいくつかありますが、一般的には Composition API を使用した <script setup> を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。

今後、以下のトピックについて説明します:

Nuxt チュートリアルへようこそ!
これは、ガイドとチャレンジで構成されたインタラクティブなチュートリアルで、Nuxt とそのコンセプトをステップバイステップで学ぶのに役立ちます。
リアクティビティー パート1
Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする 優れたリアクティビティシステム を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、ref、computed、watch があります。
ファイル
Editor
WebContainerを初期化中
ファイルをマウント中
依存関係をインストール中
Nuxtサーバーを起動中
Nuxtが準備完了を待機中
ターミナル