目錄

一、自動引入組件

1、語法

2、使用

2.1、在compoents文件下隨便創(chuàng)建index.js文件

2.2、mian.js引入該js

二、自動生成路由

1、示例：

2、使用

2.1、在router文件下隨便創(chuàng)建autoRouter.js文件

2.2、在router文件下index.js文件中引入autoRouter.js文件

三、總結(jié)

---

一、自動引入組件

我們項目開發(fā)中，經(jīng)常需要import或者export各種模塊，那么有沒有什么辦法可以簡化這種引入或者導(dǎo)出操作呢？答案是肯定的，下面就為大家介紹一下require.context

require.context?是?webpack?提供的一個 API，用于創(chuàng)建 context，即一組具有相同上下文的模塊。

使用?require.context?可以方便地加載多個模塊，并且可以靈活地控制模塊的加載順序和依賴關(guān)系。

以前我們都是通過import 方式引入組件

import A from 'components/A'
import B from 'components/B'
import C from 'components/C'
import D from 'components/D'

這樣很蛋疼，因為每加一個組件，可能都要寫這么一句，這樣有規(guī)律的事，是否可以通過自動化完成?

require.context (需要vue-cli3+的版本)

1、語法

require.context(directory, useSubdirectories, regExp)

1. directory: 要查找的文件路徑
2. useSubdirectories: 是否查找子目錄
3. regExp: 要匹配文件的正則

2、使用

2.1、在compoents文件下隨便創(chuàng)建index.js文件

const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {if (install.installed) returninstall.installedrequireComponent.keys().forEach(element => {const config = requireComponent(element)if (config && config.default.name) {const componentName = config.default.nameVue.component(componentName, config.default || config)}});
}if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)
}export default {install
}

2.2、mian.js引入該js

import install from './compoents'
Vue.use(install)

3.3、這樣在其他頁面使用組件的時候，就不用再引用和注冊了。直接使用就可以了。

比如直接這樣使用就可以了，不用在import引入，不用components注冊了。

<template><HelloWorld></HelloWorld>
</template>

二、自動生成路由

實際開發(fā)中增加一個新的頁面可能就要重新編寫路由的問題，導(dǎo)致路由文件每次都要重新編輯，頁面較多，修改起來較為復(fù)雜。

那么有沒有什么辦法可以簡化這種引入或者導(dǎo)出操作呢？答案是肯定的，下面就為大家介紹一下require.context

以前我們都是通過import 方式引入路由

import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue')}
]

1、示例：

require.context('./test', false, /\.test\.js$/);
//（創(chuàng)建出）一個 context，其中文件來自 test 目錄，request 以 `.test.js` 結(jié)尾。

2、使用

2.1、在router文件下隨便創(chuàng)建autoRouter.js文件

let routerArr = []//查找views目錄，以.vue結(jié)尾的文件，查找子目錄
const contexts = require.context('../views/', true, /\.vue$/)contexts.keys().forEach(value => {const path = value.substr(value.indexOf('/'), value.lastIndexOf('.') - 1)const componentLocation = value.substr(value.indexOf('.') + 1, value.lastIndexOf('.') - 1)const componentName = componentLocation.substr(componentLocation.lastIndexOf('/') + 1)//添加到路由數(shù)組中routerArr.push({path: path,name: componentName,component: () => import(`@/views${componentLocation}`)})
})export default routerArr

2.2、在router文件下index.js文件中引入autoRouter.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'//引入剛剛寫的autoRouter.js文件
import routerArr from './autoRouter.js'Vue.use(VueRouter)
const routes = [//這里是其他手動寫的路由
]const router = new VueRouter({mode: 'history',//這里進行路由合并routes:[...routes,...routerArr]
})export default router

完成了，后面在views里面新建頁面，就不要手動寫路由了。

三、總結(jié)

我們可以通過require.context可以自動化引入文件。
其實我們不單單局限于組件，路由內(nèi)， 所有模塊文件都是通用的， 例如路由， 接口封裝模塊，都是可以使用的。