Работа над SPA с использованием Vue 2.0. Я связываю все свои шаблоны с Webpack из файлов .vue через Laravel Elixir, laravel-elixir-webpack-official и laravel-elixir-vue-2. Я просмотрел почти все существующие вопросы по этому поводу, большинство из которых относятся к необходимости автономной сборки или двойному вызову функции elixir в вашем gulpfile, ни один из которых не применим, насколько я понимаю.
Полная ошибка консоли:
[Vue warn]: Failed to mount component: template or render function not defined.
(found in anonymous component at E:\dev\project\resources\assets\js\App.vue)
main.js:
import Vue from 'vue';
var VueResource = require('vue-resource');
Vue.use(VueResource);
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import { sync } from 'vuex-router-sync'
import store from './vuex/store';
import Home from './views/home.vue';
import Toast from './views/toast.vue';
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/toast',
name: 'toast',
component: Toast
}
]
const router = new VueRouter({
routes: routes
});
sync(store, router) // done.
import App from './App.vue'
new Vue({
name: 'app',
el: '#app',
store,
router,
render(h) {
return h(App)
}
});
App.vue:
<script>
// App.js
import Header from './components/Header.vue'
import Loading from './components/Loading.vue';
import Messenger from './components/Messenger.vue';
export default {
components: {
Header, Loading, Messenger
}
}
</script>
<template>
<div>
<header></header>
<router-view></router-view>
<loading></loading>
<messenger></messenger>
</div>
</template>
И сайт загружается через блейд-шаблон, очень просто:
<body>
<div id="app">
</div>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="/js/main.js"></script>
</body>
Учитывая все это, я почти уверен, что мне не нужна отдельная сборка. Может ли кто-нибудь помочь мне понять, что здесь не так?
Дополнительная информация
Если я открою Vue devtools, я увижу корневой компонент приложения. Под ним находится один анонимный компонент, на котором стоит $route. Вот и все.
Gulpfile
var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('elixir-tinypng');
require('laravel-elixir-webpack-official');
var env = require('./env.json');
elixir(function(mix) {
// Image optimization
if(env.tinyPngApiKey) {
mix.tinypng({
key:env.tinyPngApiKey,
sigFile:'.tinypng-sigs',
log:true,
summarize:true
});
// Copy all non compressible images to build
mix.copy('assets/img/*.!(png|jpg)', 'resources/img');
} else {
mix.copy('assets/img/*', 'resources/img');
}
mix.copy('node_modules/font-awesome/fonts', 'public/fonts')
.sass('app.scss')
.webpack('main.js')
.browserSync({
proxy: 'project.dev'
});
});
