此導入聲明如何工作？

Question

我剛剛從vue cli下載了一個模板
vue init webpack my-project。
和內部Hello.vue我看到一個像這樣的導入語句。
import Hello from '@/components/Hello';

我很好奇@是做什麼的。它在很多地方使用，但沒有寫到它究竟做了什麼。如果有人能解釋它的作用會很好嗎？以及它與正常進口有什麼不同？

Answer 1

如果你在項目看webpack.base.config.js爲模板的WebPack VUE-CLI創建的，你可以看到有一個別名集：

'@': resolve('src')

參見：https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.base.conf.js

第27行。

所以它只是爲了更容易加載模塊。所以你不需要輸入像import 'component from '../../../src/components'這樣的東西，你只需輸入'@/components'即可。

所以它只是爲了方便。功能與常規導入沒有區別。

Answer 2

如果您書面方式下面的語句：

進口你好從 '@ /組件/你好';

在這個聲明@意味着，它會加載對應的包和導入類，變量和方法到你的組件。