Vue组件未显示（Laravel 5.3）答案

【问题标题】：Vue component not showing (Laravel 5.3)Vue组件未显示（Laravel 5.3）
【发布时间】：2017-06-12 09:56:44
【问题描述】：

我正在尝试在 Laravel 5.3 上设置 Passport，但 Vue 组件似乎没有出现在刀片中。

这是我的刀片的代码：

@extends('connect.frame')

@section('title')
    API Settings - KHConnect
@endsection

@section('header')
    <!-- Page Header -->
    <div class="content page-header" style="margin-bottom: 2em;">
        <div class="container">
            <h1 style="padding-top: 0.5em;font-size: 4em;">KHConnect</h1>
        </div>
    </div>
@endsection

@section('body')
    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <div class="row">
        <passport-clients></passport-clients>
        <passport-authorized-clients></passport-authorized-clients>
        <passport-personal-access-tokens></passport-personal-access-tokens>
    </div>
@endsection

这是我的 app.js 中的代码：

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

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

我已经运行 gulp 并安装了 Laravel Elixir，并且正在我的刀片中加载 <script src="{{asset('js/vue.min.js')}}"></script> 和 <script src="{{asset('js/app.js')}}"></script>。

提前致谢。

【问题讨论】：

组件模板是否加载正确？
我刚刚从官方 Laravel 文档 @keksnicoh 直接关注文档。它们都指向存在的文件。
在编译好的app.js中能找到吗？还是在页面的 HTML 中？ Chromes 开发者控制台对此有何评论？
@keksnicoh 在开发控制台上得到这个：vue.js?3de6:525 [Vue warn]: Cannot find element: #app
哦，你有定义#app 的元素吗？如果不确定，请尝试使用<div class="row" id="app"> 看看会发生什么

标签： php laravel vue.js laravel-passport

【解决方案1】：

A vue-js vm requires a root element to work on。在问题中，根元素 id 是“app”：

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

但是页面的 HTML 中缺少它。添加 <div id="app">...</div> 容器解决了 cmets 中看到的问题。

【讨论】：

【解决方案2】：

就我而言，我必须在 cli 中运行以下命令：

npm install
npm run production

【讨论】：