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

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下新建就可以了

本文由博客群发一文多发等运营工具平台 OpenWrite 发布