Tutorial Boostrap Vue Bahasa Indonesia - kumpulan tutorial pemrograman untuk pemula dan source code gratis

Home Top Ad

Tuesday, April 30, 2019

Tutorial Boostrap Vue Bahasa Indonesia




Sebelum ternak code sudah menulis artikel tentang apa itu vue js , jika kalian belum membaca bisa membacanya terlebih dahul di Tutorial Vue.js Part 1 , tanpa basa basi kali ini ternak code akan membagian tutorial boostrapvue .

Baru-baru ini, sebuah paket baru dirilis di ekosistem Vue.js. Ini adalah integrasi dari kerangka kerja Bootstrap yang populer dan Vue.js. Paket ini dikenal sebagai BootstrapVue. Hal ini memungkinkan kita untuk menggunakan komponen khusus yang terintegrasi dengan Bootstrap (v4) dengan cepat.

Apalagi? Ini mendukung komponen Bootstrap kustom, sistem grid, dan juga mendukung arahan Vue.js.

Di pos ini, kami akan membahas dasar-dasar BootstrapVue, menjelaskan konsep umum, mendemonstrasikan proses penyiapan, dan membangun proyek mini Vue.js dalam proses untuk memberi Anda pengalaman yang lebih praktis.


Mengapa BootstrapVue?

Mengingat bahwa Bootstrap adalah kerangka kerja CSS paling populer yang tersedia (Menurut saya), sebagian besar pengembang yang telah pindah atau yang berniat untuk beralih dari kerangka kerja seperti Vanilla JavaScript ke Vue.js selalu menemukan migrasi agak sulit karena ketergantungan Bootstrap yang tinggi pada jQuery .

Dengan BootstrapVue, pengembang mana pun dapat beralih dari Vanilla.js atau jQuery ke Vue.js tanpa repot-repot dengan ketergantungan Bootstrap yang sangat besar pada jQuery atau bahkan menemukan cara untuk mengatasinya. Begitulah cara BootstrapVue datang untuk menyelamatkan. Ini membantu untuk menjembatani celah itu dan memungkinkan pengembang Vue yang masuk menggunakan Bootstrap dalam proyek mereka dengan mudah

Syarat

1. Pengetahuan dasar Vue.js akan sangat membantu untuk memahami demonstrasi ini
2. Secara global install Vue CLI pada laptop Anda untuk menindak lanjuti dengan posting ini. Jika saat ini Anda belum menginstalnya, ikuti panduan installasi ini 

Buat proyek Vue Pertama. 

kita harus membuat proyek Vue.js yang bisa kita gunakan untuk mendemonstrasikan implementasi komponen BootstrapVue. 
Pertama, buka jendela terminal pada direktori pilihan Anda dan jalankan perintah di bawah ini:



Jika Anda belum menginstal Vue CLI secara global, silakan ikuti panduan ini untuk melakukannya dan kembali untuk melanjutkan dengan tutorial ini sesudahnya.

Perintah di atas akan menampilkan dialog pemilihan preset seperti ini:




Pilih Default dan tekan Enter, tunggu sampai proses installasi selesai.




setelah selesai pindah ke direcotory project vue , dan jalan project dengan npm serve , jika berhasil maka akan muncul seperti gambar di atas, setelah itu buka browser dan akses dengan http://localhost:8080/ jika muncul seperti gambar di bawah ini berarti ada sukses membuat aplikasi vue pertama anda.




Bagaimana cara menambahkan Bootstrap dan BootstrapVue ke proyek Ada dua cara utama untuk melakukan ini, menggunakan manajer paket seperti dan npm dan benang atau menggunakan tautan CDN.

Menggunakan npm atau yarn

kita akan menginstal semua paket yang diperlukan yang kita sebutkan sebelumnya untuk proyek menggunakan npm atau yarn. Untuk melakukan itu, navigasikan ke direktori root proyek dan jalankan salah satu dari perintah di bawah ini, tergantung pada manajer paket pilihan Anda:



