关于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>