0

我正在使用 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/, '$1')
  modules[componentName] = req(fileName).default
})

export const { ButtonStyled, TextLead } = modules

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

注意：我不能使用

export default modules

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

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

2 回答 2

0

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

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

步骤1

我还在组件文件夹中使用了索引文件，因此例如在您的 bosons 文件夹中，添加一个 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 文件（本身）。

第2步

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

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

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

请注意，在我的解决方案中，您不能这样做

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

因为 import {component} 语法看起来像解构但不是。它指的是看起来像“export const”的导出，但这是一个“导出默认”导出。

于 2019-04-25T14:41:02.047 回答
-1

我创建了一个 Plugin Webpack，一个非常适合那些Atomic Design使用exports named.

Weback 插件 - 命名导出

于 2019-07-09T16:12:45.843 回答