欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中import from的來源及省略后綴與加載文件夾問題

 更新時間:2020年02月09日 11:38:38   作者:未月廿三  
這篇文章主要介紹了Vue中import from的來源--省略后綴與加載文件夾,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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分享

    下面小編就為大家分享一篇vue中實(shí)現(xiàn)先請求數(shù)據(jù)再渲染dom分享,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue使用自定義指令來控制頁面按鈕組的權(quán)限思想

    vue使用自定義指令來控制頁面按鈕組的權(quán)限思想

    這篇文章主要介紹了vue使用自定義指令來控制頁面按鈕組的權(quán)限思想,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue 中的受控與非受控組件的實(shí)現(xiàn)

    Vue 中的受控與非受控組件的實(shí)現(xiàn)

    這篇文章主要介紹了Vue 中的受控與非受控組件的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • Vue過濾器與內(nèi)置指令和自定義指令及組件使用詳解

    Vue過濾器與內(nèi)置指令和自定義指令及組件使用詳解

    這篇文章主要介紹了Vue過濾器與內(nèi)置指令和自定義指令及組件使用方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-12-12
  • Vite引入虛擬文件的實(shí)現(xiàn)

    Vite引入虛擬文件的實(shí)現(xiàn)

    本文主要介紹了Vite引入虛擬文件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue實(shí)現(xiàn)動態(tài)面包屑導(dǎo)航

    vue實(shí)現(xiàn)動態(tài)面包屑導(dǎo)航

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動態(tài)面包屑導(dǎo)航的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue項(xiàng)目中如何將當(dāng)前頁面生成圖片

    vue項(xiàng)目中如何將當(dāng)前頁面生成圖片

    這篇文章主要介紹了vue項(xiàng)目中如何將當(dāng)前頁面生成圖片問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue中使用pdfjs-dist?+?turnjs實(shí)現(xiàn)頁面的翻書瀏覽功能

    vue中使用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-10
  • Vue3新特性之在Composition API中使用CSS Modules

    Vue3新特性之在Composition API中使用CSS Modules

    這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Vue深入講解數(shù)據(jù)響應(yīng)式原理

    Vue深入講解數(shù)據(jù)響應(yīng)式原理

    應(yīng)用會對用戶的操作進(jìn)行反饋,就叫響應(yīng)式,數(shù)據(jù)變化會實(shí)時改變UI,就叫數(shù)據(jù)響應(yīng)式,修改Vue實(shí)例中的數(shù)據(jù)時,視圖會重新渲染,就是Vue的數(shù)據(jù)響應(yīng)式
    2022-05-05

最新評論