此导入语句如何工作？

Question

I just downloaded a template from a vue cli as
vue init webpack my-project .
and inside Hello.vue I saw an import statement like this.
import Hello from '@/components/Hello';

and I am curious what does that @ does. It's used at a lot of places but no where it's written what exactly it does. Would be great if someone can explain what it does? and how it is different from a normal import?

Answer 1

If you look in the project at webpack.base.config.js for the webpack template vue-cli creates, you can see there is an alias set:

'@': resolve('src')

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

Line 27.

So it's just to make it easier to load modules. So you dont need to type things like import 'component from '../../../src/components' you can just type ' @/components '.

So it it just for convenience. There is no difference in functionality to a regular import.

Answer 2

If you are writting the following statement:

import Hello from '@/components/Hello';

In this statement @ means that, it will load the correspondes package and import class,variable and methods into your component.