Vue Js: First Code

Oke, setelah di post sebelumnya kita telah mengetahui apa itu Vue Js dan beda nya apa dengan framework lain. gak pake lama lagi, kita langsung mulai coba ngoding vue js.

Alat Tempur 😜

ya, sama seperti halnya ketika memulai ngoding dengan bahasa lain, kita perlu “alat tempur” untuk ngoding vue js.

1. Visual Studio Code (walau bisa pakai teks editor apapun, tapi recommended yang ini)
2. Node Js versi terbaru (karena vue js berjalan di node js)
3. Vue CLI
   ketik npm install -g @vue/cli di cmd (btw, saya pakai windows 😝)

Membuat Project

Oke, setelah alat tempur kita terpasang, kita make sure dulu ya. saya coba cek node js yang terinstall dengan jalanin node --version di terminal VS Code

Gambar 1 — Cek versi node js

Kebetulan versi yang saya pakai versi 10.16.0 dan seharunya tidak masalah. Fyi, ketika kita download dan install node js, kita otomatis juga menginstal npm. npm (node package manager) singkatnya adalah sebuah tools yang memungkinkan kita untuk menginstal package pada project kita. Untuk cek versi npm, kita bisa jalankan npm -v

Gambar 2 — Cek versi npm

Oke deh, langsung aja kalo gitu, kita buat project kita menggunakan Vue CLI dengan menjalankan vue create <namaProject> . Project nya saya beri nama medium-project. vue create medium-project . Kemudian kita disuruh memilih preset dari project vue js kita seperti pada Gambar 3.

Gambar 3 — Pilihan preset Vue Js

Saya pilih yang Default Vue 2, kemudian tekan enter dan tunggu proses instalasi selesai. Setelah selesai, kita coba masuk ke dalam direktori project yang sudah dibuat tadi. ketik cd medium-project pada terminal VS Code.

Struktur Project

medium-project
|
|- node_modules
|- public 
   |-- favicon.ico
   |-- index.html
|- src
   |--- assets 
   |--- components
   |-- App.vue
   |-- main.js
|- .gitignore
|- babel.config.js
|- package-lock.json
|- package.json
|- README.md

1. node_modules
   Folder ini berisi package yang kita instal melalui npm
2. Public
   Folder ini berisi file yang dapat diakses oleh publik
3. src
   Singkatan dari source. Folder ini memiliki peran penting dimana kita menaruh code kita.
4. .gitignore
   Berisi list dari file atau folder yang tidak akan dimasukkan kedalam version control system (VCS), seperti github atau gitlab
5. babel.config.js
   Berisi konfigurasi babel. Fyi, Babel adalah transpiler, penerjemah bahasa javascript yang tidak atau belum support pada browser atau nodejs.
6. package.json
   Berisi list package yang digunakan pada project. Ketika sebuah project berbasis node js yang dimasukkan ke VCS, folder node_modules dimasukkan kedalam .gitignore disebabkan dalam folder tersebut berisi folder-folder package yang isinya ratusan file sehingga membuat file project menjadi berat. Tentu hal itu akan berpengaruh pada proses penyalinan (clone) project (project yang di-download menjadi besar).
   Nah, setelah clone selesai, agar folder node_modules tersebut muncul kembali, sebelum menjalankan project, kita ‘download’ dulu folder node_modules yang berisi package-package yang digunakan di project kita sesuai dengan apa yang ada pada file package.json.

Oke, untuk menjalankan project kita, ketik npm run serve pada terminal VS Code kita, lalu buka http://localhost:8000/ pada browser kita (saya rekomendasikan gunakan google chrome). Kita akan melihat halaman pertama kita seperti Gambar 4.

Gambar 4 — Tampilan awal Vue Js

Write the Code!

Oke, setelah kita berhasil memunculkan project kita di browser, saatnya kita menulis kode. Fokus kita akan berada di folder src. Silakan buka file App.vue

Single App Application (SPA)

Sama seperti react, Vue Js juga menerapkan mekanisme SPA, yaitu suatu mekanisme rendering web seolah-olah digabungkan menjadi satu aplikasi (single app) sehingga yang file yang dijalankan/dipanggil oleh browser hanya satu file saja, yaitu file index.html yang ada pada folder public. Sedangkan pada umumnya, jika kita membuat web, setiap struktur atau bagian web dibuat file html nya masing-masing. Terus gimana cara nya bagian-bagian / struktur web yang lain dibuat di Vue? bagian-bagian tersebut dibuat dengan memanipulasi javascript.

Component

Snippet 1 — App.vue

Pada Snippet 1, file App.vue merupakan file root dimana kita meletakkan komponen utama dari struktur web kita (dalam snippet, komponen utama nya adalah HelloWorld).

Gambar 5-Ilustrasi komponen

Kita asumsikan struktur web seperti Gambar 5, kita menyebut setiap struktur (Header, Sidebar, Konten) sebagai komponen yang didalamnya terdapat komponen-komponen kecil lagi. Detail mengenai komponen ini akan saya bahas di post selanjutnya (biar ga kepanjangan, hehe 😆)

Struktur kode pada komponen vue js terdiri dari

1. template
   pada tag ini, kita meletakkan kode HTML. Pada tag ini hanya boleh memiliki satu tag parent, seperti pada baris ke-2 Snippet 1, yaitu tag div . Jika kita punya dua tag div dalam satu tag template maka akan terjadi error
2. script
   tag ini merupakan tempat kita untuk memanggil komponen dan memproses seluruh logic dari halaman web seperti pengambilan data dari API, manipulasi komponen, dan lain sebagainya.
3. style
   tag ini berfungsi untuk memberikan css style pada komponen dan biasanya diikuti dengan atribut scoped agar css style berjalan pada komponen tersebut saja (tidak bersifat global)

Jika kita perhatikan pada baris ke-9 Snippet 1, kita memanggil (melakukan import) pada komponen HelloWorld.vue. Perlu diingat bahwa file App.vue merupakan root file yang akan di proses menjadi SPA, sehingga kita perlu membuat satu komponen utama sebagai pondasi utama dari struktur web yang kita buat. Saya akan coba mengganti komponen HelloWorld dengan komponen Home.

Oke pertama saya buat folder pages di dalam src, kemudian buat file Home.vue .

Snippet 2 — Home.vue

Pada Snippet 2, baris ke-5 hingga 11 kita melakukan import terhadap komponen Navbar yang berada pada folder components . Pada baris ke-7, kita mendaftarkan komponen yang kita buat dengan nama ‘Home’, kemudian pada baris ke-8, kita mendaftarkan komponen yang telah kita import pada baris ke 5.

Selanjutnya pada folder Components, buat file Navbar.vue

Snippet 3 — Navbar.vue

Setelah selesai membuat komponen navbar.vue , kita ubah file App.vue menjadi kode berikut.

Snippet 4 — Mofikasi App.vue

Jika sebelumnya pada Snippet 1 kita memanggil komponen HelloWorld.vue , pada Snippet 4 kita ubah komponen yang dipanggil menjadi Home.vue

Buka browser kita (pastikan sudah menjalankan npm run serve pada terminal VS Code dan sudah membuka localhost:8080 ), kemudian akan muncul tampilan seperti berikut.

Gambar 6 — Hasil render Home.vue

Oke deh, cukup dulu post nya tentang First Code di Vue Js karena kalo kepanjangan juga khawatir membosankan 🙈. Next saya akan coba bahas lebih detail mengenai bagian-bagian dari vue js yang esensial.