CODEWITHSUNDEEP
javascriptimportvue.js
Saras Arya
Saras Arya

Reputation: 3112

How does this import statement work?

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?

Upvotes: 1

Views: 54

Answers (2)

lmiller1990
lmiller1990

Reputation: 945

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.

Upvotes: 2

Kunvar Singh
Kunvar Singh

Reputation: 1885

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.

Upvotes: 0

Related Questions