Operation code for batch introduction of components of vue page

<template>
  <div>
    <template v-for="(item) in names">
      <component :is="item" :key="item" />
    </template>
  </div>
</template>
<script>
// It's feasibleimport path from 'path'

// (param1,param2,param3) param1:Path; param2: Whether to search for subfolders; param3: file type, can be regularconst files = ('@/components/Menu/Dialog', true, /\.vue$/)

const dialogs = {}
const names = []
// Component import().forEach((key) => {
   /**
     *
     * Get the vue file name
     * Method 1: Use regular expressions to match
     * (/^\.\/(.*)\.\w+$/, '$1')
     * Method 1: Get the vue file name
     * import path from 'path'
     * (path[, ext])
	 The * () method returns the last part of path.  The directory separator at the tail is ignored.
     **/
    
  // Get file name Method 1  // var name = fileName
  //  .split('/')
  //  .pop()
  //  .replace(/\.\w+$/, '');

  // Get file name Method 2  const name = (key, '.vue')
  
  (name)
  dialogs[name] = files(key).default || files(key)
})

export default {
  name: 'Dialogs',
  components: dialogs,
  data() {
    return {
      names: names
    }
  }
}
</script>

<style lang="scss" scoped />

(param1,param2,param3)

(path[, ext])

('/directory 1/directory 2/file.html');  // document.html

('/directory 1/directory 2/file.html', '.html');  // document