vue使用import來引入組件的注意事項

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組件。
---------------------
原文：https://blog.csdn.net/fyyyr/article/details/83657828