vue项目开发技巧(require.context)

最新推荐文章于 2024-04-08 14:13:27 发布

shy256

最新推荐文章于 2024-04-08 14:13:27 发布

阅读量587

点赞数 1

文章标签： vue.js javascript node.js

原文链接：https://www.jianshu.com/p/8b30fee8778b?from=singlemessage

版权

本文介绍了如何利用require.context在前端项目中实现动态引入文件，用于组件全局注册和路由模块化管理。通过require.context，可以在components文件夹下批量注册Vue组件，简化import操作。同时，它也被应用于路由管理，允许在routes文件夹下按模块组织路由文件，保持路由配置的清晰。在main.js中引入并注册相关脚本后，即可在整个项目中便捷地使用组件和路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

require.context

主要使用require.context实现前端工程化动他引入文件
require.context(directory, useSubdirectories = false, regExp = /^.//)
第一个参数目标文件夹
是否查找子集 true | false
正则匹配
比如：
require.context('./router',true,/\.routes\.js/
可以理解为获取router文件下以.routes.js结尾的文件，知道这个以后，就可以在项目动态引入文件，方便使用了

vue全局注册组件

在项目中，我们都会针对项目的功能，将项目中高频出现的部分写成组件方便调用，这个时候可以使用require.context完成组件注册，省去在每个页面进行import的工作
比如：我们把组件全部写在components文件夹下，然后创建componentRegister.js使用require.context进行组件注册

function changStr(str){
    return str.charAt(0).toUpperCase()+str.slice(1)  
}
export default {
    install(Vue) {
        const requireAll=require.context("./components",false,/\.vue$/)
        requireAll.keys().forEach((item)=>{
            Vue.component(changStr(item.replace(/\.\//,'').replace(/\.vue$/,'')),requireAll(item).default)
        })
    }
}

然后只要在main.js里引入这个js文件，然后vue.use()注册就可以在所有页面调用组件了
比如在components下创建了HelloWorld.vue组件，在页面中只需要<HelloWorld/>这样就可以使用了

vue路由模块化

同理，也可以解决另一个问题，在vue项目中，路由文件会随着项目增大而越来越大，这个这个我们可以使用require.context进行模块化管理，首页定义好主路由，router.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
const routerList = [];
function importAll(r) {
    r.keys().forEach((key) => {
        routerList.push(r(key).default);
    });
}
importAll(require.context("../routes", true, /\.routes\.js/));//这里的目录和规则可以看自己习惯，这里获取的是routes下以.routes.js结尾的文件
const routes = [
    ...routerList,
];

const router = new VueRouter({
    routes,
});

export default router;

这样就可以在routes下面按模块管理路由了，不管加入什么，只需要在routes下新建就可以了