vue中全局引入"base-name.vue" 按需引入".vue"（自定义的组件）

vue的组件均放在 src/components 文件内

1、全局引入（自定义的组件 base-name.vue  使用时<base-name></base-name>即可）

自动引入以base-name.vue格式的所有组件（name为自定义的组件名）

首先下载lodash即   npm install lodash

然后在main.js中输入

import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'   //引入工具

const requireComponent = require.context(
  './components',
  false,
  /base-\w+\.vue$/
);
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = upperFirst(
    camelCase(
      fileName
        .replace(/^\.\//, '')
        .replace(/\.vue$/, '')
    )
  )
  Vue.component(componentName, componentConfig.default || componentConfig)
})

即可在所有组件以<base-name></base-name>的形式使用

2、按需引入（例如：在App.vue中引入其他在组件）

组件仍放在components文件夹下（foot.vue与login.vue）

<template>
  <div id="app">
    <login @login-show="login"></login>//@login-show 为子组件与父组件间的事件通讯，可以忽略
    <foot></foot> //组件的使用
  </div>
</template>

<script>
import foot from '@/components/foot';
import login from '@/components/login';//引入组件

  export default {
  name: 'App',
  data () {
    return {
      show:''
    }
   },
  methods:{
    login:function (data) {
      this.show=data
    }

  },
  components:{                //引入组件名
    foot,
    login               
  },
}
</script>