1. Add the global.js file to the global component components folder. The global component configuration file is as follows:
important Vue from 'vue'
functionChangeStr (STR) {//charAt removes the first self-check ABC of the character => ABCreturnStr.charat (0).toupperCase () + str.slice(1)} //require.context(a,b,c) a => directory b => Whether there are subdirectories c => regular const matching files requireComponent = require.context('. '.false. /\.vue$/) requireComponent.keys().foreach (fillName => {// the i-th const config = requireComponent(fillName) const componentName = changeStr( fillName.replace(/^\.\//,' ').replace(/\.\w+$/,' ')
)
Vue.component(componentName, config.default || config)
})Copy the code
Once this file is created, global components can be written directly in the components file. Since the second parameter in require.context() is false, all components need to be stored directly in the Components file as vue files
2. Import global.js globally in main.js
Note: Registering global components will cause performance loss, so you need to clear the usage scenarios of this method. This method is suitable for use only when components are frequently used, such as some forms, pop-up boxes, prompt boxes, input boxes, and other components