Question

我想渲染Vue.js代码，但不能在LARAVEL 5.7中使用

我的app.js代码：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('hello-world-component', require('./components/HelloWorld.vue'));

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

和新文件HelloWorld.vue：

<template>
  <div class="container">
    Hello Laravel + Vue!
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

and welcome.blade.php：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>
    </head>
    <body>
        <div class="content">
            <div class="title m-b-md">
                <hello-world-component></hello-world-component>
            </div>
        </div>
    </body>
</html>

当我运行此命令时，

sudo npm run dev

结果：

DONE  Compiled successfully in 6224ms                                                                   7:16:51 AM
       Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.38 MB       0  [emitted]  [big]  /js/app
/css/app.css   198 kB       0  [emitted]         /js/app

但是当我连接索引页面时，没有显示我的HelloWorld.Vue代码。

我不知道是什么问题？

Answer 1

您需要将一个ID为app的元素装入。例如：

html

<body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
</body>

js

const app = new Vue({
  el: '#app',
  template: '<hello-world-component></hello-world-component>'
});

Answer 2

正如DigitalDrifter所写，添加id="app"并添加到已编译的js资产的路径。

类似的东西（在</body>标记之前）。

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

控制台中的消息还可以为您提供一些进一步调试的线索。

Answer 3

将 id =“ app” 放入您的div

    <body>
        <div id="app" class="content">
            <div class="title m-b-md">
                <hello-world-component></hello-world-component>
            </div>
        </div>
    </body>

Answer 4

您没有在刀片中添加id应用

您还没有包含已编译的脚本文件

更新刀片服务器

let query = Constants.refs.databaseConvo.queryOrdered(byChild: "").queryEqual(toValue: username)
query.observe(.value, with: { (snapshot) in
    for childSnapshot in snapshot.children {
        print(childSnapshot)
    }
})

Vue.js + Laravel5.7“ Hello World”测试不起作用

4 个答案: