[Vue警告]:找不到元素:#app

sil*_*oxA 12 laravel vue.js laravel-5.3

我有一个全新安装的laravel项目,所有组件都已更新.

我所做的就是尝试添加app.js我的welcome.blade.php文件,添加以下后我得到了这个错误

[Vue警告]:找不到元素:#app

我遵循了这个主题,但由于我的脚本位于页面底部,因此无关紧要. https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work

这是我的档案

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{$project}} | {{ $title }}</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet" type="text/css"/>

    <style>
      ...
    </style>
    </head>
    <body class="sticky-nav">
    <div id="nav">
    <div class="display-sm">
        <header class="top-header">
            <span class="menu-icon">?</span>
        </header>
    </div>
        <div class="custom-container">
        <div id="logo" class="float-left">
            <img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
        </div>
        <div id="btn-project" class="float-right">
            <a title="project" href="#" class="btn btn-project">Project</a>
        </div>
    </div>
    </div>
    <div class="sub-container">
    <h1 id="header-title">{{ $header_title }}</h1>
    <h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
    <div class="clear"></div>

    </div>
    <script src="/js/app.js"></script>
    <script>
    var wrap = $(".sticky-nav");

    wrap.on("scroll", function (e) {

        if (this.scrollTop > 147) {
            wrap.find('#nav').addClass("fix-nav");
        } else {
            wrap.find('#nav').removeClass("fix-nav");
        }

        });
    </script>
    </body>
    </html>
Run Code Online (Sandbox Code Playgroud)

Ale*_*nin 22

错误说明了一切.Vue无法找到#app元素,因此您需要添加它:

<div id='app'></div>
Run Code Online (Sandbox Code Playgroud)

https://vuejs.org/v2/guide/

  • 这可能是由于脚本的执行顺序.尝试将脚本移动到页面底部 - 在您引用的html之后. (4认同)
  • 谢谢你的回答。它解决了这个问题,但我想知道,我什至不打算使用 Vue,为什么要添加额外的 div? (2认同)
  • @silverFoxA如果您不想使用`Vue`,那么只需从您的`bootstrap.js`文件中删除`require`,默认情况下`laravel`会添加它。 (2认同)