импортировать несколько компонентов в одну строку (Atomic Design + Vue.JS) - PullRequest
Новая
       33

импортировать несколько компонентов в одну строку (Atomic Design + Vue.JS)

0 голосов
/ 25 апреля 2019

Я занимаюсь разработкой проекта с помощью 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'

Sulution?Я подумал о том, чтобы поместить 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"

Ответы [ 2 ]

1 голос
/ 25 апреля 2019

Вот решение, которое импортирует все компоненты в папке динамически , хотя оператором импорта является два вместо одна строка.

Другим недостатком этого решения является то, что вам придется каждый раз импортировать всю папку компонентов, потому что деструктуризация происходит во второй строке. Это может привести к проблемам с производительностью, если вам на самом деле не нужны все компоненты.

Шаг 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 (сам по себе).

Step2

В вашем файле, куда вы хотите импортировать бозонные компоненты: 

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

Импортирует компоненты и сохраняет их в переменных, чтобы вы могли их использовать.

Обратите внимание, что в моем решении вы не можете сделать 

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

потому что синтаксис import {component} выглядит как деструктурируемый, но это не так. Это относится к экспорту, который выглядит как «export const», но это «экспорт по умолчанию».

0 голосов
/ 09 июля 2019

Я создал Plugin Webpack, библиотеку, которая идеально подходит для тех, кто работает с методологией Atomic Design, в основном она делает exports named из каталога, может быть, это помогает другим людям

Плагин Weback - именованный экспорт

...