VueJS - main.js - app.vue 和 component.vue 之间有什么区别？

Question

我刚开始使用 Vue，我使用 Webpack-Loader 将它添加到我的 Django 项目中，所以我没有创建 SPA，而且我对 Vue 的结构有一些非常基本的疑问。

我有一个组件添加到我的 HTML 模板之一，它是用 Vuetify 制作的非常基本的数据表，完整代码在这里： https://codesandbox.io/s/strange-goldwasser-gfl7x?file=/src/ App.vue

我不太清楚的是整个component.vue -> app.vue -> main.js机制。 在这种情况下，如果我想使用我在模板上创建的那个组件，我只需将以下内容添加到模板中：

<div id="app">
    <app></app>
</div>

但是当我想创建一个新组件时会发生什么？ 假设我创建了另一个组件，我想在我的 Django 项目的同一页或另一页上使用它，我需要做什么？ 我必须为每个组件创建另一个 app.vue 吗？ 我是否必须为组件创建另一个 main.js 文件？ 或者我是否只需要为我的所有组件使用一个 app.vue 和一个 main.js？ 在此先感谢您的任何建议！

Answer 1

在您的情况下，会发生这种情况：

• 您的 django 页面包含您的 main.js（或为 main.js 创建的包）。
• main.js 开始寻找 id 为 #app 的元素
• 它会用<App />填充它，因为你告诉它这样做（通过模板属性）

您询问是否现在必须为您创建的每个新组件执行 component.vue -> app.vue -> main.js。 目前，是的，因为您的 main.js 未设置为灵活。 为了使 main.js 更灵活，您可以执行以下操作：

import App from 'App.vue';
Vue.component('app', App);

import AnotherComponent from './AnotherComponent.vue';
Vue.component('another-component', AnotherComponent);

// Here you tell Vue to look for an element with an id #app.
// But by not supplying it a template it will use the content 
// of #app as template.
// The django page may now determine what you want Vue to do.
new Vue({
  el: "#app", 

  // template: '' // Let django page determine.
  // components: { App } // use Vue.component to register components globally instead.

  vuetify: Vuetify // when you want to use Vuetify.
});

我希望这能让 Vue 更清晰一些。