Vue自动注册统一前缀的自定义组件

在main.js中注册组件

// 注册命名以 DIY 开头的自定义组件
import diyComponents from '@/components'
Vue.use(diyComponents)

在components文件夹下添加index.js，核心代码如下：

// 注册命名以 DIY 开头的自定义组件
export default {
  install(Vue) {
    const componentsContext = require.context('@/components', true, /\.vue$/)
    componentsContext.keys().forEach(component => {
      const componentConfig = componentsContext(component).default
      if (componentConfig.name && componentConfig.name.indexOf('DIY') === 0) {
        Vue.component(componentConfig.name, componentConfig)
      }
    })
  },
}

在components文件夹下添加组件Wait

在components文件夹下添加文件夹Wait，然后添加Wait.js

//Wait.js
<template>
  <div class="development">
    <span>开发中，敬请期待</span>
  </div>
</template>

<script>
export default {
  name: 'DIYWait',
}
</script>

<style lang="less" scoped>
.development {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  // position: absolute;
  // top: 10%;
  span {
    color: #c2cee5;
    font-size: 12px;
  }
}
</style>

使用组件

使用时，<SFWait></SFWait>