如何在Laravel中的app.js中正確添加多個Vue組件

Question

嗨 我一直在努力4個小時，以將至少兩個不同的Vue組件與Laravel項目中的這些vue組件一起添加到位於js文件夾中的app.js文件中。

我無法在互聯網上找到任何真正的解決方案，因為它不能解決我的問題。

我已經嘗試過類似的東西

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

在另一個工作正常的組件下，但問題是我無法使該應用程序使用2個或更多組件。

我試過通過npm安裝vue-router並配置路由器，但是它也沒有用，以某種方式，整個JS停止了，瀏覽器或Mix中的命令日志中沒有任何錯誤。

我還嘗試過調用import函數，而不是我提到的第一個函數，例如：

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>