Vue 组件未显示 (Laravel 5.3)
Vue component not showing (Laravel 5.3)
我正在尝试在 Laravel 5.3 上设置 Passport,但 Vue 组件似乎没有出现在 blade。
这是我的 blade:
的代码
@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,并且正在我的 blade 中加载 <script src="{{asset('js/vue.min.js')}}"></script>
和 <script src="{{asset('js/app.js')}}"></script>
。
提前致谢。
A vue-js vm requires a root element to work on。在问题中,根元素 id 是 "app":
const app = new Vue({
el: '#app'
});
但它在页面的 HTML 中丢失了。如评论中所示,添加 <div id="app">...</div>
容器解决了问题。
在我的例子中,我必须 运行 在 cli 中执行以下命令:
npm install
npm run production
我正在尝试在 Laravel 5.3 上设置 Passport,但 Vue 组件似乎没有出现在 blade。
这是我的 blade:
的代码@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,并且正在我的 blade 中加载 <script src="{{asset('js/vue.min.js')}}"></script>
和 <script src="{{asset('js/app.js')}}"></script>
。
提前致谢。
A vue-js vm requires a root element to work on。在问题中,根元素 id 是 "app":
const app = new Vue({
el: '#app'
});
但它在页面的 HTML 中丢失了。如评论中所示,添加 <div id="app">...</div>
容器解决了问题。
在我的例子中,我必须 运行 在 cli 中执行以下命令:
npm install
npm run production