路径写法
一种写法是./引用,表示同级目录下的绝对路径
import hello from './hello';
一种是用../引用,表示上一级目录下的绝对路径
import hello from '../hello';
一种写法是@/引用
import hello from '@/components/hello';
@的相关设置可以在webpack.base.conf.js文件中找到
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src')
}
}
...
}
这表示,@等同于为src文件夹。
另一种是~@引用,其中~表示根目录,~@表示根目录下@配置的路径。
省略后缀与引入文件夹
其中,extensions数组中展示了可以引入的文件类型,分别是.js,vue,.json文件。
其中.js文件和.vue文件在引入时可以省略后缀,.json文件在引入时不能省略后缀。
//这两者等同
import hello from './hello.js';
import hello from './hello';
//这两者等同
import hello from './hello.vue';
import hello from './hello';
//这两者不等同
import hello from './hello.json';
import hello from './hello';
如果一个文件夹中同时存在hello.js与hello.vue文件,那么引入优先级是
js>vue
也就是说,在省略后缀的情况下,在文件夹中先找.js文件,再找.vue文件。
import除了上面三种文件,还可能直接从文件夹中引入
import hello from './components';
在这种情况下,引入文件的逻辑是
if(文件夹中package.json存在 && package.main字段存在 && package.main指定的js存在) {
取package.main指定的js作为from的来源,即使该js可能格式或内容错误
} else if(index.js存在){
取index.js作为from的来源
} else {
取index.vue作为from的来源
}
因此,如果是从一个没有后缀的文件引入,那么from的来源可能是.js、.vue或者文件夹。