uniapp全局自动引入动态加载组件

1.创建components文件夹，右键新建组件，不选择创建同名目录

---

创建自己需要的组件，然后再建个index.js文件

2.require.context()工程化引入文件

require.context(directory, useSubdirectories, regExp, mode = 'sync')

• directory:表示检索的目录
• useSubdirectories：表示是否检索子文件夹
• regExp:匹配文件的正则表达式,一般是文件名
• mode:加载模式，同步/异步

 

// 检索当前文件夹conponents的最近子级文件后缀名为.vue的文件，得到的这个com类似对象的数据
const com = require.context('./', false, /\.vue$/)
export default {
  // 注册一个方法，此vue为install的第一个参数，还有参数options这里不需要
  install(Vue) {
    // com.keys()遍历对象，返回com每一个属性名组成的数组
    com.keys().forEach(item => {
      // 在这遍历过程中，每一次通过属性名指向com中的每一个属性值，然后给到Vue.conponent
      const comItem = com(item).default
      Vue.component(comItem.name, comItem)
    })
  }
}

3.main.js中引入components文件的js文件

import coms from '@/components/index.js'
//Vue.use()主要是调用插件内部的install方法，并将Vue实例作为参数传入
Vue.use(coms)

4. 使用组件

<template>
	<component :is="navigation"></component>
</template>

忘了设置组件命了，就是item，通过截取文件名，然后设置