建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹Vue中import from的來(lái)源及省略后綴與加載文件夾問(wèn)題怎么解決，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。
Vue使用import ... from ...來(lái)導(dǎo)入組件，庫(kù)，變量等。而from后的來(lái)源可以是js，vue，json。這個(gè)是在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'
則編譯出錯(cuò)。
那么，若test.vue，test.js同時(shí)存在于同一個(gè)文件夾下，則import的導(dǎo)入優(yōu)先級(jí)是：
js>vue
from后的來(lái)源除了文件，還可以是文件夾：
import test from './components'
該情況下的邏輯是：
if(package.json存在 && package.main字段存在 && package.main指定的js存在) {
取package.main指定的js作為from的來(lái)源，即使該js可能格式或內(nèi)容錯(cuò)誤
} else if(index.js存在){
取index.js作為from的來(lái)源
} else {
取index.vue作為from的來(lái)源
}因此若from的來(lái)源是文件夾，那么在package.json存在且設(shè)置正確的情況下，會(huì)默認(rèn)加載package.json；若不滿足，則加載index.js；若不滿足，則加載index.vue。
注意加載文件夾的形式，與上面省略后綴的形式是完全相同的。所以一個(gè)省略后綴的from來(lái)源，有可能是.vue，.js，或者文件夾。
例：
查看Vue-Element-Admin的源碼，其中有個(gè)Layout.vue：
里面調(diào)用import導(dǎo)入了3個(gè)組件：
import { Navbar, Sidebar, AppMain } from './components'
這里，from的路徑'./components'就是個(gè)文件夾。
于是，按照前面的規(guī)則，首先查看文件夾下是否有package.json：
并沒(méi)有package.json。
package.json不存在，那么查找index.js。index.js是存在的，于是加載。
打開(kāi)index.js：
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'可以看到3個(gè)export，都沒(méi)有后綴，所以其類型vue，js和文件夾都是有可能的。
同一級(jí)目錄下，存在AppMain.vue和Navbar.vue，沒(méi)有同名js，所以可以判斷出這兩個(gè)都是加載的vue文件，即：
export { default as Navbar } from './Navbar.vue'
export { default as AppMain } from './AppMain.vue'而Sidebar只有一個(gè)文件夾，所以是加載的文件夾。打開(kāi)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就通過(guò)加載一個(gè)文件夾，獲得了3個(gè)vue組件。
以上是“Vue中import from的來(lái)源及省略后綴與加載文件夾問(wèn)題怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文題目：Vue中importfrom的來(lái)源及省略后綴與加載文件夾問(wèn)題怎么解決-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://www.ef60e0e.cn/article/dsjcgg.html
