Comment installer la version Inertia Vue3 dans Laravel-Voir.js-php.cn

Comment installer la version Inertia Vue3 dans Laravel

WBOY

Libérer： 2023-05-15 10:31:05

avant

1130 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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

$ php artisan inertia:middleware

Copier après la connexion

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,],

Copier après la connexion

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

Copier après la connexion

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)
  },})

Copier après la connexion

#🎜 🎜#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

Copier après la connexion

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()

Copier après la connexion

#🎜🎜 #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;,
    }});

Copier après la connexion

Quatrièmement, installez VUE
Première étape

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

$ npm install vue@next

Copier après la connexion

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;,
    }});

Copier après la connexion

# 🎜🎜# La troisième étape

Exécuter la commande npm

$ npm run watch

Copier après la connexion

Si une erreur est signalée

#🎜 🎜#

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

$ npm i vue-loader

Copier après la connexion

Si une erreur est toujours signalée

# 🎜🎜#
Solution : Ajoutez un dossier Pages sous le répertoire ressources/js.
Statut de réussite

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!