Vue中importfrom的來源及省略后綴與加載文件夾問題怎么解決-創(chuàng)新互聯(lián)

這篇文章主要介紹Vue中import from的來源及省略后綴與加載文件夾問題怎么解決，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

10年的靈璧網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整靈璧建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“靈璧網(wǎng)站設(shè)計(jì)”,“靈璧網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

Vue使用import ... from ...來導(dǎo)入組件，庫，變量等。而from后的來源可以是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)先級是：

js>vue

from后的來源除了文件，還可以是文件夾：

import test from './components'

該情況下的邏輯是：

if(package.json存在 && package.main字段存在 && package.main指定的js存在) {
  取package.main指定的js作為from的來源，即使該js可能格式或內(nèi)容錯(cuò)誤
} else if(index.js存在){
  取index.js作為from的來源
} else {
  取index.vue作為from的來源
}

因此若from的來源是文件夾，那么在package.json存在且設(shè)置正確的情況下，會默認(rèn)加載package.json；若不滿足，則加載index.js；若不滿足，則加載index.vue。

注意加載文件夾的形式，與上面省略后綴的形式是完全相同的。所以一個(gè)省略后綴的from來源，有可能是.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：

并沒有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個(gè)export，都沒有后綴，所以其類型vue，js和文件夾都是有可能的。

同一級目錄下，存在AppMain.vue和Navbar.vue，沒有同名js，所以可以判斷出這兩個(gè)都是加載的vue文件，即：

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

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

而Sidebar只有一個(gè)文件夾，所以是加載的文件夾。打開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就通過加載一個(gè)文件夾，獲得了3個(gè)vue組件。

以上是“Vue中import from的來源及省略后綴與加載文件夾問題怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：Vue中importfrom的來源及省略后綴與加載文件夾問題怎么解決-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://muchs.cn/article16/dsjcgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、標(biāo)簽優(yōu)化、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)