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無法安裝組件

回答

相關問題