在 Laravel 中注册第三方 Vue 组件

Question

我是使用Vue.js的新手，有一件事我无法弄清楚。

当我编写自己的组件时，我知道如何使用app.js文件实现它们并将其注册到我的项目中。

我的问题是，如何将第三方组件注册到Laravel中？我正在尝试将 Vue 表单向导注册到我的项目中，但我无法让它工作。

我尝试了多种方法来注册组件：

// app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('form-wizard', require('./components/FormWizard.vue'));
const app = new Vue({
el: '#app'
});

我的组件文件：

<script>
import VueFormWizard from 'vue-form-wizard';
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Vue.use(VueFormWizard)
</script>

我的观点是这样的：

<form-wizard 
@on-complete="onComplete"
color="#FFA500"
error-color="#a94442"
shape="tab"
next-button-text="Continue"
back-button-text="Previous"
finish-button-text="Complete"
></form-wizard>

我需要做什么才能完成这项工作？

Answer 1

您不需要定义FormWizard组件。只需将组件文件的script部分中的代码移动到app.js文件即可：

// app.js file
require('./bootstrap');
window.Vue = require('vue');
import VueFormWizard from 'vue-form-wizard';
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Vue.use(VueFormWizard)
const app = new Vue({
el: '#app'
});

这将全局注册VueFormWizard组件，这意味着您可以在任何模板中使用form-wizard标记。