我想导入驻留在文件夹中的所有组件。有没有办法在不创建index.js
文件并单独导入然后导出每个组件的情况下执行此操作?有大量的方式吗?
文件夹结构:
src/templates/
Foo.vue
Bar.vue
Baz.vue
src/App.vue
在App.vue中,我想导入templates
文件夹中的所有组件:
import * as Templates from './templates'
除非我在index.js
文件夹中放置./templates
文件,否则上述操作无效:
// Do I have to import each component individually?
// Can I just bulk import all these?
import Default from './Default'
import Home from './Home'
import Agency from './Agency'
import CaseStudies from './CaseStudies'
import Contact from './Contact'
export {
Default,
Home,
Agency,
CaseStudies,
Contact
}
答案 0 :(得分:4)
您可以批量导入
import { Default, Home, Agency, CaseStudies, Contact } from "./templates/*";
使用babel-plugin-wildcard
.babelrc
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["wildcard", {
"exts": ["js", "es6", "es", "jsx", "javascript", "vue"]
}]
],
答案 1 :(得分:0)
也许你可以使用require.context
,你可以阅读vuejs官方文档:https://vuejs.org/v2/guide/components-registration.html
答案 2 :(得分:0)
您可以使用异步import():
import fs = require('fs');
然后:
fs.readdir('./someDir', (err, files) => {
files.forEach(file => {
const module = import('./' + file).then(m =>
m.callSomeMethod();
);
// or const module = await import('file')
});
});