ES6 中,需要用import 导入同一个文件夹下多个模块, 有神什么好写法吗,求大神指点。。

vue 项目开发,需要在某个页面,导入大量子模块。 这些模块都在一个文件夹下。
我希望用es6的模块规范,也不需要按需导入。 请问有没有什么好写法,能自动导入某个文件夹下的全部模块。

图片说明

最近翻看Vue 官方文档,看到官方已经补充了对该需求的相关说明。(将某文件夹内的组件文件,自动引入,并自动注册)

具体细节参考官方文档

https://cn.vuejs.org/v2/guide/components-registration.html

img

img

可以在目录下,比如 components 下,新建一个 index.js 文件
如下图所示
图片说明
在index.js内引入各个文件
图片说明
之后在需要引入的地方,使用下面的语句 引入即可

import { Navbar, SearchModal, Container } from "layout/components";

另外一种方式,就是使用了webpack后的方式,不过是否好用我还没使用过。你可以试一下

const context = require.context('layout/components/', true, /\.(vue)$/);
context.keys().forEach((filename) => {
    console.log(filename, context(filename));
});