首页 > 解决方案 > 为什么 Vue.js 在 Laravel 5.6 中没有显示任何内容?

问题描述

我已经按照 Laravel 5.6 中的这些步骤安装了 vue.js,并且所有其他依赖项都运行良好。只有 Vue.js 没有响应。

npm intall 
npm run dev
npm run watch

我正在分享我添加的所有代码。我在我的 html 文件中创建了一个 id="app" 。

<div id="app">
            <div class="container">
              <articles></articles>                  
            </div>

<!-- I used this link in my html file for connecting with app.js file 
  -->
 <script src="{{asset('js/app.js')}}"></script>

我编辑了如下的 app.js 文件。

require('./bootstrap');

    window.Vue = require('vue');


    Vue.component('articles', require('./components/Articles.vue')
    );

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

我还创建了 Articles.vue 文件并将其链接到 app.js。但是我的 html 页面什么也没显示。我在 components/Articles.Vue 中的文件

<template>

<h1>Hello World!</h1>

</template>

控制台显示没有错误 在此处输入图像描述

Vue 选项卡 在此处输入图像描述

当我检查 DOM 时,我得到了这个 在此处输入图像描述

这是 Vue 文件。它也没有显示任何标签 在此处输入图像描述

标签: laravelvue.js

解决方案


正如 ceejayoz 在评论中所说:将其重命名为例如 articleElement 并将其用作<article-element></article-element>


推荐阅读