Question

所以，嗨。我一直在努力4个小时，以将至少两个不同的Vue组件与Laravel项目中的这些vue组件一起添加到js文件夹中的app.js文件中。

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

我尝试过类似的事情

[STEP 101] # grep 18.04 /etc/os-release
VERSION="18.04.2 LTS (Bionic Beaver)"
PRETTY_NAME="Ubuntu 18.04.2 LTS"
VERSION_ID="18.04"
[STEP 102] # ls -l /bin/sh
lrwxrwxrwx 1 root root 4 2019-02-14 09:49 /bin/sh -> dash
[STEP 103] # /bin/sh
# [ a == b ]
/bin/sh: 1: [: a: unexpected operator
# test a == b
/bin/sh: 2: test: a: unexpected operator
# [ a = b ]
# test a = b
# exit
[STEP 104] #

在另一个可以正常工作的组件下，但问题是我无法使该应用程序使用2个或更多组件。

我尝试通过npm安装vue-router并配置路由器，但是它也无法正常工作，整个JS停止了运行，浏览器或Mix中的命令日志中没有任何错误。

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

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

但是不幸的是，这也没有奏效。

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>

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

1 个答案: