官方方法

在此之前可以参考一下官方文档，参考完之后可以参考一下我稍作修改之后的方法

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

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
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
  )
})

我的方法

现在 @/components 目录下创建 index.js文件
然后在 main.js中使用 import "@/components" 引入
在 @/components/index.js 中写入以下代码

import Vue from "vue";
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";

const requireComponent = require.context(
    "../components", // 其组件目录的相对路径
    true, // 是否查询其子目录
    /\.vue$/ // 匹配vue后缀文件名的文件
); 
console.log(requireComponent.keys());
// 遍历获取到的文件名，依次进行全局注册
requireComponent.keys().forEach((fileName) => {
    // 获取组件配置(实例)
    const componentConfig = requireComponent(fileName); // 获取组件的 PascalCase 命名(eg: MYHeader)
    const componentName = upperFirst(
        // 获取驼峰式命名
        camelCase(
            // 剥去文件名开头的 `./` 和结尾的扩展名 eg: ./food-header.vue -> foodHeader
            fileName.replace(/^\.\/(.*)\.\w+$/, "$1")
        )
    ); // 全局注册组件
    Vue.component(
        componentName, // 如果这个组件选项是通过 `export default` 导出的， // 那么就会优先使用 `.default`， // 否则回退到使用模块的根。
        componentConfig.default || componentConfig
    );
});

操作完以上步骤之后，就可以在任意页面直接使用 @/components 文件中的组件了 :mrgreen:

建议单独设置一个文件夹存储全局组件，例如在 @/components 目录下新建一个 globalComponents 文件夹存储全局组件，然后将 @/components/index.js 中的组件目录相对路径修改为 ./components/globalComponents

文章目录