Question

我是Laravel使用Vue.js的新手，有一件事我想不通。

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

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

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

// 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标记。

在Laravel中注册第三方Vue组件

1 个答案: