vue全局公共组件自动引入并注册,开发效率直接起飞!

简介: 【8月更文挑战第17天】vue全局公共组件自动引入并注册,开发效率直接起飞!

组件自动引入并全局注册场景

在一个大型项目的开发中,我们一定会有很多全局公用的公共组件,并且随着项目的深入,组件会越来越多。

比如,我们在src\components\common文件夹用于存放公共组件,这些组件是需要全局注册使用的。
一开始,我们可能只有 Bread.vue(面包屑)组件和bannner(轮播图)组件
我们需要全局注册使用

// component/index.js
import {
   Bread,banner} from '../components/common'
export default (Vue) => {
   
     Vue.component('Bread', Bread)
     Vue.component('banner', banner)
}

然后,在main.js中使用

// 导入一个函数
import component from './components/index.js'
// 使用该函数,使里面全局挂载的组件生效
Vue.use(component)

组件很少的时候,一个个全局注册也不麻烦,但是,如果我们组件越来越多,我们每写一个组件,就要额外引入注册一次,非常麻烦!

// component/index.js
import {
   Bread,banner,Title,Card,Pic,Popver,Hover,Test} from '../components/common'
export default (Vue) => {
   
     Vue.component('Bread', Bread)
     Vue.component('banner', banner)
     Vue.component('Title',Title)
     Vue.component('Card', Card)
     Vue.component('Pic', Pic)
     Vue.component('Popver', Popver)
     Vue.component('Hover', Hover)
     // .... 
}

这样写太愚蠢了!有什么办法自动引入并注册吗?当然有!

vue-cli脚手架下的组件自动引入注册

vue-cli底层是基于webapck的,因此,我们实际上是借助webapck实现组件的全局注册引入的!

代码实现

假设我们的components/common下有非常多的组价,借助webapck实现这个功能,我们只需要这么写

// component/index.js

// 使用webpack语法自动导入全部自定义的公共组件
const comments = require.context('../components/common', true, /.(vue)$/)

export default (Vue: any) => {
   
  //自动化全局注册自定义的公共组件
  comments.keys().forEach((fileName: any) => {
   
    Vue.component(fileName.match(/^.\/(.*).vue$/)[1], comments(fileName).default)
  })
}

是不是非常简单!那么这个require.context是干什么的?

require.context

require.context是webpack自动化导入多个模块的一个工具。
基础用法

require.context(directory, useSubdirectories, regExp)

属性名 含义
directory 要查找的文件路径
useSubdirectories 是否查找子目录
regExp 要匹配文件的正则
const comments = require.context('../components/common', true, /.(vue)$/)

这句代码的意思就是从../components/common文件夹进行子集目录遍历,查找所有的.vue结尾的文件。
comments返回的是一个函数,comments.keys()返回的是一个包含文件名的数组本示例中返回的数组是

consol.log(comments.keys()) //   [Bread.vue,banner.vue,...]
 comments.keys().forEach((fileName: any) => {
   
    console.log(comments)
    Vue.component(fileName.match(/^.\/(.*).vue$/)[1], comments(fileName).default)
  })

这句代码也很好理解,遍历comments.keys()这个数组,使用 Vue.component()方法全局注册所有的组件。
每个 Vue.component()方法内,用数组中每一个文件的名字作为组件名(去掉.vue后缀),然后传入组件的配置对象。

comments(fileName).default返回的是每一个组件的配置对象

其他写法

import Vue from 'vue';

// 使用require.context自动引入所有的组件
const requireComponent = require.context(
  // 组件目录的相对路径
  './components',
  // 是否查询子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /[A-Z]\w+\.(vue|js)$/
);

requireComponent.keys().forEach(fileName => {
   
  // 获取组件配置
  const componentConfig = requireComponent(fileName);

  // 获取组件的 PascalCase 命名
  const componentName = fileName
    .split('/')
    .pop()
    .replace(/\.\w+$/, '');

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的,
    // 那么就会优先使用 `.default`,
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
});

vite中组件的自动引入与注册

在使用 Vite 构建 Vue 项目时,我们可以通过 import.meta.glob 方法来批量引入和注册组件。import.meta.glob 是 Vite 提供的一个功能,类似于 Webpack 的 require.context。

代码实现

创建自动引入和全局注册脚本
在 src 目录下创建一个文件,例如 globalComponents.js,用于自动引入和全局注册组件:
src/globalComponents.js:

import {
    defineAsyncComponent } from 'vue';

export default function registerGlobalComponents(app) {
   
  const components = import.meta.glob('./components/*.vue');

  for (const path in components) {
   
    const componentName = path.split('/').pop().replace(/\.\w+$/, '');
    app.component(componentName, defineAsyncComponent(components[path]));
  }
}

在 main.js 中引入并使用
在 src/main.js 中引入并使用这个自动注册脚本:
src/main.js:

import { createApp } from 'vue';
import App from './App.vue';
import registerGlobalComponents from './globalComponents';

const app = createApp(App);

registerGlobalComponents(app);

app.mount('#app');

import.meta.glob

import.meta.glob 参数

  • pattern:字符串或字符串数组,表示匹配文件的路径模式。可以使用通配符 *。
  • options:一个对象,可以包含以下属性:

    • eager:布尔值,如果为 true,将立即加载模块,而不是返回一个导入函数。
    • import:函数,用于自定义导入。
    • expose:数组,指定哪些命名导出应该被暴露。
    • ignore:字符串或字符串数组,表示要忽略的文件模式。

      const components = import.meta.glob('./components/*.vue', {
              eager: true });
      
      console.log(components);
      /* 输出类似于:
      {
       './components/Bread.vue': Module,
       './components/Banner.vue': Module
      }
      */
      

      总结

      在大型的前端项目中,手动引入和全局注册公共组件既繁琐又易出错。我们可以通过Webpack的require.context或Vite的import.meta.glob,可以自动引入并全局注册组件。require.context适用于基于Webpack的项目,而import.meta.glob适用于Vite构建的项目,这两种方法都大大简化了组件管理,提高了开发效率。

相关文章
|
6天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
5天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
5天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
11 2
|
5天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
7天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
9天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
7天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
27 9
|
6天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
10天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
18 6