doc(fix vuejs/core#11367):add a warn about '~' in src-imports (#3061)

* doc:add a warn about '~' in src-imports

* Update src/api/sfc-spec.md

Co-authored-by: Natalia Tepluhina <[email protected]>

* Update src/api/sfc-spec.md

Co-authored-by: Natalia Tepluhina <[email protected]>

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

* doc(import statement): delete extraneous blank lines

---------

Co-authored-by: 包伟斌 <[email protected]>
Co-authored-by: Natalia Tepluhina <[email protected]>

Author: 3 people

src/api/sfc-script-setup.md

@@ -479,6 +479,20 @@ In addition, the awaited expression will be automatically compiled in a format t
 `async setup()` must be used in combination with [`Suspense`](/guide/built-ins/suspense.html), which is currently still an experimental feature. We plan to finalize and document it in a future release - but if you are curious now, you can refer to its [tests](https://github.com/vuejs/core/blob/main/packages/runtime-core/__tests__/components/Suspense.spec.ts) to see how it works.
 :::
 
+## Import Statements {#imports-statements}
+
+Import statements in vue follow [ECMAScript module specification](https://nodejs.org/api/esm.html).
+In addition, you can use aliases defined in your build tool configuration:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { componentA } from './Components'
+import { componentB } from '@/Components'
+import { componentC } from '~/Components'
+</script>
+```
+
 ## Generics <sup class="vt-badge ts" /> {#generics}
 
 Generic type parameters can be declared using the `generic` attribute on the `<script>` tag:

src/api/sfc-spec.md

@@ -136,6 +136,13 @@ Beware that `src` imports follow the same path resolution rules as webpack modul
 </unit-test>
 ```
 
+:::warning Note
+While using aliases in `src`, don't start with `~`, anything after it is interpreted as a module request. This means you can reference assets inside node modules:
+```vue
+<img src="~some-npm-package/foo.png">
+```
+:::
+
 ## Comments {#comments}
 
 Inside each block you shall use the comment syntax of the language being used (HTML, CSS, JavaScript, Pug, etc.). For top-level comments, use HTML comment syntax: `<!-- comment contents here -->`