Vite / Webpack 批量注册组件

Vue项目 => Vite / Webpack 批量注册组件

Vue2全局自定义注册组件

main.js定义

缺点：如果我们需要注册的全局组件非常多，那么需要一个一个引入，然后分别调用Vue.componet方法，main.js文件会变得很大很臃肿，不好维护，所以当需要注册的全局组件非常多的时候可以采用插件的形式注册

import Vue from 'vue'
//引入组件，import后的组件名字只要符合语法即可，一般都是驼峰法
import FixedTop from '要注册的vue组件.vue'
//注册为全局组件  Vue.component('组件名', 组件模板)
Vue.componet('FixedTop',FixedTop)

页面使用

<template>
	<FixedTop />
</template>

Vue2全局插件式注册组件

扩展：当项目组件较多时，区分开业务型组件和非业务型组件，便易于维护

main.js引入

 import Vue from 'vue'
//在 main.js 文件注册插件入口，import后的组件名字只要符合语法即可，一般都是驼峰法
import Components form '自定义的js'
Vue.use(Components)

自定义js

 import Vue from 'vue'
//引入组件，import后的组件名字只要符合语法即可，一般都是驼峰法
import FixedTop from '要注册的vue组件1.vue'
import FixedBottom from '要注册的vue组件2.vue'
export default {
  install(Vue){
    //注册全局组件
    Vue.componet('FixedTop',FixedTop)
    Vue.componet('FixedBottom ',FixedBottom )
}

页面使用

<template>
	<FixedTop />
	<FixedBottom />
</template>

Vue2全局插件式批量注册组件

main.js引入

 import Vue from 'vue'
//在 main.js 文件注册插件入口 ，import后的组件名字只要符合语法即可，一般都是驼峰法
import Components form '自定义的js'
Vue.use(Components)

自定义js

import Vue from 'vue'
export default {
  install(Vue, options) {
    // 1.读取lib文件夹下的文件
    // const req = requeire.context('路径', 是否读取子文件夹, /正则匹配/)
    const req = require.context('./', false, /\.vue$/)
    // req是一个function函数（传入读取文件路径后可导入文件）
    req.keys().forEach((item) => {
      console.log(req(item).default)
      // req(item).default==导入了该文件路径
      const com = req(item).default
      // 全局注册
      Vue.component(com.name, com)
    })
}

页面使用

<template>
	<FixedTop />
	<FixedBottom />
</template>

Vue2局部自定义组件

<template>
	<BaseInput></BaseInput>
	<base-input></base-input>
	<BaseIcon ></BaseIcon>
	<BaseButton></BaseButton>
</template>
<script>
    //import后的组件名字只要符合语法即可，一般都是驼峰法
	import BaseButton from '要注册的vue组件.vue';
	import BaseInput from '要注册的vue组件.vue';
	import BaseIcon from '要注册的vue组件.vue';
	import BaseButton from '要注册的vue组件.vue';

	export default {
    	components: {
       		BaseButton,
        	BaseInput,
        	BaseIcon,
        	BaseButton
    	}
	}
</script>

Vue3全局自定义注册组件

import { createApp} from 'vue'
//引入
//import后的组件名字只要符合语法即可，一般都是驼峰法
import Card from '要注册的vue组件.vue'
//注册
createApp(App).component('Card',Card).mount('#app')

页面使用

<template>
 	<Card></Card>
</template>

Vue3全局自定义插件式批量注册组件

自定义的js

//名称只要符合语法即可,path/*.vue中的path为相对路径，路径自定义即可，即为存在需要批量注册的组件
import { defineAsyncComponent } from "vue";
const components = import.meta.glob("path/*.vue"); // 异步方式
export default function install(app): void {
  for (const [key, value] of Object.entries(components)) {
    let name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
	//名称为驼峰法，不是驼峰的的第一个字母会被截取
    name = name.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1);	
    app.component(name, defineAsyncComponent(value));
  }
}

main.js

import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'
import componentRegister from "自定义的js路径";
//全局注册
createApp(App)
    .use(componentRegister)
    .mount("#app");

在页面使用

<template>
  <div>
    <comm-report></comm-report>
    <comm-table></comm-table>
    <comm-table2></comm-table2>
    <menu-tree></menu-tree>
  </div>
</template>

Vue3全局自定义批量注册组件

main.js

import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'

let app=createApp(App)

//名称只要符合语法即可,其中path/*.vue中的path为相对路径，路径自定义即可，即为存在需要批量注册的组件
const components = import.meta.glob("path/*.vue"); // 异步方式
  for (const [key, value] of Object.entries(components)) {
    let name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
	//名称为驼峰法，不是驼峰的的第一个字母会被截取
    name = name.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1);	
    app.component(name, defineAsyncComponent(value));
  }

app.mount("#app");

在页面使用

<template>
  <div>
    <comm-report></comm-report>
    <comm-table></comm-table>
    <comm-table2></comm-table2>
    <menu-tree></menu-tree>
  </div>
</template>

Vue3局部自定义注册组件

<template>
    <FormTemplate></FormTemplate>
	<form-template></form-template>
</template>
<script setup lang="js">
	//按相对路径引入组价，setup语法中直接引入即可，不用注册
    //import后的组件名字只要符合语法即可，一般都是驼峰法
	import FormTemplate from "要注册的vue组件.vue"
</script>