vue組件的掛載分為局部和全局
局部掛載組件就是在每一個(gè)需要引入的頁(yè)面聋溜，去引入你需要的組件：
import ... from?'../..'
并且需要聲明：
components:?{
? ? ...//引入的組件名? ?
}
我們可以發(fā)現(xiàn)每次使用都需要引入和聲明，這樣會(huì)大大影響效率幽歼。
全局掛載組件就不需要每次引用每次都掛載，只需要全局掛載一次
我們?cè)赾omponents文件夾下的index.js中做一些全局掛載邏輯
代碼如下：
import?Vue?from?'vue'
//封裝獲取組件name的方法
const?resolveComponentName?=?(component,?componentFile?=?'')?=>?{
? //獲取到組件的name名稱
??let?componentName?=?(component.default?||?component).name
????if?(!componentName?&&?componentFile)?{
????const?fileName?=?componentFile.replace(/^.*\/([^/]+)\.js/,?'$1')
????if?(fileName?!==?'index')?{
????????//?非?index.js?直接將文件名作為組件名
????????componentName?=?fileName
????}?else?{
????????//?文件名是index.js
????????//?將該文件的最后一層的目錄名作為組件名
????????componentName?=?componentFile.replace(/^(.*\/)?([^/]+)\/index\.js$/,?'$2')
??????}
????}
??return?componentName?||?''
}
const?context?=?require.context('./',?true,?/^(?!\.?\/?index\.js$).*\.(js|vue)$/)
//遍歷組件
context.keys().forEach(componentFilePath?=>?{
??const?component?=?context(componentFilePath)
????if?(component.__ignore)?{
??????//?true?表示該組件不會(huì)注冊(cè)到vue組件中寸五，但依然會(huì)被加載
??????return
????}
????//獲取組件中的name
????let?componentName?=?resolveComponentName(component,?componentFilePath)
????//組件名不存在打印錯(cuò)誤
????if?(!componentName)?{
??????console.error(`Component?${componentFilePath}?register?faild,?the?component?name?is?undefined`)
??????return
????}
????//?console.log(componentFilePath)
????//掛載vue上现柠，全局使用
????Vue.component(componentName,?component.default?||?component)
})
最終我們只需要在main.js中去引入這個(gè)文件即可
直接使用封裝好的組件：
需要注意的是我們所用的組件名字必須要和我們封裝組件的name一致：
最終展示效果：
