Laravel a-t-il vue intégré ?

Laravel n'a pas de vue intégrée ; laravel est un framework de développement de programmes Web écrit en langage PHP, et vue est un framework JavaScript open source utilisé pour créer des interfaces utilisateur. Vue peut être déployée dans laravel, mais il n'y a pas de vue intégrée. en vue dans Laravel.

L'environnement d'exploitation de cet article : système Windows 10, Laravel version 9, ordinateur Dell G3.

Laravel a-t-il vue intégré ?

Laravel est un framework de développement de programmes Web écrit en langage PHP. Il vise à fournir aux développeurs des composants communs et à simplifier le développement de programmes Web. En écrivant moins de code, vous pouvez obtenir des fonctionnalités difficiles à réaliser avec d'autres langages ou frameworks de programmation. Les programmeurs PHP expérimentés constateront que Laravel rend le développement de programmes plus amusant.

vue est un framework JavaScript open source pour créer des interfaces utilisateur et un framework d'application Web pour créer des applications d'une seule page. Le cœur de Vue est la couche d'affichage dans le modèle MVC. En même temps, il peut également obtenir facilement des données. mises à jour. Et réalisez l’interaction entre la vue et le modèle via des méthodes spécifiques à l’intérieur du composant.

Laravel

Laravel est un framework d'application Web expressif avec une syntaxe concise. Nous pensons que le processus de développement doit être une expérience agréable et créative. Laravel s'efforce de réduire les désagréments pendant le processus de développement, c'est pourquoi nous fournissons des outils ou des fonctions fréquemment utilisés dans le processus de développement, tels que l'authentification, le routage, les sessions et la mise en cache.

L'objectif de Laravel est de créer un processus de développement agréable pour les développeurs sans sacrifier les fonctionnalités de l'application. Des développeurs heureux créent le meilleur code. À cette fin, nous avons tiré parti des avantages de divers frameworks et les avons concentrés dans Laravel. Ces frameworks incluent, sans s'y limiter, Ruby on Rails, ASP.NET MVC et Sinatra.

vue

Vue.js (/vjuː/, ou simplement Vue) est un framework JavaScript open source pour créer des interfaces utilisateur et un framework d'application Web pour créer des applications d'une seule page. Une enquête JavaScript de 2016 a montré que Vue avait un taux de satisfaction des développeurs de 89 %. Sur GitHub, le projet reçoit en moyenne 95 étoiles par jour, ce qui en fait le troisième projet le plus étoilé de l'histoire de Github.

Vue.js est un framework frontal JavaScript populaire conçu pour mieux organiser et simplifier le développement Web. L'objectif principal de Vue est la couche de vue dans le modèle MVC. En même temps, il peut également facilement obtenir des mises à jour des données et réaliser l'interaction entre la vue et le modèle via des méthodes spécifiques au sein du composant.

Comment déployer vue dans Laravel

Créer Laravel

Tout d'abord, vous avez besoin d'un compositeur, puis vous avez un Laravel. Exécutez la commande composer create-project --prefer-dist laravel/laravel blog pour créer un nouveau projet laravel (veuillez vous rendre sur le site officiel pour savoir comment créer spécifiquement Laravel).

Bonjour tout le monde !

Ouvrez la ligne de commande et entrez le blog cd de votre projet

Avant de commencer, pour diverses raisons que vous connaissez, npm, en tant qu'outil d'installation d'entrepôt de nœuds étrangers, peut être lent pendant le fonctionnement. Il est généralement recommandé d'utiliser la source taobao pour l'accélération. Ajoutez simplement le suffixe au code suivant. Téléchargez les dépendances par défaut du projet.

npm install  --registry=https://registry.npm.taobao.org

Téléchargez la gestion du routage de vue, le code est le suivant.

npm install vue-router --save-dev

Créez un nouveau fichier de composant personnalisé HelloComponent.vue dans /resources/assets/js/components, le code est le suivant.

<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

Créez un nouveau routeur de dossier sous /resources/assets/js, créez-y hello.js et mappez la route hello au composant HelloComponent nouvellement créé via une configuration de routage imbriquée. Le code est le suivant.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: '/',
            component: resolve =>void(require(['../components/HelloComponent.vue'], resolve))
        },
    ]
})

Créez un nouveau hello.vue sous /resources/assets/js dans le projet laravel actuel comme interface principale et vue de routage imbriquée. Le code est le suivant.

<template>
    <div>
        <h1>Hello</h1>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

Ensuite, créez hello.js sous /resources/assets/js, le code est le suivant.

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './hello.vue'
import router from './router/hello.js'
const app = new Vue({
    el: '#app',
    router,
    render: h=>h(App)
});

Créez un nouveau hello.blade.php sous /resources/views avec le code suivant.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Hello</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix(&#39;js/manifest.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/vendor.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/hello.js&#39;) }}"></script>
</body>
</html>

Ajoutez une nouvelle route dans /resources/routes/web.php, le code est le suivant.

Route::view('/hello','/hello');

Modifiez webpack.mix.js, le code est le suivant.

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/hello.js', 'public/js')
   .extract(['vue', "vue-router", "axios"])
   .sass('resources/assets/sass/app.scss', 'public/css');

Après l'enregistrement, exécutez npm run watch dans le répertoire du projet sur la ligne de commande pour recompiler

Vous pouvez entrer php artisan serve dans le répertoire du projet sur la ligne de commande et visiter http://127.0.0.1:8000/hello. . Vous pouvez voir l'effet

Laravel 5.5 a ajouté les méthodes Route::view et Route::redirect Les routes pour 5.4 et versions antérieures peuvent être écrites comme ceci Route::get('/hello', function () {return view(. 'bonjour');});

【Recommandation associée : tutoriel vidéo laravel】

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!