javascript - 需要多个 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) 的唯一优势是你可以使用这个 <parent></parent>在所有其他组件中全局组件，而无需隐式声明它们。

祝你好运:)