vue 2.0 не удалось подключить компонент: шаблон или функция рендеринга не определены

Я использую настройку Laravel Vue и вытаскиваю эликсир Laravel, Webpack и ларавель-эликсир-вю-2 пакета.

Я посмотрел на несколько других вопросов SO, и я знаю, что это обычно проблема с не ссылкой на автономную версию vue.js

тем не менее, пакет laravel-elixir-vue-2 псевдонимы vue к автономной версии, так что шаблоны могут быть загружены из .файлы vue. Тем не менее, я получаю эту ошибку каждый раз:

[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)

Я могу вижу, что вю.js втягивается из vue/dist / vue.Яш?0598:2611 в консоли.

кто-нибудь видит, чего мне не хватает?

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')

верх.vue

<template>
   <div class="top">
     <p>hi</p>
   </div>
</template>
<script>
 export default {};
</script>
.лезвие.в PHP 
<div>
   <div id="app">
<top></top>
   </div>
</div>
{!! HTML::script('js/app.js') !!}

пакета.в 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"
  }
 }

залпом.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');
});

Edit: update

изменение залпом.синтаксис js исправил мою ошибку. 

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

elixir(mix => {

  mix.webpack('app.js');

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

});

edit: я добавил экспорт по умолчанию {}; в сценарий шаблона

6
laravel laravel-elixir vue.js

3 ответов

Как и мой комментарий в вопросе, у меня была та же проблема. В моем случае у меня было два вызова эликсира:

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

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

Я не знаю, почему, но два вызова эликсира нарушают webpack. Я меняю свой gulpfile на:

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

@retrograde, thx для вашей подсказки в вашем комментарии:)

изменить: Смотрите это Выпуск Эликсира Laravel

7

Привет, у меня была эта проблема раньше, когда я играл с VueJs 2.0 RC, я думаю, что я сделал это создание веб-пакета.конфиг.js в корне проекта и добавьте следующее:

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

также не уверен, что это будет иметь значение, но перед попыткой выше, возможно, добавьте "vue": "^2.0.1", в ваш пакет.файл json и установка npm (или просто установка npm vue)

2

даже если у вашего компонента нет опций, его script tag по-прежнему должен экспортировать пустой объект, так что vue-loader может впрыснуть в:

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

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