Memulai Vue.js dengan Vue-CLI dan Webpack

Vue.js

Memulai Vue.js dengan Vue-CLI dan Webpack – Vue.js merupakan salah satu pilihan framework javascript yang terdapat di pasar saat ini dan salah satu yang belakangan mendapatkan perhatian lumayan dari para javascript developer. Vue.js banyak dibilang sebagai framework yang berhasil mengadopsi kehebatan React dan Angular dalam satu wadah yang tepat. Memang jika kita belajar Vue.js terutama di versi 2 akan mendapatkan rasa seperti React yang bercampur dengan Angular. Vue.js datang belakangan, hal itu menjadi wajar kenapa Vue.js bisa dibilang sukses belajar dari para pendahulunya. Menggabungkan strong point dari beberapa framework untuk bisa berdiri sendiri menggunakan paradigma yang diusungnya.

Untuk memulai project Vue.js sebenarnya sangat mudah, karena Vue.js bisa langsung jalan di browser seperti yang dilakukan sejak versi 1.x cukup dengan menambahkan tag </script> dan kode Vue.js sudah bisa dipakai di browser Anda seperti terlihat di dokumentasi nya disini : https://vuejs.org/v2/guide/#Getting-Started. Namun dengan menggunakan cara ini, maka kita tidak dapat menggunakan banyak hal menarik dalam proses development kita seperti css preprocessor, file dengan ekstensi .vue, ES6 syntax serta banyak hal lain lagi yang membutuhkan kompilasi sebelum dijalankan.

Seperti halnya framework lain yang menghadirkan generator skeleton bagi yang ingin memulai belajar tanpa harus pusing setup maka Vue.js juga hadir dengan hal tersebut. Mereka punya Vue-CLI sebagai generator dari struktur project mereka. Vue-CLI menurut saya sendiri salah satu generator yang palling fleksibel diantara para pesaingnya. Vue-CLI punya banyak pilihan template yang bisa kita pilih untuk di generate, mulai dari webpack yang simple, webpack yang kompleks, browserify simple sampai yang kompleks, PWA, sampai yang sangat sederhana dengan hanya satu file html. Semua file hasil dari Vue-CLI pun sangat terlihat alami tanpa adanya campur tangan sebuah generator, jadi sangat mudah buat kita untuk memodifikasi berbagai konfigurasi yang ada didalamnya sesuai dengan kebutuhan kita.

Yang akan kita coba bahas disini adalah generate Vue-CLi untuk template webpack, kenapa webpack ? karena dependency ini salah satu yang paling populer dan paling baik dokumentasinya sehingga mudah untuk di modifikasi kedepannya. Ada dua pilihan yakni webpack simple dan webpack, kita akan mencoba menggunakan template webpack pada tutorial kali ini.

Pertama pastikan Anda meng-install Vue-CLI dengan cara : npm install -g vue-cli
Dan perintah dasar untuk melakukan generate dengan Vue-CLI adalah dengan : vue init template_name project_name
Dan spesifik untuk men-generate sebuah webpack setup untuk Vue.js bisa dengan cara : vue init webpack project_name
Dalam kasus normal hal ini harusnya akan berjalan dengan baik, namun ada kalanya proses ini gagal dan biasanya penyebabnya ada di Proxy dalam jaringan yang tidak mengijinkan untuk mengunduh template yang ada di github.
Salah satu solusi mudahnya adalah dengan mengunduh template yang ada di github ke dalam lokal komputer Anda untuk dilakukan generate secara lokal.
File template sendiri bisa ditemukan di :

Setelah mendownload file di lokal komputer Anda, bisa gunakan perintah berikut untuk melakukan generate skeleton :

Setelah menjalankan perintah ini akan ada beberapa pertanyaan seputar konfigurasi yang ingin di generate seperti akan menggunakan Vue-Router atau tidak, akan menggunakan ESLint atau tidak, ingin men-generate skeleton untuk unit test dan end-2-end test atau tidak.
Berikut adalah controh screenshoot ketika melakukan generate skeleton menggunakan Vue-CLI webpack template :

Vue-CLI Lokal

Vue-CLI juga akan melakukan generate shortcut script yang biasa kita jalankan dengan npm run task seperti contoh berikut :

Jadi setelah project kita berhasil ter-generate dan telah meng-install dependency dengan npm install maupun yarn install maka kita bisa menjalankan project tersebut dengan perintah npm run dev dan bila ingin men-compile file untuk production kita bisa menjalankan npm run build sedangkan untuk test ada npm run unit dan lain-lain.

Demikian sedikit tutorial dasar mengenai penggunaan dasar Vue-CLI. Semua dokumentasi dan issue telah ada di Github resminya di https://github.com/vuejs/vue-cli, silahkan dipelajari lebih lanjut jika ingin yang lebih kompleks lagi.

Bila ada pertanyaan ataupun diskusi langsung kepada penulis, Anda bisa menghubungi lewat beberapa sosial media berikut :

 

Terima kasih,

Irfan Maulana