关于vue.js: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>