Materi pertama ini akan membahas mengenai sedikit pengenalan Vue.js dan Vuetify secara singkat, padat, dan jelas. Harapannya pembaca bisa memahami apa saja yang akan dipelajari pada materi-materi berikutnya.
Selamat pagi semuanya. Hari ini, aku akan memulai pembelajaran pertamaku terkait Vue.js dan Vuetify. Untuk itu, kita akan berkenalan dulu dengan keduanya agar kalian semakin mudah memahami dalam mengikuti materi-materi berikutnya. Yuk langsung saja kita mulai.
Apa Itu Vue.js?
Menurut kalimat yang dikutip dalam laman resminya vuejs.org sebagai berikut: “An approachable, performant and versatile framework for building web user interfaces.”
Artinya apa? Intinya adalah Vue.js merupakan suatu framework serbaguna dengan performa bagus untuk membangun suatu tampilan website (user interface). Jadi, dengan Vue.js, kita bisa membuat interface website seperti yang digunakan pada KaryaKarsa ini.
Apakah masih kurang jelas?
Begini contoh penggunaan konkritnya. Di halaman beranda KaryaKarsa terdapat logo, menu, daftar karya, dan lain sebagainya. Nah agar masing-masing komponen itu bekerja sesuai harapan ketika diklik, discroll, atau terdapat tindakan (event) lainnya maka membutuhkan Vue.js untuk menanganinya. Kira-kira programmer KaryaKarsa bilang begini pada Vue.js:
“Eh, Vue.js kalau si anu klik menu ini tolong diarahkan ke halaman ini, dong. Kalau dia klik ini, tolong tampilkan itu. Kalau doi klik itu, tolong suruh bayar. Dan lain-lain”.
Sampai sini sudah paham? Kalau belum kita lanjutkan secara jantan melalui kolom komentar ya, guys.
Apa Itu Vuetify?
Vuetify adalah framework komponen yang digunakan pada Vue.js. Jadi Vuetify itu menyediakan banyak komponen semisal tombol, toolbar, table, dan lain-lain untuk dikasih perintah melalui VueJs. Contoh framework sejenis Vuetify misalnya Materialize.css, Material Design Lite, Semantic UI, dan Bootstrap 4.
Sebagai analogi, Vue.js ibarat sebuah rumah dan Vuetify adalah perabotannya. Nah perabotan yang bisa ditaruh di dalam Vue.js bisa bermacam-macam dan bisa dicampur satu sama lain. Misal kita bisa membangun website menggunakan kombinasi Vue.js, Vuetify, dan Bootstrap 4 sekaligus.
Contoh Website
Berikut ini adalah beberapa contoh website yang dibangun menggunakan Vue. hal ini dilihat saat materi ini ditulis.
- karyakarsa.com | Vue.js & framework komponen Quasar
- bengkelbaik.com | Vue.js & framework komponen Vuetify
- nusagates.com | Vue.js & framework komponen Vuetify
Karya ini GRATIS! Tapi kamu boleh kok kasih tip biar kreator hepi 🥰
