vue如何实现整体注册组件局部/局部注册组件

在前端开发中,经常需要将业务进行组件化,我们就需要去注册组件

1.vue如何实现整体注册组件 (快速导入)

**搭配webpack来批量注册组件 **

 + require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API
参数1:加载的文件目录
参数2:是否加载子目录
参数3:：正则，匹配文件
requireComponent:返回值：导入函数 fn
keys() 获取读取到的所有文件列表
1
2
3
4
5
6

新建src/components/index.js

import Vue from "vue";
//  使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 需要注意的是每一个组件的name都必须有 否则就会出现组件注册不了的情况 )
const requireComponent = require.context("./", true, /\.vue$/);
console.log(requireComponent.keys(), 3344222);
requireComponent.keys().forEach((item) => {
  // console.log(requireComponent(item), 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
  /* 获取的是 每一个组件暴露出来的对象 */
  const defaultObj = requireComponent(item).default;
  Vue.component(defaultObj.name, defaultObj);
});

1
2
3
4
5
6
7
8
9
10
11

引入main.js

1.import "./components/index.js";
1

或者2.import pluginComponent from '@/components/index.js'
Vue.use(pluginComponent)
1
2

2.vue如何实现整体注册组件(快速导入加手动)

1. 其中components也封装了公共其他组件引入 src/components/index.js 中

使用Vue.use()来注册组件 实现的原理： 1-需要传入一个参数：对象||函数 2-对象中提供了一个install函数 3-install函数有一个参数接受的是Vue

// 组件复用
// 该文件负责所有的公共组件的全局注册
import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
import ImagUpload from './ImageUpload'

// 导出
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
    Vue.component('UploadExcel', UploadExcel)
    Vue.component('ImagUpload', ImagUpload)// 图片组件
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.全局入口在main.js, 在new Vue之上注册引入,将要注册的组件进行引入

import Vue from 'vue'
import UploadExcel from '@/components/index.js'
const app = Vue(App)
app.use(UploadExcel).use(store).use(router).mount('#app')
1
2
3
4

// 注册全局组件
import component from '@/components'
Vue.use(component)
1
2
3

3.直接用

<UploadExcel>内容</UploadExcel>   或者 <upload-excel> 内容 </upload-excel>**
1

2.局部注册组价 src//components/index.js(一般)

在components写导入到需要的文件里面

.在script标签中进行注册,注意:组件注册的名字和引入的名字需要保持一致即可进行简写.在template标签中以html的标签格式进行使用

 **import  UploadExcel from 'vue'
 import UploadExcelfrom '@/components/index.js'
 <UploadExcel>内容</UploadExcel>   或者 <upload-excel> 内容 </upload-excel>**
1
2
3

附录参考(弱水三千只取一瓢饮)

手动注册组件
src/components/index.js

import Skeleton from './Skeleton'
 import XtxCarousel from './library/xtx-carousel.vue'
 export default {
   install (Vue) {
     Vue.component(Skeleton.name, Skeleton)
     Vue.component(XtxCarousel.name, XtxCarousel)
   }
 }
main.js

import { createApp } from 'vue'
import componentPlugin from '@/components/index.js'
const app = createApp(App)
app.use(componentPlugin).use(store).use(router).mount('#app')
批量注册组件
src/components/index.js

const requireComponent = require.context('./', true, /\.vue$/)
console.log(requireComponent.keys(), 3344222)

export default {
  install (Vue) {
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
      /* 获取的是 每一个组件暴露出来的对象 */
      const defaultObj = requireComponent(item).default
      Vue.component(defaultObj.name, defaultObj)
    })
  }
}

 + require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API
参数1:加载的文件目录
参数2:是否加载子目录
参数3:：正则，匹配文件
requireComponent:返回值：导入函数 fn
keys() 获取读取到的所有文件列表
main.js

import { createApp } from 'vue'
import componentPlugin from '@/components/index.js'
const app = createApp(App)
app.use(componentPlugin).use(store).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46