vue自动注册路由和自动全局注册组件

vue的自动路由和自动全局注册组件都是靠require.context()方法遍历某个文件夹获取文件路径为基础的

检索指定文件夹下的文件 （ require.context(directory, useSubdirectories, regExp) ）

• directory{String} -读取文件的路径
• useSubdirectories{Boolean} -是否遍历文件的子目录
• regExp{RegExp} -匹配文件的正则

自动注册路由

简单的代码，这里只是简单逻辑，复杂的逻辑需要自己修改

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

Vue.use(VueRouter);

const routes = []; // 路由配置表

require
  .context("../views", true, /\.vue$/) 
  .keys()
  .map((item) => {
    
    
    let path = item.slice(1).replace(".vue", "").toLowerCase();
    routes.push({
    
    
      path,
      name: path.slice(1),
      component: () => import(`../views${
      
      item.slice(1)}`),
    });
  });

const router = new VueRouter({
    
    
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

自动全局注册组件

在components文件夹下新建index.js文件

import Vue from 'vue'
// require.context 是webpack的一个api
const req = require.context('./', true, /\.vue$/)
// 全局注册
req.keys().forEach((element,index) => {
    
    
  let name = element.replace(/(\.\/)|(\.vue)/ig, '')
  Vue.component(`${
      
      name.split('/')[name.split('/').length - 1]}`, req(element).default)
})

在main.js文件下引用

import './components/index' // 自动注册全局项目组件