Laravel SparkでVueカスタムコンポーネントを使用する

Question

js開発用にbrowserifyなどを使うのは初めてです。また、私は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. 

Answer 1

をexample.jsが独立したモジュールであるので、あなたにもそのファイル内のVueをインポートする必要があります。私はあなたがそれをやったと仮定します。あなたはすでにそれをやっているので、あなたはまた、newそのファイルのVueインスタンスをアップしたくありません。 <my-component>がスパークボディの内側にある場合は、すでにVueアプリが実行されています。