文章目录
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)