Penjelasan terperinci tentang cara memasang Bootstrap dengan cepat dalam Laravel9.x

Pasang rangka kerja Bootstrap dalam Laravel 9.x (artikel vite) dengan elegan dan mudah

Artikel ini akan berkongsi dengan anda pengalaman berikut menggunakan aliran kerja bahagian hadapan di bawah Laravel 9.x yang saya gunakan Campurkan sebelum ini, tetapi sekarang Kali ini kami akan menggunakan alat vite yang disyorkan secara rasmi dan terus menggunakan bootstrap 5. Ini bukan sahaja memudahkan sarjana kursus menguasai aliran kerja bahagian hadapan terkini, tetapi juga melaraskan gaya kegemaran mereka dengan ambang yang rendah. Perkara yang paling penting ialah tidak menjejaskan kemajuan pembelajaran dan irama tutorial. [Disyorkan: tutorial video laravel]

ditulis di hadapan

Persekitaran pembangunan:

• Persekitaran umum ialah Windows 10/11 Homestead, kedua-duanya adalah versi stabil terkini

• Node.js dipasang pada kedua-dua platform

• Versi Laravel ialah 9.x (Saya menggunakan 9.38.0 terkini semasa menyiarkan, ikuti tutorial versi 9.x

• Jangan). gunakan Laravel Mix, gunakan alat pembungkusan bahagian hadapan baharu yang disyorkan secara rasmi untuk menyelesaikan tugas pengubahsuaian gaya dalam tutorial.

Tujuan saya: untuk menggunakan Node.js pada platform Windows dan homestead untuk mengelakkan perangkap dalam memasang Bootstrap, supaya pengguna Win yang bekerja keras boleh mempelajari "Tutorial L01 Laravel- The "4.2 . Pengindahan Gaya" bab "Pengenalan Praktikal kepada Pembangunan Web" adalah elegan dan mudah.

Tiada lagi karut, operasi dalam talian

Cara mengendalikan

Pertama sekali, diandaikan bahawa pembaca telah pun mempelajari bab "4.2 . Style Beautification", dan malangnya tersekat. Kedua, kedua-dua komputer Windows dan persekitaran Homestread saya boleh menjalankan Node.js. Jika Node.js tidak dipasang di bawah Windows, anda boleh mencari dan memuat turunnya melalui enjin carian Proses pemasangan adalah kalis dan saya tidak akan menerangkan secara terperinci.

Mula-mula kita lakukan langkah berikut mengikut tutorial, tetapi jangan laksanakannya lagi

composer require laravel/ui:3.4.5 --dev

Mari kita ubahnya Di sini kita terus mendapatkan versi laravel/ui lalai dan jalankan ia dalam linux

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

Kemudian kami membuka terminal dalam persekitaran windows, seperti powershell, dan laksanakan

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

Kemudian kembali ke editor anda dan cari vite yang baru dijana dalam direktori akar projek. Kami mengubah suai coffig.js kepada kesan berikut

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

dan kemudian mengimport scss boostrap 5 dalam app.js

import './bootstrap';

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

dan kemudian pergi ke templat bilah projek dan menggantikan kod mix() asal. Jika kita mengikuti tutorial di sini, kita hanya perlu menukar fail default.blade.php iaitu menggantikan dua baris kod ini

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

dengan kod @vite

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

Berikut ialah lokasi di mana saya meletakkan default.blade.php

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


    

        

            Weibo App
            

                
帮助
                
登录
            
        
    
    

        @yield('content')
    

Dalam kajian kami kemudian, apa sahaja yang melibatkan Mix akan dikendalikan mengikut idea ini.

Akhir sekali, masukkan arahan berikut dalam terminal windows

npm run build
// 或者
npm run dev

Operasi selesai, muat semula pelayar berikut untuk melihat kesannya.

Perbezaan antara dev dan binaan ialah:

• dev boleh dilaraskan pada bila-bila masa apabila ia sesuai untuk pembangunan . Adalah disyorkan untuk memastikannya dibuka semasa pembangunan Hanya gantung tetingkap di latar belakang

