vue全局注册组件
随心记之 webpack自动注册全局组件
// 是否包含 '-'
function isContains(str, character = '-') {
return str.indexOf(character) != -1
}
// 首字符转大写
function firstToUpper(str) {
str = str.trim()
let fitstText = str[0].toUpperCase()
return str.replace(str[0], fitstText)
}
// 转驼峰写法
function toHump(componentName) {
let temp = componentName.split('-')
temp = temp.map((str) => {
return firstToUpper(str)
});
return temp.join('')
}
// 读取compoents 文件夹下所有的 .vue文件
const requireComponent = require.context('@/components', true,/.vue$/)
// get all compoent list
let compoents = requireComponent.keys()
export default {
install(Vue) {
try{
compoents.forEach(filename => {
//获取组件配置
const componentConfig = requireComponent(filename);
// 组件配置中是否配置了name
let componentName = (componentConfig.default || componentConfig).name
// 未配置name选项 根据文件名生成名称
if (!componentName) {
// 截取最后面的名字
componentName = filename.split('/')[filename.split('/').length - 1]
componentName = componentName.replace(/.vue$/, '')
// 包含 - 转成驼峰
if (isContains(componentName)) {
componentName = toHump(componentName)
}
} else if (isContains(componentName)) {
componentName = toHump(componentName)
}
// console.log(componentName)
//全局注册组件
Vue.component(componentName, componentConfig.default || componentConfig)
})
}catch(err){
console.log('注册全局组件出错')
}
}
}
