Mencoba Vue CLI 3

Kalau ngomongin framework javascript kurang pas rasanya kalau tidak menyertakan vue js, menurut saya vue js ini salah satu framework javascript yang cukup pesat perkembangannya. Dulu saat pertama kali ngomong di kantor yang sebelumnya mending pake vue js cukup sering ditanya balik kenapa gak React? Ya menurut saya vue js lebih gampang. Walaupun sebenarnya saya cukup tahu kekhawatiran yg kurang sreg memilih vue, bisa dibilang vue itukan one man show awalnya berbeda dengan React ataupun Angular yang didukung oleh dua raksasa.

Sekarang vue menyajikan hal baru lagi — yang gak baru-baru amat, hypenya dah dari lama, saya aja males nulisnya — hhe ~.

VUE CLI

Sesuai namanya CLI alias Command Line Interface, vue cli ini membantu kita untuk menyiapkan projek vue js sesuai template-template yang sudah disediakan. Jadi kita gak perlu lagi menyusun dari awal.

Contoh penggunaan vue cli sebelumnya

$ vue init nama-template nama-folder
# contoh
$ vue init webpack-simple test-cli

Di vue-cli3 sekarang ada fitur tambahan yang akan jadi konten tulisan kali ini.

Pemasangan

Sebelum memasang pastikan kalian tahu bahwa saat ini vue-cli3 ini masih dalam kondisi release candidate jadi belum rilis resmi. Saat menulis ini versi sudah mencapai 3.0.0-rc.10

Jika kalian sudah pernah memasang vue-cli versi sebelumnya maka wajib dihapus dahulu

npm uninstall vue-cli -g

Selanjutnya baru pasang yang baru

npm install -g @vue/cli

Setelah selesai cek versi yang sudah dipasang

vue --version
3.0.0-rc.10

Membuat Projek

Walau namanya vue-cli tapi pada versi ini kita juga disediakan tampilan antar muka untuk memudahkan kita membuat projek vue. Agar gak terlalu berantakan saya melakukan beragam perintah di dalam folder /var/www/js/ (( kalian )) boleh melakukan di mana saja. Ketikan perintah berikut di terminal

$ vue ui

Perintah tersebut akan menjalankan tampilan antar muka vue pada lamat localhost:8000, tampilan seperti di bawah.

Pilih menu create lalu akan tampil folder saat tadi menjalankan perintah vue ui

Tekan tombol create project maka tampilan konfigurasi awal projek akan muncul seperti untuk mengisi nama projek dan pemilihan paket manajer.

Setelah selesai kita akan diarahkan ke tampilan konfigurasi lanjutan, ada 3 pilihan default, custom, dan git saya sendiri memilih custom karena ada beberapa tambahan yang ingin dipasang.

Pada tampilan ini kita akan memilih paket tambahan, kali aja ingin nambah apa gitu, saya sendiri menambahakn vue-router dan vuex.

Selanjutnya kita akan memilih linter yang akan dipakai, linter itu apa yah? Yah semacam panduan atau best practice dalam menulis lah, di sini kita pilih format mana yang akan dipakai.

Setelah selesai memilih selanjutnya kita dimunculkan pop up untuk memberi nama konfigurasi tadi, opsional sih boleh dilewati atau disimpan, saran saya mending disimpan. Setelah selesai vue akan menjalankan atau membentuk berkas projek.

Setelah selesai kita akan diarahkan ke halaman dashboard projek yang tadi dibuat.

Kita lewati saja yang lainnya kita langsung pilih menu Task untuk masuk ke halaman semacam control panel aplikasi vue.

Sebelum tombol stop task itu aslanya run task tujuannya jelas untuk menjalankan aplikasi vue yang dibuat. Jika aplikasi sudah berjalan bisa diakses di localhost:8080

Gimana cukup kerenkan vue-cli versi 3 ini? Namun saya lebih suka via command line sih, apalagi kalau konfigurasi sebelumnya udah disimpan, lebih singkat.

Di terminal cukup ketikan perintah

$ vue create nama-projek

Maka akan ada pilihan konfigurasi yang tersedia

Pilih yang nganu alias yang tadi dibuat, tunggu proses sampai selesai.

Kalau sudah, masuk ke dalam root folder aplikasi dan jalankan perintah serve ( untuk development )

$ cd namaprojek
$ npm run serve

Hasilnya sama

Referensi:
https://cli.vuejs.org/guide/installation.html