在Vue项目中自定义全局组件

1、首先编写自定义的组件，这里以之前的计数器组件为例
《自定义计数器组件le-input-number》
2、组件目录展示

3、在main.js中全局注册组件
1）单个组件注册

import LeInputNumber from './components/pc/LeInputNumber.vue'; // 引入计数器组件
Vue.component('LeInputNumber ', LeInputNumber ); //注册组件为全局组件

2)批量注册

// 注册通用组件
const requireComponent = require.context(
  './components',
  true,
  /\.vue$/
);
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.substring(fileName.lastIndexOf('/') + 1, fileName.lastIndexOf('.'));
  Vue.component(
    componentName,
    componentConfig.default || componentConfig
  );
});

4、使用直接使用

<div class="number-box">
     <le-input-number 
        @change="changeQuantity($event, good)" 
        :value="good.quantity">
     </le-input-number>
</div>