Vue中import from的來源及省略后綴與加載文件夾問題
Vue使用import ... from ...來導(dǎo)入組件,庫,變量等。而from后的來源可以是js,vue,json。這個是在webpack.base.conf.js中設(shè)置的:
module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } } ... }
這里的extensions指定了from后可導(dǎo)入的文件類型。
而上面定義的這3類可導(dǎo)入文件,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'
則編譯出錯。
那么,若test.vue,test.js同時存在于同一個文件夾下,則import的導(dǎo)入優(yōu)先級是:
js>vue
from后的來源除了文件,還可以是文件夾:
import test from './components'
該情況下的邏輯是:
if(package.json存在 && package.main字段存在 && package.main指定的js存在) { 取package.main指定的js作為from的來源,即使該js可能格式或內(nèi)容錯誤 } else if(index.js存在){ 取index.js作為from的來源 } else { 取index.vue作為from的來源 }
因此若from的來源是文件夾,那么在package.json存在且設(shè)置正確的情況下,會默認(rèn)加載package.json;若不滿足,則加載index.js;若不滿足,則加載index.vue。
注意加載文件夾的形式,與上面省略后綴的形式是完全相同的。所以一個省略后綴的from來源,有可能是.vue,.js,或者文件夾。
例:
查看Vue-Element-Admin的源碼,其中有個Layout.vue:
里面調(diào)用import導(dǎo)入了3個組件:
import { Navbar, Sidebar, AppMain } from './components'
這里,from的路徑'./components'就是個文件夾。
于是,按照前面的規(guī)則,首先查看文件夾下是否有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文件夾:
優(yōu)先找package.json。不存在。
然后找index.js,不存在。
最后找index.vue,存在。
于是:
export { default as Sidebar } from './Sidebar'
相當(dāng)于:
export { default as Sidebar } from './Sidebar/index.vue'
這樣,Layout.vue就通過加載一個文件夾,獲得了3個vue組件。
總結(jié)
以上所述是小編給大家介紹的Vue中import from的來源及省略后綴與加載文件夾,希望對大家有所幫助!
相關(guān)文章
vue中實(shí)現(xiàn)先請求數(shù)據(jù)再渲染dom分享
下面小編就為大家分享一篇vue中實(shí)現(xiàn)先請求數(shù)據(jù)再渲染dom分享,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue實(shí)現(xiàn)動態(tài)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動態(tài)面包屑導(dǎo)航的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue項(xiàng)目中如何將當(dāng)前頁面生成圖片
這篇文章主要介紹了vue項(xiàng)目中如何將當(dāng)前頁面生成圖片問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue中使用pdfjs-dist?+?turnjs實(shí)現(xiàn)頁面的翻書瀏覽功能
這篇文章主要介紹了vue中使用pdfjs-dist?+?turnjs實(shí)現(xiàn)頁面的翻書瀏覽,通過本文學(xué)習(xí)我們知道了pdfjs-dist 的工作原理是把獲取到的 pbf 的文件的數(shù)據(jù)流, 利用 canvas轉(zhuǎn)換成圖片,本文通過實(shí)例代碼詳解講解,需要的朋友可以參考下2022-10-10Vue3新特性之在Composition API中使用CSS Modules
這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07