Mengintegrasikan bootstrap dengan vue.js menggunakan bootstrap-vue

Artikel ini meneroka mengintegrasikan bootstrap dengan vue.js menggunakan bootstrap-vue, menghapuskan keperluan untuk jQuery. React dan Vue.js adalah kerangka JavaScript yang popular, tetapi Vue.js mempunyai keluk pembelajaran yang lebih mudah dan persediaan. Bootstrap, rangka kerja HTML/CSS yang digunakan secara meluas, secara tradisinya bergantung pada jQuery. Bootstrap-Vue menjembatani jurang ini.

Kelebihan utama bootstrap-vue:

menggabungkan bootstrap dan vue.js, menggunakan komponen bootstrap sebagai komponen vue.
Dipasang melalui NPM, menawarkan templat Vue-CLI untuk perancah projek.
boleh dimasukkan melalui tag skrip, mempermudah persediaan.
menyokong arahan vue.js untuk komponen dinamik dan pengendalian acara.

Latar Belakang Bootstrap:

Dibuat oleh Mark Otto dan Jacob Thornton di Twitter, Bootstrap dengan cepat mendapat populariti kerana reka bentuk mudah alih, komponen UI biasa, dan sokongan penyemak imbas yang luas. Ia telah menjadi standard untuk projek web baru.

menyambung bootstrap dan vue.js:

pergantungan Bootstrap pada jQuery merumitkan integrasi langsung dengan Vue.js. Bootstrap-Vue dan Vuestrap adalah penyelesaian, dengan bootstrap-vue menjadi pilihan yang lebih terkini dan popular.

bootstrap-vue secara terperinci:

Bootstrap-Vue menyokong komponen bootstrap, sistem grid, dan arahan VUE.JS. Taman permainan dalam taliannya menawarkan persekitaran eksport dan keupayaan eksport JSFiddle. Dokumentasi komprehensif terus meningkatkan kebolehgunaannya.

pemasangan baris perintah (npm):

Ini mewujudkan projek baru menggunakan templat

npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev

.

Import Bootstrap dan gaya bootstrap-vue dan komponen. webpack-simple mengandungi kod depan. main.js App.vue

Pemasangan tag skrip:

Sebagai alternatif, sertakan bootstrap-vue melalui tag skrip dalam html anda:

pertimbangkan

untuk sokongan penyemak imbas warisan.

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<🎜>
<🎜>

@babel/polyfill Bekerja dengan komponen bootstrap-vue:

Contoh Menggunakan CodePen Menunjukkan Paparan Makluman dan Senarai.

Komponen Alert:

Ini mewujudkan amaran yang boleh dibatalkan. Rujuk dokumentasi bootstrap-vue untuk pilihan penyesuaian selanjutnya.

<b-alert show dismissible>Hello {{ name }}!</b-alert>

Komponen ListView Dynamic:

menggunakan dan dengan arahan

mencipta senarai dinamik:

npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev

pengendalian acara di lencana: Komponen

boleh digunakan dengan pendengar acara: <b-badge></b-badge>

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<🎜>
<🎜>

Meningkatkan kaunter saham pada klik butang.

Kesimpulan:

Bootstrap-Vue memudahkan mengintegrasikan bootstrap ke dalam projek Vue.js, menawarkan kombinasi yang kuat untuk membina aplikasi web responsif dan dinamik. Contoh dan pautan yang disediakan kepada sumber selanjutnya membolehkan pemaju dengan cepat bermula.

Soalan Lazim (Soalan Lazim):

Seksyen Soalan Lazim telah ditulis dengan baik dan komprehensif dalam teks asal. Tiada perubahan diperlukan.

Atas ialah kandungan terperinci Mengintegrasikan bootstrap dengan vue.js menggunakan bootstrap-vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!