Tutorial Rajaongkir dengan Laravel, Vue Js dan Tailwind CSS#3 : Installasi Project Vue Js


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

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

Versi Tanggal Rilis Judul
3.0 18 September 2020 One Piece
2.6 4 Februari 2019 Macross
2.5 13 Oktober 2017 Level E
2.4 13 Juli 2017 Kill la Kill
2.3 27 April 2017 JoJo's Bizarre Adventure
2.2 26 Februari 2017 Initial D
2.1 22 November 2016 Hunter X Hunter
2.0 30 September 2016 Ghost in the Shell
1.0 27 Oktober 2015 Evangelion
0.12 12 Juni 2015 Dragon Ball
0.11 7 November 2014 Cowboy Bebop
0.10 23 Maret 2014 Blade Runner
0.9 25 Februari 2014 Animatrix
0.8 27 Januari 2014 N/A
0.7 24 Desember 2013 N/A
0.6 8 Desember 2013 N/A

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 :


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR