Vue中使用require.context()自动引入组件和自动生成路由的方法介绍

简介: Vue中使用require.context()自动引入组件和自动生成路由的方法介绍

一、自动引入组件

我们项目开发中,经常需要import或者export各种模块,那么有没有什么办法可以简化这种引入或者导出操作呢?答案是肯定的,下面就为大家介绍一下require.context


require.context 是 webpack 提供的一个 API,用于创建 context,即一组具有相同上下文的模块。


使用 require.context 可以方便地加载多个模块,并且可以灵活地控制模块的加载顺序和依赖关系

以前我们都是通过import 方式引入组件

import A from 'components/A'
import B from 'components/B'
import C from 'components/C'
import D from 'components/D'

这样很蛋疼,因为每加一个组件,可能都要写这么一句,这样有规律的事,是否可以通过自动化完成?


require.context (需要vue-cli3+的版本)


1、语法
require.context(directory, useSubdirectories, regExp)
  1. directory: 要查找的文件路径
  2. useSubdirectories: 是否查找子目录
  3. regExp: 要匹配文件的正则
2、使用
2.1、在compoents文件下随便创建index.js文件
const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {
    if (install.installed) return
    install.installed
    requireComponent.keys().forEach(element => {
        const config = requireComponent(element)
        if (config && config.default.name) {
            const componentName = config.default.name
            Vue.component(componentName, config.default || config)
        }
    });
}
 
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
 
export default {
    install
}
2.2、mian.js引入该js
import install from './compoents'
Vue.use(install)

3.3、这样在其他页面使用组件的时候,就不用再引用和注册了。直接使用就可以了。

比如直接这样使用就可以了,不用在import引入,不用components注册了。

<template>
  <HelloWorld></HelloWorld>
</template>


二、自动生成路由

实际开发中增加一个新的页面可能就要重新编写路由的问题,导致路由文件每次都要重新编辑,页面较多,修改起来较为复杂。

那么有没有什么办法可以简化这种引入或者导出操作呢?答案是肯定的,下面就为大家介绍一下require.context

以前我们都是通过import 方式引入路由

import HomeView from '../views/HomeView.vue'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]
1、示例:
require.context('./test', false, /\.test\.js$/);
//(创建出)一个 context,其中文件来自 test 目录,request 以 `.test.js` 结尾。
2、使用
2.1、在router文件下随便创建autoRouter.js文件
let routerArr = []
 
//查找views目录,以.vue结尾的文件,查找子目录
const contexts = require.context('../views/', true, /\.vue$/)
 
contexts.keys().forEach(value => {
  const path = value.substr(value.indexOf('/'), value.lastIndexOf('.') - 1)
  const componentLocation = value.substr(value.indexOf('.') + 1, value.lastIndexOf('.') - 1)
  const componentName = componentLocation.substr(componentLocation.lastIndexOf('/') + 1)
  //添加到路由数组中
  routerArr.push({
    path: path,
    name: componentName,
    component: () => import(`@/views${componentLocation}`)
  })
})
 
export default routerArr
2.2、在router文件下index.js文件中引入autoRouter.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
 
//引入刚刚写的autoRouter.js文件
import routerArr from './autoRouter.js'
 
Vue.use(VueRouter)
const routes = [
 //这里是其他手动写的路由
]
 
const router = new VueRouter({
  mode: 'history',
  //这里进行路由合并
  routes:[...routes,...routerArr]
})
 
export default router

完成了,后面在views里面新建页面,就不要手动写路由了。


三、总结

我们可以通过require.context可以自动化引入文件。

其实我们不单单局限于组件,路由内, 所有模块文件都是通用的, 例如路由, 接口封装模块,都是可以使用的。

目录
相关文章
|
15天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
32 1
vue学习第四章
|
15天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
27 1
vue学习第九章(v-model)
|
15天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
30 1
vue学习第十章(组件开发)
|
8天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
21 8
|
8天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
20天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
27 3
|
JavaScript Go
|
JavaScript C语言 Go
|
20天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
21天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。