vue 项目开发,需要在某个页面,导入大量子模块。 这些模块都在一个文件夹下。
我希望用es6的模块规范,也不需要按需导入。 请问有没有什么好写法,能自动导入某个文件夹下的全部模块。
最近翻看Vue 官方文档,看到官方已经补充了对该需求的相关说明。(将某文件夹内的组件文件,自动引入,并自动注册)
具体细节参考官方文档
https://cn.vuejs.org/v2/guide/components-registration.html
可以在目录下,比如 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));
});