模块系统（待更新）

如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件（比如 src/main.js） 中全局导入基础组件的示例代码：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirsh'
import camelCase from ‘lodash/camelCase’

const requireComponent = require.context(
	// 其组件目录的相对路径
	‘./components’，
	// 是否查询器子目录
	false,
	// 匹配基础组件文件名的正则表达式
	/Base[A-Z]\w+\.(vue|js)$/,
);

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,
	)
});

全局注册的行为必须在根 Vue 实例（通过 new Vue）创建之前发生。

来源：CSDN

作者：mjzy

链接：https://blog.csdn.net/weixin_42287935/article/details/103805093