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]>
vuejs-translations · Oct 18, 2024 · 78d61f2 · 78d61f2
1 parent 17041a2
commit 78d61f2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/api/sfc-script-setup.md b/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:

diff --git a/src/api/sfc-spec.md b/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 -->`