Vue组件未在Laravel中显示 [英] Vue component not showing in laravel
本文介绍了Vue组件未在Laravel中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我尝试将jquery迁移到vue框架，我将laravel 5.6与webpack一起使用来构建项目，但我的vue组件未显示.
So I'm trying to migrate my jquery to vue framework instead, I'm using laravel 5.6 with webpack to build my project but my vue components are not showing up.
当我运行命令npm run dev时，我成功地构建了项目:
when I run command npm run dev I succesfully build the project:
此后，我使用php artisan服务在浏览器中显示网络，但没有显示任何组件.
After that I use php artisan serve to show the web in my browser wich it does but NONE of the components show up.
当我检查源代码时，这就是组件呈现的内容:
When I check source code this is what the component renders :
但是由于某些原因我看不到该组件?
but for some reason I can't see the component?
这是我的app.js文件:
This is my app.js file:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
/*
require('./bootstrap');
*/
window.Vue = require('vue');
/**
* 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('related-post-list', require('./components/RelatedPostList.vue'));
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
我的webpack文件:
My webpack file:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
引导文件
window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
let ajaxEncoding = 'multipart/form-data';
console.log("'Ajax encoding is ${ajaxEncoding}'");
axios.defaults.headers.post['Content-Type'] = ajaxEncoding;
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
console.log('CSRF token found');
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
我的组件:
<template>
<div class="sidebar_related_container" style="">
<span class="sidebar_related_title" style="">Temas Relacionados</span>
<div class="sidebar_related_content_container" v-for="post in relatedPosts" :key="post.id" style="">
<a class="sidebar_related_content_image" :href="'/conducta-canina/${post.slug}'" :style="'background-image:url(${post.slug});'">
<div class="black_gradient" style=""></div>
</a>
<div class="sidebar_related_content_text_container" style="">
<span class="sidebar_related_content_text_title" style="">{{ post.postcategory.name }}</span>
<span class="sidebar_related_content_text_description" style="">{{ post.title }}</span>
</div>
</div>
</div>
</template>
<!--SCRIPTS-->
<script>
export default
{
name: 'RelatedPostList',
props: {
post: {required:true}
},
data: function () {
return {
relatedPosts: null,
id: this.post.id,
category : this.post.postcategory.name
}
},
mounted () {
console.log("'${this.$options.name} component succesfully mounted'");
axios.post("/posts/related", this.id, this.category)
.then(response => (this.relatedPosts = response.data.relatedPosts))
.catch(error => console.log(error));
},
methods: {
},
}
</script>
<!--STYLES-->
<style scoped>
.sidebar_related_container{width:100%; height:auto; display:flex; flex-direction:column;}
.sidebar_related_title{width:100%; height:75px; font-size:16px; color:#454545; font-weight:600; display:flex; align-items:center;}
.sidebar_related_content_container{width:100%; height:auto; display:flex; flex-direction:column; margin:15px 0px;}
.sidebar_related_content_image{width:100%; height:180px; box-shadow:2px 2px 2px rgba(0,0,0,0.2); position:relative; background-size:cover; margin-bottom:3px;}
.sidebar_related_content_text_container{width:100%; height:30%; display:flex; flex-direction:column;}
.sidebar_related_content_text_title{font-size:15px; color:var(--main_color); font-weight:900; margin:5px 0px;}
.sidebar_related_content_text_description{font-size:13px; color:rgba(0,0,0,0.7); font-weight:500; margin:5px 0px; line-height:20px;}
@media only screen and (max-width: 736px)
{
.sidebar_container{width:100%; height:auto; padding-left:0px; padding-bottom:0px; padding-top:20px; position:relative;}
.sidebar_stripe_white{width:15px; height:40px; background-color:white; position:absolute; top:0px; left:-10px; display:none;}
.sidebar_related_container{width:100%; height:auto; display:flex; flex-direction:column; }
.sidebar_related_title{width:100%; height:auto; font-size:16px; color:#454545; font-weight:600; display:flex; align-items:center; margin:15px 0px;}
.sidebar_related_content_container{width:100%; height:auto; display:flex; flex-direction:column; align-items:center; margin:15px 0px;}
.sidebar_related_content_image{width:100%; height:155px; box-shadow:2px 2px 2px rgba(0,0,0,0.2); position:relative; background-size:cover; margin-bottom:3px;}
.sidebar_related_content_text_container{width:100%; height:20%; display:flex; flex-direction:column;}
.sidebar_related_content_text_title{font-size:15px; color:var(--main_color); font-weight:900; margin:5px 0px;}
.sidebar_related_content_text_description{font-size:13px; color:rgba(0,0,0,0.7); font-weight:500; margin:5px 0px; line-height:20px;}
}
</style>
还有我的刀片模板:
<div class="sidebar_container" style="">
<div class="sidebar_stripe_white" style=""></div>
<related-post-list :post="@json($classPost)"></related-post-list>
<!--<example-component></example-component>-->
<!--@include('partials/sidebar/contact_form')-->
</div>
此文件位于我的主布局中，其中body标签具有"app"标识符:
this file is inside my master layout where the body tag has "app" identifier:
<body id="app" class="">
//sidebar
</body>
推荐答案
，您必须加载/resources/js/app.js文件.将其放入您的< head></head> 标记
you have to load your /resources/js/app.js file.
put this inside your <head></head> tag
<script src="{{ asset('js/app.js') }}" defer></script>
这篇关于Vue组件未在Laravel中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
