Question

我使用的是Laravel 5.2和Vue 2.0.6。如果我使用本地组件，它工作正常。但是当我尝试使用另一个.vue文件中的全局组件时，它会显示以下错误：

[Vue warn]: Failed to mount component: template or render function not defined. (found in component <test> at path\to\site\resources\assets\blog\components\test.vue)

Test.vue

<template>
    <div>
        <h1 class="hello">Hello</h1>
    </div>
</template>
<style>
    .hello {
        color:blue;
    }
</style>
<script>
    export default {}
</script>

App.js

var Vue = require('vue');
var resource = require('vue-resource');

window.Vue = Vue;

Vue.use(resource);

Vue.component('test', require('../components/test.vue'));

new Vue({
    el: '#app'
});

Gulpfile.js

var gulp = require('gulp');
var elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');
require('laravel-elixir-webpack-official');

var blogResourcePath = './resources/assets/blog';
var blogPublicPath = 'public/blog-assets';

elixir(function(mix) {
        mix.webpack('app.js', blogPublicPath + '/js', blogResourcePath + '/js')
});

Webpack.config.js

'use strict';

const path  = require('path');

module.exports = {
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.join(__dirname, 'resources/assets'),
                exclude: /node_modules/,
                loader: 'babel',
            },
            {
                test: /\.vue$/,
                loader: 'vue',
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            },
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js',
        }
    }
};

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <test></test>
    </div>
    <script type="text/javascript" src="{{ elixir('blog-assets/js/app.js')}} ">
</html>

没有编译错误。类似的问题是here，但这并不能解决我的问题。

Answer 1

我想这是因为使用Vue2.0，默认版本是没有模板解析器的版本。您需要按如下方式导入Vue：

import Vue from 'vue/dist/vue.js'

请在这里查看LinusBorg答案：

https://forum-archive.vuejs.org/topic/4399/vue-2-0-vue-warn-failed-to-mount-component-template-or-render-function-not-defined-found-in-root-instance/6

Vue 2无法安装组件

1 个答案: