Laravel 5.7-vue模板无法呈现

问题描述 投票:1回答:3

我正在尝试使用Vue设置Laravel,但由于某种原因,目前没有任何显示。

这是我的代码:

主布局文件(main.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />

        <title>Pathfinder Character Sheet</title>

        <link href="{{ asset('css/app.css') }}"/ rel="stylesheet">
        <link href="{{ asset('css/light-bootstrap-dashboard.css') }}" rel="stylesheet">

        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet">
        <link rel="stylesheet" href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet">
    </head>
    <body>
        <div id=character-sheet>
            <master></master>
        </div>
        <link rel="js" href="{{ asset('js/app.js') }}">
    </body>
</html>

app.js文件

import Vue from 'vue'
import Master from './components/layout/Master'

require('./bootstrap');
require('./light-bootstrap-dashboard');

window.Event = new Vue()
window.Vue   = Vue

const app = new Vue({
    el: '#character-sheet',
    components: {
        Master
    },
    template: '<Master/>',
});

Master.vue

<template>
    <div class="wrapper" id="character-sheet">

        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt excepturi, ex exercitationem laborum beatae nostrum molestiae inventore eos amet ut debitis nam accusamus illum ipsa soluta ipsam officiis doloremque rerum.</span>

    </div>
</template>

<script>

export default {
    name: "Master"
}
</script>

我没有收到任何错误,只是一个空白屏幕(已加载app.js文件)。我在这里错了吗?

laravel vue.js laravel-5.7
3个回答
0
投票

从Master.vue移除id =“ character-sheet”

app.js

中,使用方式如下.....
Vue.component('master', require('./components/layout/Master.vue').default);

const app = new Vue({
el: '#character-sheet' });

运行命令:npm run dev


0
投票

未引用您的HTML ID。


0
投票

id必须是唯一的,您要将两个具有相同id的元素嵌套。尝试不要将组件放在该标签内。

© www.soinside.com 2019 - 2024. All rights reserved.