首页 文章

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

提问于
浏览 次
0

我和这些人一起玩#861911_ . 我已成功完成Laravel Passport教程 . 现在我要做的是将我的html模板放在刀片文件中，将js代码放在Vue组件中 . 但是我收到了这个错误：

[Vue警告]：无法安装组件：未定义模板或渲染功能 . （在组件中找到）

所以我无法理解这个错误的原因，因为我是Vue.js的新手 . 如果有人知道答案，我们将不胜感激 . 这是我的代码 .

Blade file

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

UPDATE

Blade file

<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）您可能需要适当的加载程序来处理此文件类型 . | | | @ {}

laravel vue.js laravel-5.3 vue-component vuejs2

2 回答

  • 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>

    UPDATE

    对于在Laravel5.3上运行的默认/开箱即用 webpack 配置，您需要通过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

    回复于
  • 0

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

    回复于

相关问题