需要多个 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 只需要包含 "parent" 组件，而父组件包含子组件。我想 Vue.JS 会有一个类似的技巧来帮助我组织我的组件——但是通读文档我没有找到一个（也许我错过了？）

有没有办法让 Vue 组件列出其依赖项（以便 Browserify/Webpack 捆绑）或递归运行目录中每个文件的 javascript 语句（所以 Browserify / Webpack 只是打包了整个文件）？

我目前不关心异步组件 - 所以如果解决方案破坏了该功能，那也没关系。有一天我想尝试使用 Webpack 创建异步组件并只在我需要它们时加载它们，但今天我更感兴趣的是把它弄好并运行ning 这样我就可以玩 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) 的唯一优点是您可以在所有其他组件中全局使用此 <parent></parent> 组件，而无需隐式声明它们。

祝你好运:)

Answer 2

您不需要在顶层导入所有内容。

在您的 main.js 中，您可以导入父组件

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

new Vue({
  el: "#app",
  components: {
    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>

Answer 3

我找到了一种方法，不确定它在性能和 webpack 块大小方面是否是最好的。我在组件根目录中创建了一个 index.js 文件：

export const HelloWorld = require('./HelloWorld.vue').default

因此，在我将使用的组件中：

const { HelloWorld } = require('@/components')

由于 babel 问题，我需要混合使用 require 和 export，还需要在 require 之后使用 default 属性——正如我在一些 babel 使用讨论中读到的那样。

需要多个 Vue 组件的更简洁的方法？

Cleaner way to require multiple Vue components?

javascript

browserify

webpack

vue.js

vue-component