• bina akan diproses dalam satu langkah dan mengeluarkan fail css dan js sekali dan tidak akan automatik. Ia sesuai untuk peringkat keluaran akhir.

Dari segi kelajuan, berbanding dengan aliran kerja bahagian hadapan laravel Mix, Vite akan mengendalikannya dengan mantap untuk anda dengan sepantas kilat Jangan risau, kelajuan pemprosesan Vite sangat pantas .

Penggunaan Projek

Apabila kod kami dimuat naik ke repositori git jauh dan kemudian ditarik ke persekitaran pengeluaran, vite menggunakan fail css dan js yang dijana oleh npm run build Mereka tidak akan disertakan dalam pengurusan git, iaitu, anda tidak boleh memasukkannya dengan local git add -A Kami perlu mencari fail .gitignore dalam direktori akar projek pembangunan tempatan dan mengulas atau memadam baris /public/build. , seperti berikut

/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

Kemudian fail yang kita bina boleh dikesan oleh git add -A.

Sudah tentu, anda juga boleh menyusun gaya dalam talian selagi anda memahami idea ini, anda boleh membuat kesimpulan daripada satu contoh.

Petua lain

bootstrap 5 telah memadamkan komponen Jumbotron asal versi 4, jadi anda tidak dapat melihat gaya yang sepadan, yang merupakan perkara biasa. Jika anda ingin mengubahnya, sila gunakan imaginasi anda dan tulis sendiri.

Mengenai bab 4.4 isu cache penyemak imbas, jika anda menggunakan aliran kerja bahagian hadapan vite, selepas binaan selesai, akhiran akan ditambahkan secara automatik pada fail gaya, jadi anda boleh mengabaikan bab ini dan menggunakan vite untuk bekerja. Masalah ini tidak wujud dalam model, ponteng dan teruskan pembelajaran.

Sekiranya anda mendapati bahawa terdapat beberapa tempat dalam artikel ini yang anda boleh membuat kaedah anda sendiri, jawapan saya adalah lebih baik jika semua orang boleh menghasilkan kaedah mereka sendiri soalan pemikiran bebas atau penyelesaian semasa proses pembelajaran. Hasilnya, semua orang dialu-alukan untuk meneroka penyelesaian yang sesuai dengan anda.

Fikiran terakhir

Berbanding dengan kaedah dalam tutorial moderator yang membolehkan kami menggunakan versi tertentu untuk mempelajari laravel, saya masih suka mengikuti dokumentasi rasmi dan cuba menggunakan kaedah asli untuk mencapai kesan yang berkaitan, dan menggunakan versi terkini dalam semua aspek, yang juga dianggap sebagai versi. Saya ingin mengesyorkan "laluan memberontak" berdasarkan idea penyeragaman yang saya juga perlu menyelesaikan masalah keserasian versi baharu yang saya hadapi dari semasa ke semasa. Pendek kata, saya harap artikel ini dapat memberikan idea baru untuk pemula Lagipun, kita dalam peringkat pembelajaran, bukan pembangunan persekitaran pengeluaran.

Berbanding dengan perkongsian pengalaman 8.x saya sebelum ini, ini adalah tentang mempelajari dan menyesuaikan teknologi baharu, saya juga buntu apabila saya menemui kandungan versi baharu buat kali pertama. Belajar sendiri, cari penyelesaian, dan kemudian selesaikan masalah Idea pembelajaran adalah lebih penting daripada kaedah pembelajaran Saya percaya bahawa versi 10.x dan 100.x yang lebih baru akan mempunyai lebih banyak kandungan dan perubahan menyelesaikan masalah dan mengelakkan kaedah Pembelajaran yang tegar saya harap semua pemula dalam perjalanan pembelajaran tidak akan melepaskan rangka kerja yang indah ini.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara memasang Bootstrap dengan cepat dalam Laravel9.x. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!