Explication détaillée de la façon d'installer rapidement Bootstrap dans Laravel9.x

Installez élégamment et facilement le framework Bootstrap dans Laravel 9.x (vite article)

Cet article partagera avec vous l'expérience suivante d'utilisation du workflow front-end sous Laravel 9.x. J'ai déjà utilisé Laravel Mix, mais maintenant nous. l'utilisera cette fois. L'outil Vite officiellement recommandé, tout en continuant à utiliser bootstrap 5, permettra non seulement aux étudiants du cours de maîtriser le dernier flux de travail frontal, mais également d'ajuster leurs styles préférés avec un seuil bas. Le plus important est de ne pas affecter la progression de l’apprentissage et le rythme du tutoriel. [Recommandé : tutoriel vidéo laravel]

écrit devant

Environnement de développement :

• L'environnement principal est Windows 10/11 + Homestead, les deux sont les dernières versions stables

• deux plates-formes Node.js est installé

• La version de Laravel est 9.x (j'utilise la dernière version 9.38.0 lors de la publication. Pour d'autres choses non mentionnées, suivez le tutoriel de la version 9.x

• Ne pas utiliser Laravel Mix). , utilisez le nouvel outil d'empaquetage frontal officiellement recommandé vite pour effectuer les tâches de modification de style dans le didacticiel.

Mon objectif : utiliser Node.js sur les plates-formes Windows et Homestead pour éviter les pièges liés à l'installation de Bootstrap, afin que les utilisateurs Win qui travaillent dur puissent apprendre "4.2 du "Tutoriel L01 Laravel - Introduction pratique au développement Web". Embellissement du style " Le chapitre est élégant et décontracté.

Fini les bêtises, fonctionnement en ligne

Comment faire fonctionner

Tout d'abord, on suppose que le lecteur a déjà appris le chapitre "4.2. Embellissement du style", et est malheureusement resté bloqué. Deuxièmement, il peut être utilisé. sur votre propre ordinateur Windows et dans votre environnement Homestread. Exécutez Node.js. Si Node.js n'est pas installé sous Windows, vous pouvez le rechercher et le télécharger via un moteur de recherche. Le processus d'installation est infaillible et je n'entrerai pas dans les détails.

Nous effectuons d'abord l'étape suivante selon le tutoriel, mais ne l'exécutons pas encore

composer require laravel/ui:3.4.5 --dev

Changeons-la. Ici, nous obtenons directement la dernière version par défaut de laravel/ui et l'exécutons sous Linux

composer require laravel/ui  // 发文时最新的版本是 4.0.1，对不住了版主，我自己偷摸的上到最新的版本惹
php artisan ui bootstrap

Ensuite, nous en ouvrons une. dans le terminal de l'environnement Windows, tel que PowerShell, et exécutez

npm config set registry=https://registry.npm.taobao.org
npm i

Revenez ensuite à votre éditeur et recherchez le vite.coffig.js nouvellement généré dans le répertoire racine du projet. Nous le modifions avec l'effet suivant

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'

export default defineConfig({
   plugins: [
       laravel([
           'resources/js/app.js',
       ]),
   ],
   resolve: {
       alias: {
           '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
       }
   },
});

puis importons. boostrap 5 dans app.js Après scss

import './bootstrap';

// 以下为新增部分
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'

, accédez au modèle de lame du projet et remplacez le code mix() d'origine. Si nous suivons le tutoriel ici, il suffit de changer le fichier default.blade.php, c'est-à-dire de remplacer les deux lignes de code

<link rel="stylesheet" href="{{ mix(&#39;css/app.css&#39;) }}">
<script src="{{ mix(&#39;js/app.js&#39;) }}"></script>

par @vite code

@vite(['resources/js/app.js'])

