Vue 中 import from

import...from... 加载顺序

import...from... 的from命令后面可以跟很多路径格式：

• 若只给出 vue，axios，less 这样的包名，则会自动到 node_modules 中查到，找到后则加载；
• 若给出相对路径及文件前缀，则到指定位置寻找；
  • 如果是文件，则加载文件
  • 如果是文件夹，则先加载 index.js ,如果没找到，则加载 index.vue

import from 的来源：省略后缀与加载文件夹

省略后缀

Vue 使用 import ... from ... 来导入组件，库，变量等。而 from 后的来源可以是 js，vue，json。这个是在 webpack.base.conf.js 中设置的：

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  }
...
}

这里的 extensions 指定了 from 后可导入的文件类型。而上面定义的这 3 类可导入文件，js 和 vue 是可以省略后缀的：

import test from './test.vue'
等同于：
import test from './test'

import test from'./test.js'
等同于：
import test from './test'

json不可以省略后缀：
import test from './test.json'
省略为：
import test from './test'
则编译出错。

文件夹中 .js 和 .vue 的优先级

那么，若 test.vue，test.js 同时存在于同一个文件夹下，则 import 的导入优先级是： js>vue

from 后的来源除了文件，还可以是文件夹：import test 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 的来源是文件夹，那么在 package.json 存在且设置正确的情况下，会默认加载 package.json；若不满足，则加载 index.js；若不满足，则加载 index.vue。

注意加载文件夹的形式，与上面省略后缀的形式是完全相同的。所以一个省略后缀的from来源，有可能是.vue，.js，或者文件夹。

Vue 中 import ‘@…’是什么

例如：

import model from "@/common/model";

这个是 webpack 使用 loader 里配置的

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径