File tree 4 files changed +7
-8
lines changed
4 files changed +7
-8
lines changed Original file line number Diff line number Diff line change @@ -4,16 +4,16 @@ ogImage: true
4
4
5
5
# Vueの基本
6
6
7
- Nuxtは、ユーザーインターフェイスを構築するためのプログレッシブなフレームワークである [ Vue 3] ( https://vuejs.org/ ) を使用しています 。このセクションでは、Vueの基本について説明します 。
7
+ Nuxt は、 [ Vue 3] ( https://vuejs.org/ ) というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています 。このセクションでは、Vue の基本について説明します 。
8
8
9
9
エディタに表示されているのは、[ Vueシングルファイルコンポーネント] ( https://vuejs.org/guide/scaling-up/sfc.html ) (SFC)です。
10
10
11
- SFCは 、HTML、CSS、およびJavaScriptを一つの ` .vue ` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScriptロジックを定義するための [ ` <script setup> ` ] ( https://vuejs.org/api/sfc-script-setup.html ) ブロック、HTMLテンプレートを定義するための ` <template> ` ブロック、およびCSSスタイルを定義するためのオプションの ` <style> ` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[ 公式のVueドキュメント] ( https://v3.vuejs.org/guide/single-file-component.html ) で詳細を読むことができます。
11
+ SFC は 、HTML、CSS、および JavaScript を 1 つの ` .vue ` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための [ ` <script setup> ` ] ( https://vuejs.org/api/sfc-script-setup.html ) ブロック、HTML テンプレートを定義するための ` <template> ` ブロック、および CSS スタイルを定義するためのオプションの ` <style> ` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[ 公式のVueドキュメント] ( https://v3.vuejs.org/guide/single-file-component.html ) で詳細を読むことができます。
12
12
13
- Nuxtでは 、Vue SFCをそのままサポートしており 、アプリケーションを構築するために使用することを強くお勧めします。NuxtがVueのデフォルトのVue SFCと異なる点の一つは 、[ Vueユーティリティを自動インポート] ( https://nuxt.com/docs/guide/concepts/auto-imports ) することです。そのため、` ref ` 、` computed ` などのVue APIを直接インポートせずに使用することができます 。
13
+ Nuxt では 、Vue SFC をそのままサポートしており 、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは 、[ Vueユーティリティを自動インポート] ( https://nuxt.com/docs/guide/concepts/auto-imports ) することです。そのため、` ref ` 、` computed ` などの Vue API を直接インポートせずに使用することができます 。
14
14
15
15
:: note
16
- ** ヒント** : Vueコンポーネントを定義する方法はいくつかありますが 、一般的には[ Composition API] ( https://vuejs.org/guide/introduction.html#composition-api ) を使用した[ ` <script setup> ` ] ( https://vuejs.org/api/sfc-script-setup.html ) を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vueを初めて使用する場合 、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的にVueを始められるでしょう 。
16
+ ** ヒント** : Vue コンポーネントを定義する方法はいくつかありますが 、一般的には[ Composition API] ( https://vuejs.org/guide/introduction.html#composition-api ) を使用した[ ` <script setup> ` ] ( https://vuejs.org/api/sfc-script-setup.html ) を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合 、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう 。
17
17
::
18
18
19
19
今後、以下のトピックについて説明します:
Original file line number Diff line number Diff line change 1
1
# Vueの基本のまとめ
2
2
3
- おめでとうございます!これでVueの基本を学び終わりました。さらにVueについて学びたい場合は 、[ 公式のVueドキュメント] ( https://vuejs.org/ ) をご覧ください。より詳しいガイドやチュートリアルが用意されています。
3
+ おめでとうございます!これで Vue の基本を学び終わりました。さらに Vue について学びたい場合は 、[ 公式のVueドキュメント] ( https://vuejs.org/ ) をご覧ください。より詳しいガイドやチュートリアルが用意されています。
4
4
5
- 次は、Nuxtがどのようにあなたの開発体験をさらに向上させるかを見ていきましょう 。
5
+ 次は、Nuxt がどのようにあなたの開発体験をさらに向上させるかを見ていきましょう 。
Original file line number Diff line number Diff line change @@ -7,7 +7,7 @@ ogImage: true
7
7
Nuxt では、特定のルートにナビゲートする前にコードを実行する為のミドルウェアを提供しています。\
8
8
この機能は例えば、認証状態によってページへのアクセスを制限する場合などに便利です。
9
9
10
- ミドルウェアにはグローバルミドルウェアとページ単位のミドルウェアの2つの種類があります 。
10
+ ミドルウェアにはグローバルミドルウェアとページ単位のミドルウェアの 2 つの種類があります 。
11
11
どちらも、` middleware ` ディレクトリに実装します。
12
12
13
13
## グローバルミドルウェア
Original file line number Diff line number Diff line change 2
2
ogImage : true
3
3
---
4
4
5
-
6
5
# レンダリングモード
7
6
8
7
Nuxt は様々なレンダリングモードをサポートしています。\
You can’t perform that action at this time.
0 commit comments