原版本

目录结构

界面有独属于自己的组件，在界面目录下新建components文件封装组件，方便复用和更改

组件管理

在index.js中，对组件进行统一管理并暴露出来，让界面的vue文件可以引入组件

//省略其他组件export default代码
export {
    default as layerTree
}
from './layerTree'

界面引入

import { layerTree, numItem, slTable, areaInfoSwiper, colorLegend, animalDeta } from './components';
export default {
    //省略vue的data(),created()等部分 
    components: {
        layerTree, numItem, slTable, areaInfoSwiper, colorLegend, animalDeta
    }
}

这样我门的界面就可以使用这些子组件了。

问题分析

但是这样每新增一个组件，就要在index.js中新增一个组件并暴露出去。或者组件的vue名字变动了，index里变一遍，引用的地方所有关联地方都要变，就太噩梦了，所以想着可不可以自动化注册组件并且暴露出去，这样即使新增了组件，变动组件名，都只需要在html中更改子组件的名称即可，心智负担大大减少。

版本优化

index.js(better)

//省略其他组件export default代码
// export {
//     default as layerTree
// }
// from './layerTree'

const contexts = require.context('./', false, /\.vue$/)
const components = []
let removeList = [] //要排除某个文件
contexts.keys().forEach(key => {
    const name = key.replace(/(\.\/|\.vue)/g, '')
    removeList.includes(name) ? '' : components[name] = resolve => require([`${key}`], resolve)

})
//暴露出数组对象
export default components

界面引入(better)

import components from './components';
export default {
    //省略vue的data(),created()等部分 
    components: {
        //...扩列符将数组对象成员全部暴露出来
        ...components
    }
}

全局注册

附上全局注册版本

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

疑惑

其实关于局部的自动化注册，下面是另一个版本

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
    '.', false, /\.vue$/
    //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
        const componentConfig = requireComponent(fileName)
        const componentName = capitalizeFirstLetter(
            fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
        )
        //在遍历内部就将组件一个个暴露出来
        export {
            default as fileName
        }
        from componentConfig
    })

遍历keys 然后分别export出去

就会引发'import' and 'export' may only appear at the top level的错误，按照网上的解决方案，我新建了.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "browser": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ], //其他的设置都是自动的
    "rules": {
        //就是这一句，禁用import和require必须出现在顶层作用域的验证规则
        "global-require": 0 //这里应该0代表off之前写错了写成了false
    }
};

但是依旧报错，不清楚怎么解决，家人们知道怎么弄吗

思考

最终版本

index.js(final)

const contexts = require.context('./', false, /\.vue$/)
const components = []
let removeList = [] //要排除某个文件
contexts.keys().forEach(key => {
    const name = key.replace(/(\.\/|\.vue)/g, '')
    removeList.includes(name) ? '' : components[name] = resolve => require([`${key}`], resolve)

})
//由export default改为 export
export {
    components
}

界面引入(final)

import { components as biodiversity_components } from '../biodiversity/components';
export default {
    //省略vue的data(),created()等部分 
    components: {
        ...biodiversity_components
    },
}

所以我们使用export，从而在{}中对数组对象重命名

隐患

要是一个界面引入两个indexjs暴露出来的数组对象，并且分别对它们重命名之后，例如FirstComponents中有一个组件叫showModal，SecondComponents中有一个组件也叫showModal，这样后引入的组件就会把前面的组件冲掉，调用到的就是最后引入的showModal，那怎么办呢？这时候是要在indexjs里面分别暴露一次这个showModal子组件然后在引入的vue里面进行重名吗？还是说只需要一开始在命名这些子组件的时候就应该规避这种重命名现象吗？但好像这样太刻意，不够灵活了

尾声

一套操作下来，还是收获了很多的，希望以后能想出好的解决方案吧，也欢迎大家给点建议和指出错误

你来看，文章，我，觉得，很好，scar