我有一个基于Laravel Spark 2.0的Laravel 5.3项目 . 我想在upgrade guide.之后将Spark升级到3.0并将Vue.js升级到2.0

我已经将 "laravel/spark": "~3.0" 添加到我的composer.json中,并且它已正确更新 . 之后我将以下软件包添加到package.json中并且安装时没有遇到任何问题:

"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"vue": "~2.0.1"

还修改了我的gulpfile.js来添加 laravel-elixir-vue-2

然后我用Gulp编译了我的资产并没有抛出任何错误,但当我转到应用程序时,会显示一个空白页面,控制台显示以下错误:

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance) InvalidStateError

vue-migration-helper

我的Vue文件位于resources / assets / js /,其结构如下:

resources/assets/js/ --components/ **here I have custom components. --spark/ --spark-components/

我在这些文件夹上运行了vue migration helper并修复了大部分警告 . 只剩下那些与全球事件有关的事件 .

这就是我的gulpfile.js的样子:

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


elixir(function(mix) {
mix.sass('app.scss')
    .browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' })
    .copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css')
    .copy('bower_components/iCheck/skins/minimal/_all.css', 'public/css/iCheck.css')
    .copy('bower_components/iCheck/icheck.min.js', 'public/js/icheck.min.js');

mix.styles([
    'resources/assets/vendor/bootstrap/css/bootstrap.css',
    'resources/assets/vendor/animate/animate.css',
    'resources/assets/vendor/font-awesome/css/font-awesome.css',
], 'public/css/vendor.css', './');

mix.scripts([
    'resources/assets/vendor/metisMenu/jquery.metisMenu.js',
    // 'resources/assets/vendor/slimscroll/jquery.slimscroll.min.js',
    'resources/assets/vendor/pace/pace.min.js'
], 'public/js/vendor.js', './');

mix.version(['css/app.css', 'js/app.js']);

mix.livereload();
});