Ce qui suit est ce que j'ai mis dans default.blade. php Après la position

    
    @vite([&#39;resources/js/app.js&#39;])   <--- here!


    

        

            Weibo App
            

                
帮助
                
登录
            
        
    
    

        @yield('content')
    

, dans notre étude ultérieure, tout ce qui concerne Mix sera traité selon cette idée.

Enfin, entrez la commande suivante dans le terminal Windows

npm run build
// 或者
npm run dev

L'opération est terminée, actualisez le navigateur suivant pour voir l'effet.

Quant à la différence entre dev et build :

• dev peut être ajusté à tout moment lorsqu'il est adapté au développement. Vos modifications prendront effet en temps réel et automatiquement. Il est recommandé de toujours ouvrir une fenêtre et de se bloquer. en arrière-plan pendant le développement.

• La construction prendra une étape Une fois le traitement terminé et les fichiers css et js sortis, il ne sera exécuté qu'une seule fois et non automatiquement, ce qui convient à l'étape de publication finale.

En termes de vitesse, par rapport au workflow frontal de Laravel Mix, Vite le gérera de manière constante pour vous à une vitesse fulgurante. Ne vous inquiétez pas, la vitesse de traitement de Vite est vraiment trop rapide.

Déploiement du projet

Lorsque notre code est téléchargé dans l'entrepôt git distant puis extrait dans l'environnement de production, les fichiers css et js générés par vite à l'aide de npm run build ne seront pas inclus dans la gestion git, c'est-à-dire lorsque votre git add -A local ne peut pas les inclure. Nous devons trouver le fichier .gitignore dans le répertoire racine du projet de développement local, commenter ou supprimer la ligne /public/build, comme suit

/node_modules
# /public/build   <-- here
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
auth.json
npm-debug.log
yarn-error.log
/.idea
/.vscode

Ensuite, les fichiers que nous construisons peuvent être git add -A détecté.

Bien sûr, vous pouvez également compiler des styles en ligne Tant que vous comprenez cette idée, vous pouvez tirer des conclusions à partir d'un exemple.

Autres conseils

bootstrap 5 a supprimé le composant Jumbotron de la version 4 originale, vous ne pouvez donc pas voir le style correspondant, ce qui est normal. Si vous souhaitez le modifier, utilisez votre imagination et écrivez-en un vous-même.

Concernant le chapitre 4.4. Problèmes de cache du navigateur, si vous utilisez le workflow frontal de vite, une fois la construction terminée, le suffixe sera automatiquement ajouté au fichier de style, vous n'avez donc pas besoin de lire ce chapitre. pas de mode de travail utilisant vite. Pour cette question, sautez-la et continuez à étudier.

Si vous trouvez qu'il y a des endroits dans cet article où vous pouvez proposer vos propres méthodes, ce serait mieux. Ma réponse n'est pas parfaite. Le meilleur résultat est que chacun puisse proposer ses propres questions de réflexion ou. solutions pendant le processus d’apprentissage. Bienvenue. Explorons les solutions qui vous conviennent.

Réflexions finales

Par rapport à la méthode du tutoriel du modérateur qui nous permet d'utiliser une version spécifique pour apprendre Laravel, j'aime toujours suivre la documentation officielle et essayer d'utiliser des méthodes natives pour obtenir des effets pertinents, et utiliser la dernière version dans tous les aspects, ce qui est également recommandé par le modérateur. C'est un "mal rebelle" dans le cadre de l'idée de standardisation. Je dois aussi résoudre les problèmes de compatibilité des nouvelles versions que je rencontre de temps en temps. En bref, j'espère que cet article pourra fournir une nouvelle idée aux débutants. Après tout, nous sommes dans la phase d'apprentissage, pas dans le développement d'un environnement de production. Il vaut mieux en savoir plus.

Par rapport à mon précédent partage d'expérience en 8. Étudiez par vous-même, trouvez des solutions, puis résolvez les problèmes. L'apprentissage des idées est plus important que les méthodes d'apprentissage. Je pense que les versions ultérieures de 10.x et 100.x auront plus de nouveaux contenus et de changements. résoudre les problèmes et éviter les méthodes d'apprentissage rigides ne fonctionnera pas. J'espère que tous les débutants dans le parcours d'apprentissage n'abandonneront pas ce beau cadre.

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!