Perintah di atas akan menginstal paket BootstrapVue dan Bootstrap. Paket BoostrapVue berisi semua komponen BootstrapVue dan Bootstrap biasa berisi file CSS. Kami juga telah menginstal Axios untuk membantu mengambil makanan untuk aplikasi kami dari themealdb API.

Menyiapkan Bootstrap Vue

Selanjutnya, mari kita siapkan paket Bootstrap Vue yang baru saja kita instal. Buka file main.js Anda dan tambahkan baris kode ini ke atas:



Apa yang kita lakukan di sini cukup mudah, kita mengimpor paket BoostrapVue dan mendaftarkannya di aplikasi menggunakan fungsi Vue.use () sehingga aplikasi Vue kami dapat mengenalinya. Agar semuanya berfungsi, kita juga perlu mengimpor file CSS Bootstrap ke proyek kita.

Membuat komponen Bootstrap

Kita sekarang berada pada tahap di mana kita dapat mulai menjelajahi komponen BoostrapVue. Mari kita mulai dengan membuat komponen pertama kita. Komponen pertama yang akan kita buat adalah komponen Navbar. Buka direktori komponen Anda, buat file dengan nama Navbar.vue dan perbarui dengan kode di bawah ini:


Komponen Navbar berisi beberapa komponen BootstrapVue, salah satunya adalah komponen b-navbar. Komponen ini adalah komponen induk dari setiap komponen lain di Navbar. Tanpa komponen ini, semua komponen lain di Navbar tidak akan ditampilkan dengan benar.

Warna teks pada Navbar dapat diubah dengan typeprops. Warna latar belakang Navbar juga dapat diubah dengan variantprops. Warna-warna ini dapat berupa warna default Bootstrap normal - info, primer, successetc.

Komponen lainnya adalah komponen b-navbar-brand. Di sinilah logo situs web dapat ditampilkan. Ini juga mengambil varian dan tip yang dapat digunakan untuk mengubah warna latar belakang dan warna teks masing-masing.

Komponen BootstrapVue lainnya adalah:

b-nav-form
b-nav-item-dropdown
b-dropdown-item
b-navbar-beralih
b-runtuh
b-nav-item (yang dapat disable dengan atribut "disable")
b-navbar-nav
b-nav-item.

Dan masih banyak lagi , Satu hal yang indah tentang komponen BootstrapVue adalah bahwa mereka responsif secara default. Akibatnya, Anda tidak perlu menulis kode tambahan atau menggunakan pustaka eksternal untuk membuatnya responsif.

Komponen lain yang saya ingin kita lihat adalah Cardcomponent. Komponen kartu memungkinkan kita untuk menampilkan gambar, teks, dan sebagainya, dalam sebuah kartu. Itu ditulis sebagai b-card. Untuk mendemonstrasikannya, mari kita membuat Cards.vuefile di direktori komponen kami. Kemudian perbarui dengan kode di bawah ini:



Untuk merender komponen Cards yang baru saja kita buat, mari kita modifikasi file HelloWorld.vue. Buka dan perbarui dengan kode di bawah ini:



Apa yang kita lakukan di sini adalah membuat komponen Cards dan memasukkannya ke HelloWorld.vue file. Perhatikan bahwa dalam komponen Cards, kita memiliki lifecycle yang mengubah data kita. Sebagai hasilnya, data akan dimasukkan ke dalam komponen b-card sebelum dirender ke browser.

Selanjutnya, mari perbarui App.vue file kita untuk menangkap perubahan terbaru kita dan merender komponen yang tepat untuk browser. Buka dan perbarui dengan snippet di bawah ini:


save semua data dan coba run project kita  dengan mengetikan npm run serve di cmd kita, maka akan muncul seperti gambar di bawah ini 


Tadaaaa , project kita sudah jadi , di atas adalah cara menggunak boostrapvue , mungkin ini saja yang bisa saya sharing, jika ada salah kata mohon di maafkan..





No comments:

Post a Comment