Tutorial Laravel Passport dan Vue Js 3 #4 : Membuat Project Vue Js


Tutorial Laravel Passport dan Vue Js 3 #4 : Membuat Project Vue Js

Halo teman-teman semuanya, di artikel sebelumnya kita sudah berhasil membuat REST API Authentication meliputi proses register, login, logout dan menampilkan data user. Di artikel kali ini, kita semua akan belajar untuk melakukan installasi project baru menggunakan Vue Js.

Langkah 1 - Installasi Node Js

Sebelum memulai membuat project baru di Vue Js, ada beberapa tools yang harus kita persiapkan, diantaranya adalah :

  • Node Js
  • NPM
  • Vue CLI

Silahkan install Node Js terlebih dahulu, untuk installasinya bisa lihat dari situs resminya di https://nodejs.org/en/download/ dan silahkan disesuaikan dengan sistem operasi masing-masing. Untuk mengetahui apakah Node Js berhasil terinstall, kita bisa menjalankan perintah di bawah ini di dalam terminal/CMD :

node -v

Ketika kita menginstall Node Js maka secara otomatis NPM juga ikut terinstall, kita bisa mencoba melihatnya di :

npm -v

Langkah 2 - Installasi Vue CLI

Selanjutnya setelah kita berhasil menginstall Node Js dan NPM, sekarang kita lanjutkan untuk menginstall Vue CLI atau Vue Command Line Tools. Silahkan jalankan perintah di bawah ini untuk menginstall Vue CLI secara global di dalam komputer kita.

npm install -g @vue/cli

Untuk melihat apakah Vue CLI sudah berhasil terinstall, silahkan jalankan perintaah di bawah ini :

vue --version

Langkah 3 - Membuat Project Vue Js

Sekarang, kita lanjutkan untuk membuat project Vue Js baru menggunakan Vue CLI. Silahkan jalankan perintah di bawah ini untuk membuat project Vue Js baru.

vue create vue-passport

Perintah di atas, akan membuat project Vue Js baru dengan nama vue-passport. Setelah itu kita akan mendapatkan pilihan preset yang bisa kita pilih, silahkan pilih Default (Vue 3 Preview) ([Vue 3] babel, eslint).

Setelah proses installasi selesai, sekarang kita akan coba menjalankan project Vue Js tersebut. SIlahkan jalankan perintah di bawah ini :

cd vue-passport
npm run serve

Jika berhasil project Vue Js kita akan di jalankan di port 8080, teman-teman bisa membukanya di http://localhost:8080 dan kurang lebih hasilnya seperti berikut ini :

Di atas, kita berhasil menjalankan project Vue Js, di artikel selanjutnya kita akan belajar untuk menginstall beberapa library di dalam Vue Js, seperti Axios, Vue Router dan lain-lain.

Terima Kasih


EBOOK - Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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