Vue使用require.context()实现组件和路由导入小

组件

很多时候我们组件都是这样引入的：

微信截图_20200420165243.png

当组件重复使用次数较多时，每个页面都需要这样引入一遍，就比较冗余，此时可以使用require.context()来全局注册，这样就不用每个页面都引入一遍了。
附上代码：

function changeStr(str){
  return str.charAt(0).toUpperCase() + str.slice(1);
}
//第一个参数的当前目录，第二个参数是否匹配子目录，第三次参数正则匹配.vue结尾的文件
const requireComponent = require.context('./', false, /\.vue$/) 
console.log(requireComponent.keys())
const install = (Vue) =>{
  requireComponent.keys().forEach(fileName => {
    let config = requireComponent(fileName);
    let componentName = changeStr(
      fileName.replace(/^\.\//,'').replace(/\.\w+$/,'') //获取到的是./button.vue 此步去掉前面的额./和后面的.vue 只保留button当组件名称
    )
    console.log(componentName)
    Vue.component(componentName, config.default || config)
  });
}
export default{
  install
}

通用组件目录如下：

微信截图_20200420173422.png

然后在main.js里引用一下即可，此时就不用进行繁琐的组件导入声明了，直接可以调用组件如下：

<template>
  <div>
    <Child1></Child1>
    <Child2></Child2>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },

  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {},
}
</script>
<style lang='stylus' scoped>
</style>

路由

路由同理，正式开发项目中不应该把所有路由放在一个文件里，不好维护，而是应该把路由按照模块划分，同时用上require.context()一劳永逸，只需要操作模块路由文件就可以了。
demo目录划分如下：

微信截图_20200421101951.png

index.js文件代码如下：

/*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-28 14:54:47
 * @LastEditTime: 2020-04-21 10:17:12
 * @LastEditors: Wangjianan
 */
import Vue from 'vue'
import Router from 'vue-router'
import login from '../views/login.vue'
Vue.use(Router)

const routerList = []
function importAll(r){
  r.keys().forEach(
    (key) => routerList.push(r(key).default)
  )
}
importAll(require.context('./',true,/\.router\.js/)); //匹配当前目录下的.router.js结尾的文件
console.log(routerList)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    },
    {
      path: '/main',
      name: 'main',
      component: () => import(/* webpackChunkName: "about" */ '../views/main.vue'),
      redirect: '/index',
      children: [
        ...routerList
      ]
    }

  ]
})

模块路由文件index.router.js如下:

export default {
    path: '/index',
    name: 'index',
    component: () => import('../views/index.vue'),
    children:[]
}

这样以后就只需要在router文件夹下面新增如user.router.js，然后在里面写路由就可以了，index.js就不用动了。