#php #laravel #vue.js #npm #npm-install
#php #laravel #vue.js #npm #npm-install
Вопрос:
Я попытался интегрировать Vue.js к Ларавелю. Однако я сталкиваюсь с одной проблемой. Хотя я все сделал правильно, но компоненты Vue не отображаются в моем блейде php.
Код для app.js:
/**
* 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('example', require('./components/Example.vue').default);
const app = new Vue({
el: '#app',
});
Все php-коды отлично работают в браузере, только компонент vue не может отображаться в моем браузере.
Код в моем contact-us.blade:
<div id="app">
<example></example>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
@extends('layout')
@section('content')
<section class="site-content">
<style>
#map_wrapper {
/*height: 300px;*/
clear: both;
}
#googleMap {
margin-top:0px!important;
/*width: 100%!important;*/
/*height: 100%!important;*/
}
</style>
@if(isset($result['site_key']))
<script src="https://www.google.com/recaptcha/api.js?render={{$result['site_key']}}"></script>
@endif
<div id="map_wrapper">
<div id="googleMap" style="width:100%;height:380px; margin-top:-30px; margin-bottom:30px; "></div>
</div>
<div class="container">
<div class="breadcum-area">
<div class="breadcum-inner">
<h3>@lang('website.Contact Us')</h3>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ URL::to('/')}}">@lang('website.Home')</a></li>
<li class="breadcrumb-item active">@lang('website.Contact Us')</li>
</ol>
</div>
</div>
<div class="contact-area">
<div class="heading">
<h2>@lang('website.Contact Us')</h2>
<hr>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-8">
@if(session()->has('success') )
<div class="alert alert-success">
{{ session()->get('success') }}
</div>
@elseif(session()->has('error') )
<div class="alert alert-danger">
{{ session()->get('error') }}
</div>
@endif
<form name="signup" class="form-validate" enctype="multipart/form-data" action="{{ URL::to('/processContactUs')}}" method="post">
<div class="form-group">
<label for="firstName">@lang('website.Full Name')</label>
<input type="text" class="form-control field-validate" id="name" name="name">
<span class="help-block error-content" hidden>@lang('website.Please enter your name')</span>
</div>
<div class="form-group">
<label for="inputEmail4" class="col-form-label">@lang('website.Email')</label>
<input type="email" class="form-control email-validate" id="inputEmail4" name="email">
<span class="help-block error-content" hidden>@lang('website.Please enter your valid email address')</span>
</div>
<div class="form-group">
<label for="subject" class="col-form-label">@lang('website.Message')</label>
<textarea type="text" class="form-control field-validate" id="message" rows="5" name="message"></textarea>
<span class="help-block error-content" hidden>@lang('website.Please enter your message')</span>
</div>
<div class="button">
<button type="submit" class="btn btn-dark">@lang('website.Send')</button>
</div>
<input type="hidden" id="token" name="token">
</form>
</div>
<div class="col-12 col-md-6 col-lg-4">
<ul class="contact-list">
@if(!empty(trim(settings('company_name'))) || !empty(trim(settings('company_registration_number'))))
<li> <i class="fa fa-id-card-o"></i><span>@if(!empty(trim(settings('company_name')))){{settings('company_name')}}@endif @if(!empty(trim(settings('company_registration_number'))))({{settings('company_registration_number')}})@endif</span> </li>
@endif
<li> <i class="fa fa-map-marker"></i><span>{{settings('address')}} {{settings('city')}} {{settings('state')}}, {{settings('zip')}} {{settings('country')}}</span> </li>
@if(!empty(settings('phone_no')))
<li> <i class="fa fa-phone"></i><span>{{settings('phone_no')}}</span> </li>
@endif
@if(!empty(settings('contact_us_email')))
<li> <i class="fa fa-envelope"></i><span> <a href="mailto:{{settings('contact_us_email')}}">{{settings('contact_us_email')}}</a> </span> </li>
@endif
</ul>
</div>
</div>
</div>
</div>
@if(isset($result['site_key']))
<script>
grecaptcha.ready(function() {
grecaptcha.execute('{{$result['site_key']}}', {action: 'homepage'}).then(function(token) {
document.getElementById("token").value=token;
});
});
</script>
@endif
</section>
@endsection
Для файла vue я не вносил в него никаких изменений, он создается по умолчанию при создании проекта laravel.
Код, например.vue:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component! testing
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Я попробовал некоторые из решений, которые я нашел в Google, например, используя команды, которые я перечислил ниже, но, к сожалению, ни одна из них не работает.
npm install
npm update
del package-lock.json
rd /s /q node_modules
npm cache clear --force
Кто-нибудь обнаружил ошибку, которую я допустил здесь? Заранее спасибо.
Комментарии:
1. Вы регистрируете компонент ‘example’ только в своем app.js файл, начинающийся с Vue.component(‘example’…. Обычно там есть раздел кода, который закомментирован, но если вы его раскомментируете, он будет глобально регистрировать все компоненты Vue для вас.
Ответ №1:
Замените этот код
Vue.component('example', require('./components/Example.vue').default);
с помощью следующего кода
const files = require.context('./', true, /.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
может сработать.
Ответ №2:
Просто попробуйте npm run dev amp;amp; npm run hot .
Убедитесь, что ваш компонент правильно зарегистрирован.
Проверьте свою консоль.