Как сделать разбивку файлов vue как в реакте?

Question

[billt]

В реакте мне очень нравилась возможность создавать допустим папку NavBar и в ней размещать index.js и index.css.
А когда нужно было импортировать этот компонент в другие, достаточно было написать:
import NavBar from './components/NavBar';
И файл index.js подгружался автоматически.

сейчас пишу на вью и хочется разбивать файлы, но я столкнулся с проблемой: получается что после разбивки получится такая структура:

components
  NavBar
    index.js
    index.css
    index.html
    NavBar.vue

А после этого импортировать только точным путем:

import NavBar from './components/NavBar/NavBar.vue'

иначе работать не будет (я работаю с vue-cli).

Есть ли какой то более лаконичный способ структурирования проекта на vue.js?

Answer 1

[Evgeny Kulakov]

В index.js сделать экспорт компонента:

import NavBar from './NavBar.vue'
export default NavBar

Код компонента писать в NavBar.vue

Comments

[Антон Антон]

зачем тогда папку делать? можно просто один NavBar.vue и подключать его через import NavBar from './components/NavBar.vue'

[Evgeny Kulakov]

Видимо если хочется иметь раздельно css, шаблон и код. Тогда во vue инклюдим шаблон и css, пишем код, и далее экспортируем этот компонент, чтобы сократить запись до import NavBar from './components/NavBar
Также на папку components можно поставить более короткий алиас в webpack.

[billt]

Evgeny Kulakov: не так красиво как в реакте, но все равно спасибо большое!

[eferf]

Бредятина какая-то. Как вообще в голову пришло разбивать на хтмл, цсс и дж файлы если есть Вью? И как вообще в голову пришло ляпнуть что не так красиво как Реакте? Я пацталом))) Сидел бы дальше в этой JSX лапше, чего ты во Вью полез?

[Evgeny Kulakov]

Согласен, в случае с vue это не часто оказывается удобным имхо. Но использование index.js делает импорт vue фалов удобнее, особенно если папка с компонентами имеет сложную структуру. Т.е. например есть папка components/common, создаем в ней index.js и экспортируем компоненты из папки. Далее в др. компонентах можем делать что-то типа:

import {AppHeader, AppFooter, SomeComponent} from './components/common'

[Klein Maximus]

Evgeny Kulakov, делаю похожим образом. Очень удобно и tree-shaking нормально работает.

Answer 2

[Антон Антон]

вместо комментария, уже стало похоже на ответ. можно. в components/common/index.js пишем

import component1 from './component1.vue';
import component2 from './component2.vue';
...
export {component1, component2}

или даже

components = {};
fs
  .readdirSync(__dirname)
  .filter(function(file) {
    return (file.indexOf(".") !== 0) && (file !== "index.js");
  })
  .forEach(function(file) {
    components[component.name] = require(path.join(__dirname, file));
  });

module.exports = components;

и импортируйте хоть все глобально через

for (var component in components) {
            Vue.component(component, components[component]);
        }

, хоть по частям в нужных файлах через import {component} from './components/common'

Да, один компонент = один файл, но все получается более менее аккуратно.