require.context()实现全局组件注册/路由工程(动态)化

注册全局组件

1. main.js中

// 注册全局组件
import allComponent from './路径' //引入js文件路径
Vue.use(allComponent )

2. js文件中
语法： require.context( directory, (useSubdirectories = true), (regExp = /^\.\/.*$/), (mode = 'sync'));

• directory：要搜索的文件夹目录
• useSubdirectories：是否还应该搜索它的子目录
• regExp：一个匹配文件的正则表达式
• mode：是否异步加载

/* 注册全局组件 */
export default {
   install(Vue) {
      /*
       注册全局组件
       Vue.component('name',{
         data(){ return{} },
         methods:{}
       })
       在这里可以allComponent(item).default来实现第二个参数函数
       */
      // 创建出一个context，来自`./`父目录 不需要搜索子目录，以`.vue`结尾
      let allComponent = require.context('./', false, /\.vue$/)
      console.log(allComponent.keys)
      allComponent.keys().forEach(item => {
         console.log(allComponent(item).default)
         Vue.component(item.replace(/\.\//, '').replace(/\.vue$/, ''), allComponent(item).default)
      })
   }
}

vue实现 路由工程(动态)化

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 路由工程(动态)化
let routerList = [];
(r => r.keys().forEach(item => routerList.push(...r(item).default)))(require.context('./', true, /\.sign\.js/)); //.sign\.js结尾

export default new VueRouter({
  mode: 'history',
  routes: [
     {
        path: '/',
        name: 'defaultRouter',
        redirect: { name: 'login' },
     }, {
        path: '/login',
        name: 'login',
        meta: { token: false },
        component: () => import('@/views/login/login'),
     },  {
        path: '/home',
        name: 'home',
        meta: { token: false },
        component: () => import('@/views/home'),
        children: [
           ...routerList
        ]
     }
  ]
})

待续。。。