我正在使用nuxt.js开发一个项目,我想实现原子设计方法
所以我目前正在导入这样的组件
import ButtonStyled from '@/components/atoms/ButtonStyled.vue'
import TextLead from '@/components/atoms/TextLead.vue'
import InputSearch from '@/components/atoms/InputSearch.vue'
但是我需要这样导入
import {
ButtonStyled,
TextLead,
InputSearch
} from '@/components/atoms'
我离那越近
/atoms/index.js
const req = require.context('./', true, /\.vue$/)
const modules = {}
req.keys().forEach(fileName => {
const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')
modules[componentName] = req(fileName).default
})
export const { ButtonStyled, TextLead } = modules
但是我仍在静态地定义导出变量名称,我需要基于文件夹内的组件定义动态
注意:我不能使用
export default modules
如果我使用上面的代码段,将无法导入所需的方式,即:
import { ButtonStyled } from "@/components/atoms"
答案 0 :(得分:0)
require.context
是Webpack中一个非常模糊的功能,在运行单元测试时会遇到问题。但是,要解决您的问题;您需要将index.js文件导入项目的main.js
。
这是我的方法:
_globals.js
// Globally register all base components prefixed with _base for convenience, because they
// will be used very frequently. Components are registered using the
// PascalCased version of their file name.
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context('.', true, /_base-[\w-]+\.vue$/)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = upperFirst(
camelCase(fileName.replace(/^\.\/_base/, '').replace(/\.\w+$/, ''))
)
Vue.component(componentName, componentConfig.default || componentConfig)
})
components / index.js
//...
import './_globals'
//...
main.js
//...
import './components' // This imports in the index.js
//...
通过这种方式,将require.context()
加载的组件注册为vue组件并使其全局可用。我建议仅将全局组件与经常使用的组件一起使用。如果只打算使用一次,请不要全局加载该组件。
您可以在此处找到一个有效的示例-> https://github.com/IlyasDeckers/vuetiful/tree/master/src
要使您的单元测试与Jest一起工作,您将需要模拟require.context()
。这确实是一种痛苦,但是可以使用babel-plugin-transform-require-context
答案 1 :(得分:0)
我尝试使用您的方式来执行此操作,并且知道您在module.exports中犯了一个错误
module.exports不能使用import,我想你可以这样做
在atoms / index.js上
const req = require.context("./", true, /\.vue$/);
const atoms = {};
req.keys().forEach(fileName => {
const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, "$1");
atoms[componentName] = req(fileName).default;
});
export default atoms;
使用地点
import k from "@/components/atoms/index.js";
export default {
components: {
test1: k.test1,
test2: k.test2
}
};
或index.js
import test1 from "./test1.vue";
import test2 from "./test2.vue";
export { test1, test2 };
以及在何处使用
import {test1,test2} from "@/components/atoms/index.js";
export default {
components: {
test1,
test2
}
};
答案 2 :(得分:0)
我创建了一个图书馆,可以为我完成所有这些工作,也许对其他人有帮助。