在 Laravel Spark 中使用 Vue 自定义组件答案

【问题标题】：Using Vue Custom Components in Laravel Spark在 Laravel Spark 中使用 Vue 自定义组件
【发布时间】：2016-05-23 19:55:55
【问题描述】：

我对使用 browserify 等进行 js 开发还是很陌生。我也是 Vue 的新手。我想为我的应用程序创建额外的自定义组件。但是，即使逐步遵循不同的教程，我也会在很多方面失败。

这是我目前得到的：

example.js

var MyComponent = Vue.extend({
  data: function() {
    return { message: 'This is a test' }
  },

    template: '{{ message }}'
  });

Vue.component('my-component', MyComponent);

new Vue({
  el: '#example'
});

app.js

require('spark-bootstrap');

require('./../example.js');

require('./components/bootstrap');

require('./backoffice/main.js');

var app = new Vue({
    mixins: [require('spark')]
});

view.blade.php

<div id="example">
    <my-component></my-component>
</div>

gulpfile.js

elixir(function(mix) {
    mix.less('app.less')
       .browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' })
       .copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
       .copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css');
});

我的错误

app.js:24638[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

【问题讨论】：

标签： php laravel vue.js laravel-spark

【解决方案1】：

由于example.js 是一个单独的模块，您还需要在该文件中导入 Vue。我假设你已经做到了。不过，您也不想在该文件中 new up 一个 Vue 实例，因为您稍后已经这样做了。如果<my-component> 在 spark 主体内，则说明您已经运行了 Vue 应用程序。

【讨论】：