• Apa itu Vue Js ?
• Versi Rilis Vue Js
• Langkah 1 - Installasi Node Js
• Langkah 2 - Installasi Vue CLI
• Langkah 3 - Membuat Project Vue Js
• Langkah 4 - Menjalankan Project Vue Js

Halo teman-teman semuanya, di artikel sebelumnya kita telah berhasil mengintegrasikan Laravel dengan Raja Ongkir, sekarang kita akan lanjutkan untuk proses installasi project baru dengan Vue Js.

Vue Js akan kita gunakan sebagai Front-End untuk menampilkan data JSON yang di dapatkan dari Laravel dan RajaOngkir. Sebelum kita lanjutkan ke tahap installasi, sebaiknya kita berkenalan dulu dengan Vue Js.

Apa itu Vue Js ?

Vue (diucapkan / vjuː /, seperti view) adalah kerangka kerja progresif untuk membangun antarmuka pengguna. Tidak seperti kerangka kerja monolitik lainnya, Vue dirancang dari bawah ke atas agar dapat diadopsi secara bertahap. Libarary inti difokuskan pada lapisan tampilan saja, dan mudah diambil dan diintegrasikan dengan library lain atau proyek yang sudah ada. Di sisi lain, Vue juga sangat mampu membuat Aplikasi SPA yang canggih bila di kombinasikan dengan library pendukung, seperti Vue Router dan lain-lain.

Vue Js pertama kali dibangun oleh Evan You pada tahun 2013, dimana saat itu beliu masih bekerja sebagai Creative Technologist di Google Creative Labs. Setelah dua tahun di Google, beliau pindah di Meteor, di mana membangun kerangka kerja JavaScript open source yaitu Meteor Js. Setelah itu beliau fokus di pengembangan Vue Js sampai sekarang.

Versi Rilis Vue Js

Sekarang, Vue update stabil versinya di 3.0 di bulan september tahun 2020. Dan pada kesempatan kali ini kita semua akan belajar bersama-sama membangun aplikasi serderhana menggunakan Vue Js 3.

Langkah 1 - Installasi Node Js

Karena kita nanti akan menggunakan Vue CLI, maka kita butuh Node Js. Dan jika teman-teman belum menginstall-nya di dalam Komputer, silahkan bisa mengunduhnya di halaman berikut ini : https://nodejs.org/en/download/.

CATATAN : Vue CLI 4.x membutuhkan Node.js versi 8.9 atau lebih tinggi (disarankan v12 +).

Untuk memverifikasi apakah Node Js berhasil terinstall di dalam komputer, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :

node -v

npm -v

Langkah 2 - Installasi Vue CLI

Setelah berhasil menginstall Node Js, selanjutnya kita akan menginstall Vue CLI secara global di dalam komputer, silahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm install -g @vue/cli

Setelah installasi selesai, sekarang kita bisa memerika versi Vue CLI yang kita gunakan dengan perintah seperti berikut ini :

vue --version

Langkah 3 - Membuat Project Vue Js

Setelah Vue CLI berhasil terinstall, sekarang kita bisa melakukan scaffolding untuk membuat project Vue secara lebih cepat dan efisien.

Sekarang, silahkan masuk di dalam folder yang akan teman-teman buat menyimpan project-nya dan jalankan perintah di bawah ini :

vue create vue-rajaongkir

Perintah di atas, digunakan untuk membuat project Vue baru dengan nama vue-rajaongkir, jika muncul pilihan preset, silahkan pilih Default (Vue 3 Preview) ([Vue 3] babel eslint).

kemudian tunggu proses installasinya sampai selesai.

Langkah 4 - Menjalankan Project Vue Js

Setelah proses installasi selesai, sekarang kita akan belajar menjalankan project Vue tersebut. Silahkan jalankan perintah berikut ini :

cd vue-rajaongkir

npm run serve

Jika berhasil, maka project Vue kita akan di jalankan di dalam port 8080, kita bisa membukanya di http://localhost:8080.

Sampai disini proses installasi dan membuat project baru dengan Vue Js, di artikel selanjutnya kita akan belajar bagaimana cara installasi dan konfigurasi Tailwind CSS di dalam project Vue Js kita.

Terima Kasih

INFO :

• Membangun Website Sekolah Dengan Laravel, Vue Js dan Bootstrap 5 : https://bit.ly/ebook-laravel-vue-js
• Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway