vue import from

vue 使用import ...from..来引入组件，方法，库，变量等。而from后面的文件类型可以是js,vue,json

vue2在webpack.base.conf.js中进行配置

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

这里的extensions定义了from来源的类型，其中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'  

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

js>vue

vue3隐藏了配置文件，需要新建一个vue.config.js来配置（会自动和隐藏配置进行合并）

from后的来源除了文件，还可以是文件夹：

import test from './components'————引入文件夹

文件夹引入逻辑：若from的来源是文件夹，那么在package.json存在且设置正确的情况下，会默认加载package.json；若不满足，则加载index.js；若不满足，则加载index.vue。若from的来源是文件夹，那么在package.json存在且设置正确的情况下，会默认加载package.json；若不满足，则加载index.js；若不满足，则加载index.vue。

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文件夹栗子

 import { AppMain, Navbar, Sidebar, TagsView } from './components'

 from后面跟着的是一个components文件夹，根据上方加载原则查无package.json，加载index.js

export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'

可以看到这4个export导入的都是vue类型文件。

这样，layout/index.vue就通过加载一个文件夹，获得了4个vue组件。