Как организовать модульность в vue?

Question

[Игорь Лебедев]

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

Component
- Component.vue
- Component.scss
- asset.png

С vue почему-то предлагают только разложенная по смыслу структура, хотя в реакте подобное реализуется на раз.

Comments

[Андрей Хохлов]

никто не запрещает разложить файлы как вам удобно

[hckn]

А в чем проблема-то, "на раз"? Ты пробовал и у тебя не получилось? Или ты в ступоре и боишся попробовать так организовать пока тебе тут не разрешат? Я разрешаю.

Но в целом это конечно бесполезная идея, потому что стили и так в .vue файле, а картинки должны быть отдельно статикой, если конечно это не свг или мелочь, которую надо в base64 переводить вебпаком.

[WapSter]

а нафига компонент то раскладывать на стили и разметку они и так в .vue файле прописываются, картинки и прочая мелочь, если проект маленький больше запутаетесь отдельно раскладывать, если большой то обычно прилетает из rest api и не важно где они лежат хоть в корне. Ну а так раскладывайте как угодно, тут скорее как вы настроите webpack зависит и ваши вкусы в организации файлов.

[Игорь Лебедев]

Да, тут больше вопрос про правильную сборку

Answer 1

[fl3nkey]

Раньше использовал такой подход (который ниже), но потом отказался от него, т.к. удобнее описывать всё в одном файле.

- Component
-- Component.vue
-- Component.js
-- Component.scss

Component.vue

<template>
  <div>my component</div>
</template>

<script src="./Component.js"></script>
<style lang="scss" src="./Component.scss">