Vue 2无法安装组件

我正在使用Laravel 5.2和Vue 2.0.6。如果我使用本地组件，它工作正常。但是，当我尝试从另一个.vue文件中使用的全球组件，它显示了以下错误：Vue 2无法安装组件

[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但这并不能解决我的问题。

来源

2016-11-17 Sovon

这可能是因为你把它注册为我的成分，但使用它作为 – RDelorier

没有，改写一些名称在SO上发布。更新。 – Sovon

我只是想念它，或者你的挂载点不在index.html（#app） – RDelorier

我想这是因为在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

来源

2016-11-17 05:38:47

我知道并根据安装指南（https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build）我在webpack配置中添加了别名（请检查我的webpack.config。 JS）。并且它在本地组件正在工作时正在工作。但是当它来自另一个.vue文件的全局组件时，会发生错误。 – Sovon

我不知道是否缺少'$'可能与它有什么关系：''vue $'：'vue/dist/vue.js'' –

已添加并编译但未更改任何内容。 – Sovon

Vue 2无法安装组件

回答

相关问题