Я никогда не был поклонником наличия javascript, стиля и шаблона в одном файле компонента.

В этой статье я объясняю, как разбить код.

Мопс для создания шаблонов, без закрывающих тегов HTML!
Стилус для стилизации, чистый и простой
Мокко для тестирования

Компоненты Vue, в которых весь код в одном файле иногда может быть беспорядочным. Взгляните на этот пример:

Для разделения кода необходима папка для каждого компонента.

Обычный:

├── app.js
└── component
    ├── ItemEdit.vue
    └── ItemList.vue

Компоненты папки:

├── app.js
└── component
    ├── item-edit
    └── item-list
        ├── config.json
        ├── index.vue
        ├── script.js
        ├── style.styl
        └── template.pug

Индексный файл:

Все еще имеют тот же шаблон структуры, сценарий и стиль

Источник Javascript:

Файл с данными

Стиль:

Тестирование

Вместо того, чтобы хранить все тесты в тестовой папке.

└── test
    ├── setup.js
    └── specs
        ├── ItemEdit.vue
        └── ItemList.vue

Не удобно импортировать компонент из таких компонентов, как: ‘../../../components/item-list/index.vue’

Наличие тестового файла в компоненте имеет преимущества:

└── item-list
    ├── config.json
    ├── index.vue
    ├── script.js
    ├── style.styl
    ├── template.pug
    └── test.spec.js

Код теста:

Наличие теста в той же папке, что и компонент, упрощает использование конфигурации компонента.

Сборник рассказов

Если вы используете storybookjs, вы можете добавлять истории в папку компонента.

Вам нужно изменить конфигурацию сборника рассказов:

Теперь в компонент можно добавлять истории:

Источник можно найти = › https://github.com/wesssel/vue-pug-stylus