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>

Там нет ошибки компиляции. Аналогичный вопрос tis 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 Не удалось установить компонент

ответ

Смежные вопросы