vue 2.0 Nie można zamontować komponentu: nie zdefiniowano funkcji szablonu lub renderowania

Question

Używam konfiguracji Laravel Vue i wciągam pakiet Laravel Elixir, pakiet Webpack i laravel-elixir-vue-2.

Szukałem w kilku innych SO pytania i wiem, że to zwykle problem nie przedstawieniu autonomiczną wersję vue.js

Jednak laravel-eliksir-vue-2 pakiet aliasy vue do jednostkowego Wersja umożliwiająca załadowanie szablonów z plików .vue. Wciąż otrzymuję ten błąd za każdym razem:

[Vue:Warn] vue 2.0 Failed to mount component: template or render function not defined. (found in component <top> at ../resources/assets/js/components/top.vue) 

widzę, że vue.js jest wciągana z vue/dist/vue.js 0598: 2611 w konsoli.

Czy ktoś może zobaczyć, czego mi brakuje?

app.js

import Vue from 'vue' 
import top from './components/top.vue' 

new Vue({ 
el: '#app', 
components: { top } 
}) 

//I've also tried this: 

// new Vue({ 
// components: { 
// top 
// }, 
// render: h => h(top), 
// }).$mount('#app') 

top.vue

<template> 
    <div class="top"> 
    <p>hi</p> 
    </div> 
</template> 
<script> 
export default {}; 
</script> 

index.blade.php

<div> 
    <div id="app"> 
<top></top> 
    </div> 
</div> 
{!! HTML::script('js/app.js') !!} 

package.json

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
}, 
"devDependencies": { 
    "bootstrap-sass": "^3.3.0", 
    "gulp": "^3.9.1", 
    "laravel-elixir": "^6.0.0-9", 
    "laravel-elixir-vue-2": "^0.2.0", 
    "laravel-elixir-webpack-official": "^1.0.2" 
    } 
} 

gulp.js

var elixir = require('laravel-elixir'); 
elixir.config.sourcemaps = true; 
require('laravel-elixir-vue-2'); 

elixir(function(mix) { 
    mix.webpack('app.js', 'public/assets/js'); 
}); 

Edycja: zmiana

Zmiana gulp.js Syntaktyka stały mój błąd.

var elixir = require('laravel-elixir') 
require('laravel-elixir-vue-2') 

elixir(mix => { 

    mix.webpack('app.js'); 

    mix.styles([ 
    "normalize.css", 
    "main.css" 
    ]); 

}); 

edit: dodałem domyślną eksportowej {}; do skryptu szablonu

Answer 1

Podobnie jak mój komentarz w pytaniu, miałem ten sam problem. W moim przypadku miałem dwa eliksir połączenia tak:

elixir(mix => { 
    mix.browserSync({ 
     proxy: 'example.dev', 
     open: false 
    }); 
}); 

elixir(mix => { 
    mix.sass('app.scss'); 
    mix.webpack('app.js'); 
}); 

I nie wiem dlaczego, ale te dwa połączenia eliksir łamią WebPACK. mogę zmienić gulpfile do:

elixir(mix => { 
    mix.sass('app.scss'); 
    mix.webpack('app.js'); 
    mix.browserSync({ 
     proxy: 'example.dev', 
     open: false 
    }); 
}); 

@retrograde, thx za podpowiedź w komentarzu :)

Edycja: Zobacz ten Laravel Elixir Issue

Answer 2

Nawet jeśli składnik ma żadnych opcji, jej script tag jeszcze eksportować pustego obiektu, tak że vue-loader można wstrzykiwać funkcję render do niego:

<template> 
    <div class="top"> 
    <p>hi</p> 
    </div> 
</template> 

<script> 
    export default {}; 
</script> 

Answer 3

Hi mieli ten problem przed gdy odtwarzanie z VueJs 2.0 RC myślę co zrobiłem było stworzenie webpack.config.js w katalogu projektu i dodaj następujący:

module.exports = { 
    resolve: { 
     alias: { 
      vue: 'vue/dist/vue.js', 
     } 
    } 
}; 

również nie wiem, czy miałoby to znaczenia, ale przed próbą powyżej może dodać "vue": "^ 2.0.1", do pliku package.json i zrobić npm install (lub po prostu npm install vue)