laravel – vue 2.0无法安装组件:未定义模板或渲染功能

我正在使用Laravel Vue设置并使用Laravel Elixir,Webpack和 laravel-elixir-vue-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)

我可以看到vue.js正在从控制台中的vue / dist / vue.js?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')

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

编辑:更新

更改gulp.js语法修复了我的错误.

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

elixir(mix => {

  mix.webpack('app.js');

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

});

编辑:我添加了export default {};到模板脚本

解决方法

就像我在问题中的评论一样,我遇到了同样的问题.
在我的情况下,我有两个像这样的长生不老药召唤:
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 Elixir Issue

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...