本文共 1461 字，大约阅读时间需要 4 分钟。

components下存在多个公共组件

组件一名称penplePick：

只需在components下建立一个autoRegister.js：

/** * 全局组件自动注册 * * 全局组件各个组件按文件夹区分，文件夹名称与组件名无关联，但建议与组件名保持一致 * 文件夹内至少保留一个文件名为 index 的组件入口，例如 index.vue * 普通组件必须设置 name 并保证其唯一，自动注册会将组件的 name 设为组件名，可参考 SvgIcon 组件写法 * 如果组件是通过 js 进行调用，则确保组件入口文件为 index.js，可参考 ExampleNotice 组件 */import Vue from 'vue'const componentsContext = require.context('./', true, /index.(vue|js)$/)componentsContext.keys().forEach(file_name => {    // 获取文件中的 default 模块    const componentConfig = componentsContext(file_name).default    if ((/.vue$/).test(file_name)) {        Vue.component(componentConfig.name, componentConfig)    } else {        Vue.use(componentConfig)    }})

然后在main.js入口文件中进行import './components/autoRegister' 即可

import Vue from 'vue'import App from './App.vue'import router from './router/index'import store from './store/index'import './plugins' // 第三方插件注册import './directive' // 全局指令注册import './components/autoRegister' // 全局组件注册import '@/assets/icons/icon.js' // 自动加载 svg 图标import '@/styles/index.scss' // global cssVue.config.productionTip = falsenew Vue({    router,    store,    render: h => h(App)}).$mount('#app')

在组件或页面中就可以直接调用，无需import，调用方式跟普通组件一样

转载地址：http://ebdwb.baihongyu.com/