Question

我在Laravel 5.3中使用Vue。我已经使用过Laravel 5.2。但Laravel 5.3和Vue.js对我来说是新的。所以我正在玩这对。我已成功完成Laravel Passport教程。现在我要做的是将我的html模板放在刀片文件中，将js代码放在Vue组件中。但是我收到了这个错误：

[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/js/app.js

require('./bootstrap');
Vue.component('tasks', require('./components/Tasks'));
const app = new Vue({
    el: '#app'
});

/resources/assets/js/components/Tasks.js

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);
        });
    }
}

更新

刀片文件

<body>
    <div id="app">
        <tasks></tasks>
    </div>
</body>

/resources/assets/js/components/Tasks.js

template: require('../components/tasks-template.html'),

而不是

template: '#tasks-template'

/resources/assets/js/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}}

Answer 1

假设您将模板文件设为

/*  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>

更新

对于适用于Laravel5.3的默认/开箱即用webpack配置，您需要通过npm <{1}}拉入

html-loader

然后在gulpfile.js中 - 指定npm install html-loader --save-dev用于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

我从@Alfa here获得了帮助

Answer 2

它应该是require（'./ components / Example.vue'）。default。从v13开始，vue-loader会将组件导出为默认密钥，使用import时该组件仍然起作用，但是使用require时需要上述组件。

Answer 3

导入vue组件时遇到了同样的问题。你必须改变

Vue.component('tasks', require('./components/Tasks'));

将其更改为

Vue.component('tasks', require('./components/Tasks').default);

获取错误“无法安装组件：未定义模板或渲染功能”。同时使用js文件作为Vue组件

3 个答案: