vue-cli 项目中使用 webpack 的 require.context 实现全局引入组件

• 文章内重点在于 require.context 的使用 具体可查看 webpack官网

• vue-cli 工程建的项目 components/index.js

/**
 *  创建一个引入文件上下文
 * 不懂上下文的 参考语文对于上下文的理解 及 context 的英语翻译
 * require.context 的参数说明可查看 webpack 文档 或百度 高频组件引入
 */
const componentsContext = require.context("./", false, /\.vue/);

const install = app => { // Vue 编写插件 如需了解 可前往 vue 官网
    componentsContext.keys().forEach( path => { // keys 函数拿到目录下符合正则规则的所有文件 返回一个路径数组
        const componentName = path.split('/')[1].replace('.vue' , ''); // 将文件名截取下来作为组件名
        const component = componentsContext(path); // 创建组件 context
        app.component(componentName , component); // 全局注册组件 （不推荐大量全局注册组件，此套方法同样可用于 其它文件的引入 css js. etc）
    })
}

export default { // 到处 install 函数 install 命名是关键 （如需了解 : you can go to Vue Official Website）
    install,
}

• main.js (使用Vue3)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import frequentlyComponents from './components'


const app = createApp(App); // vue3 变动通过 createApp 函数生成 Vue 实例
app.use(frequentlyComponents); // 将插件 | 组件添加到 Vue 实例
app.use(store).use(router).mount('#app')

• 到此 就可以在 .vue 文件内 直接使用全局引入的组件 无需 import 导入