import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径
'./',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/\.vue$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
或者
import Vue from 'vue'
// 动态引入component,默认引入所有components
// 组件名第一个字母为大写字母
const components = {}
// 路径解析
const analysis = (resolve) => {
resolve.keys().forEach((key) => {
let k = key.substring(2, key.length - 4)
let fk = []
fk = k.split('/')
k = fk[fk.length - 1]
components[k] = resolve(key)
})
}
analysis(require.context('@/components/', true, /\.vue$/))
for (const key in components) {
if (components.hasOwnProperty(key)) {
let name = ''
name = key.substring(0, 1)
name = name.toLocaleUpperCase()
name += key.substring(1)
Vue.component(name, components[key].default)
}
}