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

В реакте мне очень нравилась возможность создавать допустим папку 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?
  • Вопрос задан
  • 1116 просмотров
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
В index.js сделать экспорт компонента:
import NavBar from './NavBar.vue'
export default NavBar

Код компонента писать в NavBar.vue
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
вместо комментария, уже стало похоже на ответ. можно. в 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'

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы