Более чистый способ потребовать несколько компонентов Vue?

Question

Я только начал работать с Vue.JS, и есть одна небольшая проблема, которая меня подтачивает. Структура Моего файла, подобная следующий:

+ js 
|--+ components 
| |-- parent.vue 
| |-- child.vue 
|-- main.js 

Тогда в моем main.js я следующее:

window.Vue = require('vue'); 
require('vue-resource'); 
Vue.component('parent', require('./Components/parent')); 
Vue.component('child', require('./Components/child')); 
var app = new Vue({ el: "#app" }); 

(я на самом деле не уверен, что vue-resource есть, но это было создан для меня свежей установкой Laravel 5.3)

С первого взгляда я сразу заметил, что мой файл main.js будет неуправляемым, если я добавлю слишком много компонентов. У меня нет этой проблемы при работе с ReactJS, потому что main.js должен включать только «родительский» компонент, а родительский компонент включает дочерний компонент. Я полагал, что Vue.JS будет иметь такой же трюк, чтобы помочь мне организовать мои компоненты - (? Может быть, я пропустил его), но чтение через документы я не нашел один

Есть ли способ либо имеет Vue компонент перечислит свои зависимости (для Browserify/Webpack для комплектации) или рекурсивно запускают javascript-инструкцию для каждого файла в каталоге (так что Browserify/Webpack просто собирает все это)?

На данный момент меня не интересуют асинхронные компоненты - так что если решение нарушит эту функциональность, все будет в порядке. Однажды я хотел бы поиграть с использованием Webpack для создания асинхронных компонентов и загрузки только по мере необходимости, но сегодня меня больше интересует только то, что я запускаю и запускаю, поэтому я могу играть в Vuex.

Answer 1

Vue.component синтаксис для глобальных компонентов только, если у вас есть компонент, который используется внутри другого компонента используют это:

import Parent from './components/Parent.vue'; 
import Child from './components/Child.vue'; 

new Vue({ 
    el: "#app", 
    components: { Parent, Child } 
}); 

чем внутри этих компонентов вы можете использовать другие компоненты.

Единственное преимущество использования Vue.component(Parent) заключается в том, что вы можете использовать этот компонентво всех ваших других компонентах, не объявляя их неявно.

удачи :)

Answer 2

Вам не нужно импортировать все на высшем уровне.

В вашей main.js вы можете импортировать компонент

import Parent from './components/Parent.vue' 

new Vue({ 
    el: "#app", 
    components: { 
    Parent 
    } 
}) 

Parent С вашей Parent.vue

<template> 
    <div> 
    <p>I am the parent</p> 
    <child></child> 
    </div> 
</template> 

<script> 
    import Child from './Child.vue' 

    export default { 
    mounted() { 
     console.log('mounted parent') 
    } 
    } 
</script> 

<style scoped> 
    // ... 
</style> 

Тогда в вашем Child.vue

<template> 
    <p>I am the child</p> 
</template> 

<script> 
    export default { 
    mounted() { 
     console.log('mounted child') 
    } 
    } 
</script> 

<style scoped> 
    // ... 
</style> 

И вы должны закончить с

<div> 
    <p>I am the parent</p> 
    <p>I am the child</p> 
</div>