Vue?import?from省略后綴/加載文件夾的方法/實例詳解
簡介
本文介紹Vue在import時省略后綴以及import文件夾的方法。
省略后綴
說明
可以配置省略后綴,比如:test.js,只用test即可。
官網(wǎng)網(wǎng)址
詳解
配置文件:webpack.base.conf.js(也可以在vue.config.js中配置相應(yīng)的位置)
(下邊這個是默認(rèn)配置,項目中不配置也是這樣的規(guī)則)。
module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], } ... }
這里的extensions指定了from后可導(dǎo)入的文件類型。上面定義的這3類可導(dǎo)入文件,js和vue是可以省略后綴的。
例如:
對于test.js,可以用如下兩種任一方式導(dǎo)入:
import test from './test' import test from './test.js'
對于test.vue,可以用如下兩種任一方式導(dǎo)入:
import test from './test' import test from './test.vue'
json不可以省略后綴,只能如下導(dǎo)入(如果去掉后綴則編譯出錯):
import test from './test.json'
文件名相同的處理流程
若test.vue,test.js同時存在于同一個文件夾下,會按照配置的順序進(jìn)行導(dǎo)入。比如:按上邊的配置,.js優(yōu)先于.vue,則import的導(dǎo)入優(yōu)先級是:js > vue。
加載文件夾
簡介
說明
可以import文件夾。例如:import test from './components'。
若from文件夾,則對于該文件夾下的文件:
- 如果package.json存在且設(shè)置正確的情況下,會加載package.json;
- 若不滿足,則加載index.js;
- 若不滿足,則加載index.vue。
詳解
偽代碼如下:
在該目錄下:
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的來源 }
實例
以vue-element-admin的代碼為例。
1. 路由配置中導(dǎo)入layout文件夾
此時,按照規(guī)則,會去加載package.json,沒有;則找index.js,沒有;再找index.vue,找到了。
2.layout/index.vue引入目錄
引入的是components/index.js
3.components/index.js引入各個組件
其他網(wǎng)址
到此這篇關(guān)于Vue import from省略后綴/加載文件夾的方法/實例詳解的文章就介紹到這了,更多相關(guān)Vue--import from省略后綴內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)
本文通過案例場景給大家介紹vue點擊彈窗自動觸發(fā)點擊事件的解決辦法,通過兩種方法給大家分享vue 自動觸發(fā)點擊事件的處理方法,對vue自動觸發(fā)點擊事件相關(guān)知識感興趣的朋友一起看看吧2021-05-05Vue自定義指令實現(xiàn)彈窗拖拽四邊拉伸及對角線拉伸效果
小編最近在做一個vue前端項目,需要實現(xiàn)彈窗的拖拽,四邊拉伸及對角線拉伸,以及彈窗邊界處理功能,本文通過實例代碼給大家分享我的實現(xiàn)過程及遇到問題解決方法,感興趣的朋友一起看看吧2021-08-08vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明
這篇文章主要介紹了vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08