Maison > Article > interface Web > Comment installer la version Inertia Vue3 dans Laravel

Comment installer la version Inertia Vue3 dans Laravel

WBOYavant: 2023-05-15 10:31:051021parcourir

1. Exigences de pré-installation

1.1 Framework Laravel installé
1.2 Node JS installé
1.3 Outil de gestion de packages Npm installé

2. Configuration du serveur

2.1 La première étape : composer installe inertia-laravel

$ composer require inertiajs/inertia-laravel

2.2 La deuxième étape#🎜 🎜# : Ajoutez le fichier app.blade.php au répertoire laravel ressources/views/ et ajoutez le code suivant

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <link href="{{ mix(&#39;/css/app.css&#39;) }}" rel="stylesheet"/>
        <script src="{{ mix(&#39;/js/app.js&#39;) }}" defer></script>
    </head>
    <body>
        @inertia    </body></html>

2.3 Étape 3 : Exécutez la commande artisan et ajoutez un middleware # 🎜🎜#

$ php artisan inertia:middleware

Une fois le fichier généré, ajoutez manuellement la dernière ligne du groupe middleware Web dans le fichier Kernel

&#39;web&#39; => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,],

3. Configuration du client

# 🎜 🎜#3.1 Étape 1

: Utilisez la commande npm pour installer les dépendances du framework front-end et installez la version VUE3.

$ npm install @inertiajs/inertia @inertiajs/inertia-vue3

3.2 Étape 2

: Initialisez l'application

Ouvrez /resouces/js/app.js, effacez-le et écrasez le code suivant

import { createApp, h } from &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },})

#🎜 🎜#3.3 La troisième étape
: npm install progress bar package

Le navigateur ne rafraîchira pas la page créée par inertie Pour la perception de l'utilisateur, une barre de progression conviviale en haut de la page. La page est ajoutée. Conseils [Pensez-y]

$ npm install @inertiajs/progress

Une fois l'installation terminée, importez et initialisez, ouvrez /resouces/js/app.js, effacez-le et écrasez le code suivant

import { createApp, h } from &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;import { InertiaProgress } from &#39;@inertiajs/progress&#39;createInertiaApp({
    resolve: name => import(`./Pages/${name}`),
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .use(plugin)
            .mount(el)
    },})InertiaProgress.init()

#🎜🎜 #3.4 Étape 4

Utilisez la configuration Webpack suivante pour forcer le navigateur à charger de nouvelles ressources après la mise à jour du fichier au lieu d'utiliser le cache.

Ouvrez webpack.mix.js, effacez et écrasez le code suivant

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

Quatrièmement, installez VUE
Première étape

Utilisez npm Commande pour installer la dernière version stable de vue

$ npm install vue@next

La deuxième étape Ajouter .vue() à webpack.mix.js

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .vue()
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

# 🎜🎜# La troisième étape

Exécuter la commande npm

$ npm run watch

Si une erreur est signalée

#🎜 🎜#

Solution : Mettez à niveau vue-loader, exécutez

$ npm i vue-loader

Si une erreur est toujours signalée

laravel怎么安装inertia vue3的版本

# 🎜🎜#

Solution : Ajoutez un dossier Pages sous le répertoire ressources/js.

Statut de réussite

laravel怎么安装inertia vue3的版本

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Méthodes de communication entre les composants parents et enfants de Vue3 et liaison bidirectionnelle entre les composantsArticle suivant：Méthodes de communication entre les composants parents et enfants de Vue3 et liaison bidirectionnelle entre les composants

Articles Liés

Voir plus