From 0a7e594c014303bd5e382f27422e3e40918bdd34 Mon Sep 17 00:00:00 2001
From: Hikaru Kobayashi <hikaru.kobayashi0719@gmail.com>
Date: Thu, 24 Oct 2024 18:37:59 +0900
Subject: [PATCH] * doc:add a warn about '~' in src-imports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update src/api/sfc-spec.md

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>

* Update src/api/sfc-spec.md

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>

* doc(import statement): add import statement in script setup

* doc(import statement): delete extraneous blank lines

---------

Co-authored-by: 包伟斌 <1813148814@qq.com>
Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
---
 src/api/sfc-script-setup.md | 14 ++++++++++++++
 src/api/sfc-spec.md         |  7 +++++++
 2 files changed, 21 insertions(+)

diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index b7eaf1145..550a0fb25 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -479,6 +479,20 @@ const post = await fetch(`/api/post/1`).then((r) => r.json())
 `async setup()` は、現在まだ実験的な機能である [`Suspense`](/guide/built-ins/suspense.html) と組み合わせて使用する必要があります。将来のリリースで完成させてドキュメント化する予定ですが、もし今興味があるのであれば、その[テスト](https://github.com/vuejs/core/blob/main/packages/runtime-core/__tests__/components/Suspense.spec.ts)を参照することで、どのように動作するかを確認できます。
 :::
 
+## インポート文 {#imports-statements}
+
+Vue のインポート文は [ECMAScript モジュールの仕様](https://nodejs.org/api/esm.html)に従います。
+さらに、ビルドツール設定で定義されたエイリアスを使用することができます:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { componentA } from './Components'
+import { componentB } from '@/Components'
+import { componentC } from '~/Components'
+</script>
+```
+
 ## ジェネリクス <sup class="vt-badge ts" /> {#generics}
 
 `<script>` タグの `generic` 属性を使ってジェネリック型パラメーターを宣言できます:
diff --git a/src/api/sfc-spec.md b/src/api/sfc-spec.md
index a97993fa5..0e7bfbb46 100644
--- a/src/api/sfc-spec.md
+++ b/src/api/sfc-spec.md
@@ -136,6 +136,13 @@ p {{ msg }}
 </unit-test>
 ```
 
+:::warning Note
+`src` でエイリアスを使用する場合、モジュールリクエストとして解釈される `~` から始めないでください。これは、ノードモジュール内のアセットを参照できることを意味します:
+```vue
+<img src="~some-npm-package/foo.png">
+```
+:::
+
 ## コメント {#comments}
 
 各ブロックの中では、使用されている言語（HTML、CSS、JavaScript、Pug など）のコメント構文を使用する必要があります。トップレベルのコメントには、HTML のコメント構文を使用します: `<!-- コメント内容をここに -->`