将多个组件导入一行 (Atomic Design + Vue.JS)

Question

我正在使用 Vue.js 开发一个项目，并且想应用原子设计方法，但我想以集群和更智能的方式导入组件

目前

import GridLayout from '@/components/bosons/GridLayout.vue'
import LocalStorage from '@/components/bosons/LocalStorage.vue'

import ButtonStyled from '@/components/atoms/ButtonStyled.vue'
import TextLead from '@/components/atoms/TextLead.vue'
import InputSearch from '@/components/atoms/InputSearch.vue'

import SearchForm from '@/components/molecules/SearchForm.vue'

我多么希望

import {
    GridLayout,
    LocalStorage
} from '@/components/bosons'

import {
    ButtonStyled,
    TextLead,
    InputSearch
} from '@/components/atoms'

import {
    SearchForm
} from '@/components/molecules'

解决方案？我考虑过将 index.js 放入文件夹

/bosons/index.js

/atoms/index.js

/molecules/index.js

和 index.js 将导入所有组件并导出，所以它会像

import ButtonStyled from './ButtonStyled.vue'

export default {
  ButtonStyled
}

或

export { default as ButtonStyled } from './ButtonStyled.vue'

效果很好，但是这种方式还是静态的，每次新建一个组件，都需要添加index.js，每次删除一个组件，也需要从index.js

我需要动态导入文件夹的所有组件

我越接近，

const req = require.context('./', true, /\.vue$/)

const modules = {}

req.keys().forEach(fileName => {
  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '')
  modules[componentName] = req(fileName).default
})

export const { ButtonStyled, TextLead } = modules

但我仍然是静态定义导出变量名，我需要根据文件夹内的组件定义动态

注意：我不能使用

export default modules

如果我使用上面的代码片段，我将无法导入我需要的方式，即：

import { ButtonStyled } from "@/components/atoms"

Answer 1

这里有一个解决方案，在一个文件夹动态中导入所有组件，尽管导入语句是两个而不是一个行。

此解决方案的另一个缺点是您每次都必须导入整个组件文件夹，因为解构发生在第二行。如果您实际上不需要所有组件，这可能会导致性能问题。

第 1 步

我还在组件文件夹中使用了索引文件，例如在你的玻色子文件夹中，添加一个包含以下内容的 index.js 文件：

const req = require.context(".", false, /\.vue$/);

const components = {};

req.keys().forEach(fileName => {
  if (fileName === "./index.js") return;
  const componentName = fileName.replace(/(\.\/|\.vue)/g, "");
  components[componentName] = req(fileName).default;
});

export default components;

这会将 .vue 文件添加到您随后可以导出的组件对象中。它排除了 index.js 文件（本身）。

第二步

在您要导入玻色子组件的文件中：

import bosons from "@/components/bosons";
const { GridLayout, LocalStorage } = bosons;

这会导入组件并将它们保存在变量中，以便您可以使用它们。

请注意，在我的解决方案中你不能做

import { GridLayout, LocalStorage } from "@/components/bosons";

因为 import {component} 语法看起来像解构，但实际上不是。它指的是看起来像“export const”的导出，但这是“export default”导出。

Answer 2

我创建了一个插件 Webpack，这是一个非常适合使用 Atomic Design 方法的人的库，基本上它从一个目录生成 exports named，也许这对其他人有帮助

将多个组件导入一行 (Atomic Design + Vue.JS)

import multiple components into a single line (Atomic Design + Vue.JS)

javascript

regex

vue.js

vue-component

atomic-design

第 1 步

第二步

Weback Plugin - named-exports