require.context()基础组局全局自动化注册和Vue.use()的使用

require.context() 使用场景

通过该函数获取特定上下文，主要用来实现前端自动化导入模块,该方法是webpack里的

require.context(
    directory{string},//要搜索的文件夹路径
    useSubdirectories {Boolean},//是否读取文件下子目录
    regExp{RegExp}//正则
);
#示例
const context = require.context("./modules", true, /\.js$/);
// 你不需要 `import app from './modules/app'`
// 它将自动导入 modules下所有文件
//context是一个函数，有resolve,keys,id三个参数
context.keys().forEach(key=>{
    //context.keys();//返回匹配成功模块的相对路径组成的数组["./app.js"]
    const fileModule=context.keys(key).default;//获取导出文件内容，获取以export.default方式导出的文件内容
})

场景1、 全局自动注册基础组件

自动全局注册Global下的所有组件，后续新组件只需添加至该文件夹下即可，无需导入，全局可用

// src/global.js
import Vue from "vue";
const requireComponent = require.context(
  //基础组件位置
  "./components/Global",
  //是否下钻寻找子目录
  true,
  //文件匹配规则
  /\.(js|vue)$/
);
requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName);
  let file = componentConfig.default.__file;

  var index = file.lastIndexOf("/");
  let str = file.substring(index + 1, file.length);
  let componentName = str.split(".")[0];
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
});

//main.js
import "./global.js"

场景2、 自动导入store module

// store/modules/index.js
const modulesFiles = require.context("./modules", true, /\.js$/);
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});

//store/index.js
import Vue from "vue";
import Vuex from "vuex";
import modules from "./modules";

Vue.use(Vuex);

export default new Vuex.Store({
  modules
});

场景3、 批量导入svg文件夹下的多个文件

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context(".", false, /\.svg$/);
requireAll(req);

Vue.use()注册全局组件

注册

//index.js
import BaseLoading from './Loading';
const Loading={
//install 是默认方法，外界调用use时会调用install方法，并传递Vue参数
    install:function(Vue){
        Vue.component('Loading',BaseLoading);
    }
}
export default Loading

使用

//main.js
import Loading from 'xx';
Vue.use(Loading)