コンポーネントのグローバル自動登録を実装するための Vue2 および Vue3 の詳細な手順

Vue プロジェクトの開発において、頻繁に登録されるコンポーネントは、それがパブリック コンポーネントであろうと基本コンポーネントであろうと、他のコンポーネントで使用したい場合、コンポーネント内でインポートによって頻繁に参照される必要があります.コンポーネントのグローバルな自動化を実現する方法はありますか? ?登録?
答え: はい

1. 関連する知識ポイント

知識ポイント: require.context、forEach、replace

2.実装方法（main.js）

具体的な実装方法は、Vue公式サイトのコンポーネント登録の実装方法を参考に、改善修正2回目を行ってください。

1、ビュー 2：

//全局自动注册组件
const requireComponent = require.context(
  '@/components/',
  true,
  /.vue/
);
requireComponent.keys().forEach(fileName => {
    
    
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.replace(/(\.\/|\.vue)/g, '').replace(new RegExp('/','g'),"");
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
  console.log('全局注册组件',componentName)
});

2、ビュー 3：

//全局自动注册组件
const requireComponent = require.context(
    '@/',
    true,
    /.vue/
);
const app = createApp(App)
requireComponent.keys().forEach(fileName => {
    
    
    const componentConfig = requireComponent(fileName);
    const componentName = fileName.replace(/(\.\/|\.vue)/g, '').replace(new RegExp('/', 'g'), "");
    // 全局注册组件
    app.component(
        componentName,
        // 如果这个组件选项是通过 `export default` 导出的，
        // 那么就会优先使用 `.default`，否则回退到使用模块的根。
        componentConfig.default || componentConfig
    );
    console.log('全局注册组件', componentName)
});

文章が良いと思われる場合は、コメントやディスカッションを歓迎します. この記事はオリジナルです. 転載する必要がある場合は、ソースを示してください;