Vue3组件的全局注册

单个注册

在components文件夹下新建index.js

component/index.js

// 导入需要注册的两个组件分别为HelloWorld.vue和one.vue
import HelloWorld from "./HelloWorld.vue";
import one from "./one.vue";

export default function install(app){
    app.component('HelloWorld',HelloWorld),
    app.component('One-name',one)
}

在main.js中注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import components from '@/components/index' //导入
createApp(App).use(store).use(components).use(router).mount('#app') //注册

自动注册全局组件

利用require.contextwebpack语法
// require.context(directory,useSubdirectories,regExp)
// directory:表示检索的目录
// useSubdirectories：表示是否检索子文件夹
// regExp:匹配文件的正则表达式,一般是文件名
// 例如 require.context("@/views/components",false,/.vue$/)

const req = require.context('./', true, /\.vue$/);
const requireAll = context => context.keys().map(context);
export default function install(app) {
requireAll(req).forEach(({ default: item }) => {
    app.component(item.name,item)
  });
}

 在main.js中和单个组件注册操作相同

第二种写法

const req = require,context('./',true,/\.vue$/)

    export default {
        install(Vue){
            req.keys().forEach(()=>{
                const defaultObj = req(item).default
                Vue.component(defaultObj.name,defaultObj)
            })
        }
    }