Vuejs зарегистрировать проблему компонента в laravel - PullRequest
Новая
       11

Vuejs зарегистрировать проблему компонента в laravel

0 голосов
/ 09 февраля 2020

Я зарегистрировал Приложение. vue в качестве основного компонента в Vue. js, но когда я использую его в Laravel blade-сервере, я получаю эту ошибку консоли 

[Vue warn]: Unknown custom element: <app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

это мой код в приложении. js

require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import routes from './routes'
import App from './App'

Vue.use(VueRouter);
Vue.use(Vuex);

const router = new VueRouter({
    routes,
    mode: history
});

Vue.config.devtools = true;

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

и мой клинок 

<div id="app">
    <App></App>
</div>

<script src="{{ asset('js/app.js') }}"></script>

это код I написать Приложение. vue

<template>
    <div class="app">

        <h1 class="display-4">Hello World from App.vue</h1>

        <router-view />

    </div>
</template>

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

Ответы [ 3 ]

0 голосов
/ 09 февраля 2020 
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

затем в вашем блейд-файле 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue SPA</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

также обязательно добавьте этот маршрут 

Route::get('/{any}', 'SpaController@index')->where('any', '.*');
0 голосов
/ 09 февраля 2020

приложение. js: 

    require('./bootstrap');
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import Vuex from 'vuex';
    import routes from './routes'
    import App from './App'

    Vue.use(VueRouter);
    Vue.use(Vuex);

    const router = new VueRouter({
        routes,
        mode: history
    });

    Vue.config.devtools = true;

    //import components
    Vue.component(
    'app',
    require('./components/App.vue').default);
    new Vue({
        router,
        render: h => h(App)
    }).$mount('#app');
0 голосов
/ 09 февраля 2020

Вы можете зарегистрировать компоненты следующим образом: 

Vue.component("Name", require("./components/Name.vue").default);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...