如何在 Laravel 的 app.js 中正确添加多个 Vue 组件

Question

所以，嗨。我已经努力了 4 个小时，将至少两个不同的 Vue 组件添加到我的 app.js 文件中，该文件位于 js 文件夹中，以及我的 Laravel 项目中的这些 vue 组件。

我在互联网上找不到任何真正的解决方案，因为它没有解决我的问题。

我尝试过类似的东西

Vue.component('signature-element', require('./components/Signature.vue').default);

在另一个完美运行的组件下，但问题是我无法让应用程序与 2 个或更多组件一起工作。

我尝试通过 npm 安装 vue-router 并配置路由器，但它也不起作用，不知何故整个 JS 停止了，在浏览器或 Mix 中的命令日志中没有任何错误。

我也尝试过调用导入函数而不是我提到的第一个函数，例如：

const componentVar = import ...;

inside vue:

    new Vue({
        components: { first, componentVar },
        mounted() {}
    });

但不幸的是，这也不起作用。

Answer 1

在第二个示例中，您尝试在本地注册您的组件。

如果你想这样做，你可以这样做：

import first from './components/first'
import componentVar from './components/componentVar'

new Vue({
  el: '#app',
  components: {
    'first': first,
    'componentVar': componentVar
  }
})

如果你想使用第一个例子，这意味着你想全局注册你的组件。这意味着它们可以在注册后创建的任何根 Vue 实例（新 Vue）的模板中使用

例子：

Vue.component('signature-element', { /* ... */ })

new Vue({ el: '#app' })

那么在你看来

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>