Example of automatic import method of vue3.0 common components

1. Prerequisites

We use the require.context method to import. If we use it in a project created by vite, an error "require not found" will be reported, so we must use webpack to create a project. Or someone can tell me how Vite can solve this problem.

II. Rules

The registration rule I use is to search all directories and subdirectories under the src/components/ path, search for files named "index.vue", and use the name of the parent directory as the component name for registration. The structure is as follows:

Only index.vue is registered, components with other names are not registered.

3. Registration

Since vue3.0 does not have import "Vue" from vue, we need to use app to register, so we can only do it in main.js

Entry file registration

// src/main.js

import { createApp } from 'vue'
const app = createApp(App)
//Dynamically register public components const requireComponent = require.context(
    // The relative path of its component directory is '@/components',
    // Whether to query its subdirectory true,
    // Regular expression matching the base component file name /index.vue$/
)
const jieguo = requireComponent.keys().filter((item:any)=> true)
jieguo.forEach((item:any)=>{
    const componentConfig = requireComponent(item)
    const name = item.split("/")[1]
    app.component(name,componentConfig.default || componentConfig)
})
// Registration ends app.mount('#app')

When we create, delete, or rename a public component, no registration is required. Restart the project and take a sip of water.

Summarize

This is the end of this article about automatic import of vue3.0 public components. For more relevant vue3.0 public component import content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!