我有一个基于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();
});