Vue全局注册组件

189 阅读1分钟

1、注册组件moudle.js:

function changeStr (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context(
  // 其组件目录的相对路径
  './packages/baseElements',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /\.vue$/
)

const install = (Vue) => {
  requireComponent.keys().forEach(filename => {
    // 获取组件配置
    const config = requireComponent(filename)
    const componentName = changeStr(
      filename.replace(/^\.\//, '').replace(/\.\w+$/, '')
    )
    // console.log("componentName",componentName)
    Vue.component(componentName, config.default || config)
  })
}
export default install

2、全局引入注册组件

import moudles from './moudle'
Vue.use(moudles)

参考: cn.vuejs.org/v2/guide/co…