Question

我正在尝试使用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文件）。我在这里做什么错了？

Answer 1

从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

Answer 2

未引用您的HTML ID。

更改<div id=character-sheet> 到<div id="character-sheet">

Answer 3

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

...
<body>
  <master></master>
  <link rel="js" href="{{ asset('js/app.js') }}">
</body>
...

Laravel 5.7-Vue模板无法渲染

3 个答案: