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不可以省略字尾


那麼，若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-Element-Admin的原始碼，其中有個Layout.vue：

裡面呼叫import匯入了3個元件：

import { Navbar, Sidebar, AppMain } from './components'。 這裡，from的路徑'./components'就是個資料夾。

於是，按照前面的規則，首先檢視資料夾下是否有package.json：

並沒有package.json。

package.json不存在，那麼查詢index.js。index.js是存在的，於是載入。

開啟index.js：

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

可以看到3個export，都沒有後綴，所以其型別vue，js和資料夾都是有可能的。

同一級目錄下，存在AppMain.vue和Navbar.vue，沒有同名js，所以可以判斷出這兩個都是載入的vue檔案，即：

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

而Sidebar只有一個資料夾，所以是載入的資料夾。開啟Sidebar資料夾：

優先找package.json。不存在。然後找index.js，不存在。最後找index.vue，存在。

於是：

export { default as Sidebar } from './Sidebar'   相當於：export { default as Sidebar } from './Sidebar/index.vue'

這樣，Layout.vue就通過載入一個資料夾，獲得了3個vue元件。