在Laravel Spark中使用Vue自定義組件

我是使用browserify等進行js開發的新手。我也是Vue的新手。我想爲我的應用程序創建額外的自定義組件。但是，即使在逐步遵循不同的教程時，我也會失敗太多。在Laravel Spark中使用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.

來源

2016-05-23 Frank Provost

由於example.js是一個獨立的模塊，你需要導入VUE在該文件中。我假設你已經做到了。儘管如此，你也不想在該文件中創建一個Vue實例，因爲你之後就已經這麼做了。如果<my-component>位於spark體內，則已經有Vue應用程序在運行。

來源

2016-05-23 20:53:50 Jeff

在Laravel Spark中使用Vue自定義組件

回答

相關問題