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 :
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