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 があります。
Files
Editor
Initializing WebContainer
Mounting files
Installing dependencies
Starting Nuxt server
Waiting for Nuxt to ready
Terminal