我在Laravel 5.3使用Vue公司。我已经与Laravel 5.2工作。但Laravel 5.3和Vue.js是新的我。所以我玩这些对。我已经成功地完成Laravel Passport教程。现在我想要做的就是把刀片文件，JS代码在Vue的成分我的HTML模板。但我发现了这个错误：
[Vue的警告]：无法安装部件：模板或呈现功能没有定义。 （在组分中发现）
所以，我不明白这个错误的原因，因为我在Vue.js.是新如果有任何人知道答案，但可以理解的。这里是我的代码。
刀片文件
<body>
<div id="app">
<tasks></tasks>
</div>
<template id="tasks-template">
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
@{{task.body}}
</li>
</ul>
</template>
<script src="/js/app.js"></script>
</body>
/resources/assets/就是/app.就是
require('./bootstrap');
Vue.component('tasks', require('./components/Tasks'));
const app = new Vue({
el: '#app'
});
/resources/assets/就是/components/tasks.就是
export default {
template: '#tasks-template',
data: function () {
return {
list: ''
};
},
created: function() {
this.$http.get('/api/tasks').then((response) => {
this.list = response.body;
}, (response) => {
alert(0);
});
}
}
UPDATE
刀片文件
<body>
<div id="app">
<tasks></tasks>
</div>
</body>
/resources/assets/就是/components/tasks.就是
template: require('../components/tasks-template.html'),
代替
template: '#tasks-template'
/resources/assets/就是/components/tasks-template.HTML
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
{{task.body}}
</li>
</ul>
但是，现在收到这个错误。
未捕获的错误：模块解析失败：/var/www/html/casesync/resources/assets/js/components/tasks-template.html意外标记（1：0）您可能需要适当的加载程序来处理此类文件。 | | | @ {{task.body}}
比方说，你有你的模板文件
/* resources/assets/js/components/tasks.template.html */
<div class="tasks-component component">
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
{{task.body}}
</li>
</ul>
</div>
然后Tasks.js会
/* resources/assets/js/components/Tasks.js */
export default {
template: require('./tasks.template.html'),
data: function () {
return {
list: ''
};
},
created: function() {
this.$http.get('/api/tasks').then((response) => {
this.list = response.body;
}, (response) => {
alert(0);
});
}
}
在你可以有你app.js为
/* app.js */
require('./bootstrap');
Vue.component('tasks', require('./components/Tasks').default);
const app = new Vue({
//el: '#app'
}).$mount('#app');
//your main index.php or entry point could be
<body>
<div id="app">
<tasks></tasks>
</div>
</body>
UPDATE
对于默认的输入/输出的现成webpack配置上Laravel5.3工作，你需要通过NPM在html-loader拉
npm install html-loader --save-dev
然后在gulpfile.js - 指定html-loader用于.html文件。
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
const config = {
module: {
loaders:[
{
test: /\.html$/,
loader: 'html'
}
]
}
};
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js', null, null, config);
});
最后，你可以在主/项文件app.js作为全球注册组件
Vue.component('test-component', require('./test-component').default);
/* Or using ES2015 import */
import TestComponent from './test-component';
Vue.component('test-component', TestComponent);
我得到的帮助来自@Alfa here
应要求（ './组件/ Example.vue'）。默认。由于V13，VUE装载机出口组件为默认密钥，使用进口时仍然有效相同，但使用时需要需要以上。
我有同样的问题导入VUE组件。你必须改变
Vue.component('tasks', require('./components/Tasks'));
将其更改为
Vue.component('tasks', require('./components/Tasks').default);