Les versions Laravel 7 et antérieures incluent Vue.js par défaut, mais de Laravel 8, vous devez l'intégrer manuellement; 2. Pour configurer Vue 3, installez les plugins Vue et Vite, configurez Vite.config.js, mettez à jour App.js pour utiliser CreateApp et utilisez @Vite dans les modèles de lame; 3. Vue communique avec Laravel via des routes API qui renvoient JSON, récupéré en utilisant Fetch ou Axios dans les composants; 4. Les meilleures pratiques incluent l'utilisation de Laravel Sanctum pour l'authentification, le maintien des composants modulaires, le choix entre le rendu hybride et les spas, et l'utilisation de Vite pour les constructions modernes - Laravel gère le backend tandis que Vue gère l'interactivité dynamique du frontend dans une puissante combinaison complète.
L'utilisation de Vue.js avec Laravel est une combinaison commune et puissante - Laravel gère le backend (rendu API ou c?té serveur), tandis que Vue.js gère le frontage avec des UIS réactifs basées sur des composants. Voici comment le configurer et les utiliser efficacement ensemble.
1. Laravel est livré avec Vue.js par défaut (versions héritées)
Dans Laravel Versions 7 et plus t?t, Vue.js a été inclus comme échafaudage frontal par défaut. Alors que Laravel 8 s'est déplacé vers plus d'agnostiques de framework (supprimant les préréglages frontaux par défaut), vous pouvez toujours intégrer facilement Vue.
Si vous utilisez une ancienne version Laravel ou Vue ajoutée manuellement:
- Laravel utilise WebPack (via Laravel Mix) pour compiler les actifs.
- Le point d'entrée principal est généralement
resources/js/app.js - Les composants Vue vont en
resources/js/components/.
Pour commencer:
# Installer les dépendances Installation de NPM # Installer Vue (s'il n'est pas déjà présent) NPM Installer vue@^2.6 # pour Vue 2 # OU NPM Installer vue@^3.0 # pour Vue 3
Ensuite, activez Vue dans resources/js/app.js :
Importer Vue à partir de ?vue?;
Importer ExampleComponent depuis './components/examplecomponent.vue';
const app = new Vue ({
El: '#App',
Composants: {
Composant example
}
}); Et dans votre fichier de lame ( resources/views/welcome.blade.php ):
<div id = "app">
<EXEL-COMPOINT> </ Exampant-composant>
</div>
<script src = "{{mix ('js / app.js')}}"> </ script>Compiler les actifs:
NPM Run Dev # ou NPM Run Watch # pour les mises à jour en temps réel
2. Configurez Vue 3 avec Laravel (configuration manuelle)
étant donné que Laravel ne comprend plus Vue par défaut, voici comment configurer manuellement Vue 3 .
étape 1: Installez Vue 3 et Laravel Mix
NPM Install Vue @ Suivant Installation de NPM --Save-Dev @ Vitejs / Plugin-Vue
Remarque: les nouveaux projets Laravel utilisent Vite par défaut au lieu de WebPack. Utilisez des plugins Vite pour de meilleures performances.
étape 2: Configurez VITE (si vous utilisez Laravel 9)
Mettre à jour vite.config.js :
import {DefinConfig} de 'Vite';
Importer Laravel de ?Laravel-vite-Plugin?;
Importer Vue à partir de '@ vitejs / plugin-vue';
Exporter de défaut DefiConfig ({
Plugins: [
Laravel ({
Entrée: ['Resources / CSS / App.css', 'Resources / JS / App.js'],
actualiser: vrai,
}),
vue ({
modèle: {
TransformAsseturls: {
base: null,
InclutAbsolute: False,
},
},
}),
],
}); étape 3: Mettre à jour resources/js/app.js
import {createApp} de 'vue';
Importer ExampleComponent depuis './components/examplecomponent.vue';
createApp (exampleComponent) .mount ('# app');étape 4: Utiliser dans le modèle de lame
<! Doctype html>
<html>
<adal>
<Title> Vue avec Laravel </Title>
@vite ('Resources / CSS / App.css')
</ head>
<body>
<div id = "app"> </ div>
@vite ('Resources / js / app.js')
</docy>
</html>Exécuter le serveur de développement:
NPM Run Dev
3. Communiquer avec Laravel Backend (API)
Vue récupère généralement les données de Laravel via les routes API.
Créez une route API dans Laravel ( routes/api.php ):
Utilisez App \ Http \ Controllers \ PostController; Route :: Get ('/ Posts', [PostController :: Class, 'index']);
Renvoyez JSON du contr?leur:
Class Post-contr?leur étend le contr?leur
{
Index de fonction publique ()
{
return réponse () -> json (post :: all ());
}
}Répondre dans la composante Vue:
<mpelate>
<div>
<h1> Posts </h1>
<ul>
<li v-for = "Post in Posts": key = "post.id"> {{post.title}} </li>
</ul>
</div>
</ template>
<cript>
Exporter par défaut {
données() {
retour {
Posts: []
}
},
asynchronisé monté () {
const Response = attendre fetch ('/ api / poteaux');
this.posts = attendre réponse.json ();
}
}
</cript>Pour une manipulation HTTP plus robuste, utilisez Axios:
NPM Install Axios
importer axios à partir de ?Axios?; // Dans votre méthode de composant const Response = attendre axios.get ('/ api / poteaux'); this.posts = réponse.data;
4. meilleures pratiques et conseils
- Utilisez Laravel Sanctum pour l'authentification de l'API si votre application VUE a besoin de connexion utilisateur.
- Gardez les composants Vue modulaires et réutilisables.
- Utilisez le routeur Vue (pour les spas) ou collez avec le rendu hybride Blade Vue en fonction de la structure de votre application.
- Pour les plus grandes applications, envisagez un frontend séparé (par exemple, nuxt.js ou autonome Vue) communiquant via l'API.
- Utilisez les directives
@viteau lieu demix()lors de l'utilisation de Vite.
Résumé
- Laravel fournit le backend et le pipeline d'actifs.
- Vue.js améliore le frontend avec des composants dynamiques.
- Utilisez VITE (moderne) ou Laravel Mix (Legacy) pour compiler Vue.
- Communiquez via des routes API renvoyant JSON.
- Mélanger les modèles de lame avec Vue pour les applications hybrides, ou allez à Spa complet.
Fondamentalement, Laravel est une API ou un rendu de page backend, et Vue reprend l'interactivité - un combo solide pour les applications complètes.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Création de règles de validation personnalisées dans un projet Laravel
Jul 04, 2025 am 01:03 AM
Il existe trois fa?ons d'ajouter des règles de validation personnalisées dans Laravel: en utilisant les fermetures, les classes de règles et les demandes de formulaire. 1. Utilisez les fermetures pour être adaptées à la vérification légère, comme empêcher le nom d'utilisateur "admin"; 2. Créez des classes de règles (telles que ValidUsernamerule) pour rendre la logique complexe plus claire et maintenable; 3. Intégrer plusieurs règles dans les demandes de formulaire et gérer de manière centralisée la logique de vérification. Dans le même temps, vous pouvez définir des invites via des méthodes de messages personnalisés ou des réseaux de messages d'erreur entrants pour améliorer la flexibilité et la maintenabilité.
Ajout d'un support multilingue à une application Laravel
Jul 03, 2025 am 01:17 AM
Les méthodes de base pour les applications Laravel pour implémenter le support multilingue comprennent: la définition des fichiers linguistiques, la commutation de langage dynamique, le routage des URL de traduction et la gestion des clés de traduction dans les modèles de lame. Tout d'abord, organisez les cha?nes de chaque langue dans les dossiers correspondants (tels que EN, ES, FR) dans le répertoire / Resources / Lang, et définissez le contenu de traduction en renvoyant le tableau associatif; 2. Traduire la valeur de clé via l'appel de fonction d'assistance \ _ \ _ () et utilisez l'application :: setLocale () pour combiner des paramètres de session ou de routage pour réaliser la commutation du langage; 3. Pour les URL de traduction, les chemins peuvent être définis pour différentes langues via des groupes de routage préfixés ou par voie d'alias dans les fichiers linguistiques mappés dynamiquement; 4. Gardez les touches de traduction concises et
Travailler avec des tables de pivot dans Laravel plusieurs à plusieurs relations
Jul 07, 2025 am 01:06 AM
TOWORKEFFECTECTEMENTSWitHPivottablesInLaravel, FirstAccessPivotDatauSingWithPivot () Orwithtimestamps (), ThepDateEntrieswitHupDateExistPivot (), ManagerLeshipSviaDeTache
Envoi différents types de notifications avec Laravel
Jul 06, 2025 am 12:52 AM
LaravelprovidesAcleanAndFlexiblewayToSendNotificationsViamultipleChannelsLikeEmail, SMS, In-Appakets, andpushNotifications.youdefinenotificationChannelsInthevia () MethodofanotificationClass, ANDIDEFINENOTIFICATIONSECHETHODSLIKETOMAIL (), ToDatabase (), Ortovonage
Comprendre et créer des fournisseurs de services personnalisés à Laravel
Jul 03, 2025 am 01:35 AM
ServiceProvider est le mécanisme de base utilisé dans le cadre Laravel pour l'enregistrement des services et l'initialisation de la logique. Vous pouvez créer un ServiceProvider personnalisé via la commande Artisan; 1. La méthode de registre est utilisée pour lier les services, enregistrer des singletons, définir des alias, etc., et d'autres services qui n'ont pas encore été chargés ne peuvent pas être appelés; 2. La méthode de démarrage s'exécute après que tous les services sont enregistrés et sont utilisés pour enregistrer les écouteurs d'événements, afficher les synthétiseurs, middleware et autres logiques qui dépend d'autres services; Les utilisations courantes incluent les interfaces et les implémentations de liaison, l'enregistrement des fa?ades, le chargement des configurations, l'enregistrement des instructions de ligne de commande et des composants de vue; Il est recommandé de centraliser les liaisons pertinentes à un ServiceProvider pour gérer et de faire attention à l'enregistrement
Gestion des exceptions et des erreurs de journalisation dans une application Laravel
Jul 02, 2025 pm 03:24 PM
Les méthodes de base pour gérer les exceptions et les erreurs d'enregistrement dans les applications Laravel incluent: 1. Utilisez la classe App \ Exceptions \ Handler pour gérer de manière centralisée les exceptions non gérées, et enregistrer ou notifier les informations d'exception via la méthode Report (), telles que l'envoi de notifications Slack; 2. Utilisez Monolog pour configurer le système de journal, définissez le niveau de journal et la méthode de sortie dans config / logging.php et activer les journaux d'erreur et supérieurs à l'environnement de production. Dans le même temps, des informations d'exception détaillées peuvent être enregistrées manuellement dans report () en combinaison avec le contexte; 3. Personnalisez la méthode Render () pour retourner une réponse d'erreur de format JSON unifié, améliorant l'efficacité de collaboration de l'extrémité avant et arrière de l'API. Ces étapes sont
Comprendre l'injection de dépendance à Laravel?
Jul 05, 2025 am 02:01 AM
L'injection de dépendance gère automatiquement les dépendances de classe via des conteneurs de service dans Laravel sans de nouveaux objets manuels. Son noyau est l'injection de constructeur et l'injection de méthode, comme le passage automatiquement de l'instance de demande dans le contr?leur. Laravel analyse les dépendances via des invites de type et crée récursivement les objets requis. L'interface de liaison et l'implémentation peuvent être utilisées par le fournisseur de services pour utiliser la méthode Bind, ou singleton pour lier un singleton. Lorsque vous l'utilisez, vous devez vous assurer des invites de type, éviter les complications du constructeur, utiliser les liaisons contextuelles avec prudence et comprendre les règles d'analyse automatique. La ma?trise peut améliorer la flexibilité et la maintenance du code.
Stratégies pour optimiser les performances de l'application Laravel
Jul 09, 2025 am 03:00 AM
L'optimisation des performances de Laravel peut améliorer l'efficacité de l'application à travers quatre directions de base. 1. Utilisez le mécanisme de cache pour réduire les requêtes en double, stocker rarement la modification des données via Cache :: Remember () et d'autres méthodes pour réduire la fréquence d'accès à la base de données; 2. Optimiser la base de données de la requête du modèle aux requêtes, évitez les requêtes N 1, spécifiant les requêtes de champ, ajoutant des index, pagination de traitement et de lecture et de séparation d'écriture et réduire les goulots d'étranglement; 3. Utilisez des opérations longues telles que l'envoi d'e-mails et l'exportation de fichiers vers le traitement asynchrone de file d'attente, utilisez le superviseur pour gérer les travailleurs et configurer des mécanismes de réessayer; 4. Utilisez raisonnablement les fournisseurs de middleware et de services pour éviter une logique complexe et un code d'initialisation inutile et retarder le chargement des services pour améliorer l'efficacité du démarrage.
