Question

我现在正在将Vue-Apollo集成到Laravel项目中。我能够使Vue正常运行。现在，我正在尝试集成Apollo，但无法正常工作。我感觉好像缺少了一些非常简单的东西，但找不到它。这是我的App组件：

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

我的刀片模板：

@extends('layouts.app')

@section('content')
    <div id="app">
        <div class="container">
            <div class="row justify-content-center">
                <App>
                    <h1>Here</h1>
                    <manufacturers-component></manufacturers-component>
                    <product-groups-component></product-groups-component>
                    <products-component></products-component>
                </App>
            </div>
        </div>
    </div>
@endsection

最后，我的JS实例化了Vue：

require('./bootstrap');


import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

import App from './components/App'

Vue.component('manufacturers-component', require('./components/ManufacturersComponent.vue'));
Vue.component('product-groups-component', require('./components/ProductGroupsComponent.vue'));
Vue.component('products-component', require('./components/ProductsComponent.vue'));

 const httpLink = new HttpLink({
     uri: 'http://homestead.test/graphql'
 })

 const apolloClient = new ApolloClient({
     link: httpLink,
     cache: new InMemoryCache()
 })

 Vue.use(VueApollo)

 const apolloProvider = new VueApollo({
     defaultClient: apolloClient
 })

 const vue_app = new Vue({
    el: '#app',
    components: { App },
    apolloClient,
    render: h => h(App)
 });

问题是它确实短暂地安装了App组件，我看到重新加载页面时出现了h1内容的闪烁，但随后变为空白。没有错误弹出，我已经完成了加载过程，找不到任何错误的内容。也不会引发任何错误。

Answer 1

刀片文件中的HTML在安装后将被App组件的内容替换，因此外观简短，随后出现白页。将标记从刀片文件移到您的App组件中：

App.vue

<template>
  <div class="container">
     <div class="row justify-content-center">
        <h1>Here</h1>
        <manufacturers-component></manufacturers-component>
        <product-groups-component></product-groups-component>
        <products-component></products-component>
     </div>
  </div>
</template>
<script>
    export default {
        name: 'app',
    }
</script>

index.blade.php

@extends('layouts.app')

@section('content')
    <div id="app"></div>
@endsection

Vue Apollo实例选项问题，无法正确配置

1 个答案: