Tutorial Vue JS & Restful API Lumen #2 : Membuat Project Baru Vue JS


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Tutorial Vue JS & Restful API Lumen #2 : Membuat Project Baru di Vue JS - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara memulai membuat sebuah project baru di Vue JS.

Vue JS merupakan sebuah progressive framework yang dibangun untuk membuat tampilan website agar interaktif. Untuk mempelajari Vue JS teman-teman sudah harus mengerti dasar-dasar dari HTML, CSS dan JavaScript.

Langkah 1 - Install Node JS

Kenapa harus menginstall Node JS ? karena pada tutorial kali ini kita semua akan belajar membuat project Vue JS menggunakan yang namanya Vue CLI. Dan jika kita ingin menginstall Vue CLI, kita harus mempunyai yang namanya NPM.

NPM ini adalah singakatan dari Node Package Manager, yang mana NPM ini adalah sebuah tool yang bisa kita gunakan untuk mengunduh dependensi-dependensi Node Module dengan mudah. Dan salah satunya dalah Vue CLI ini.

Vue CLI sendiri merupakan sebuah Tool untuk mempermudah kita dalam proses development di Vue JS. Dan nanti kita juga akan membuat project baru menggunakan Vue CLI.

Sekarang, silahkan teman-teman install Node JS melalui situs resminya di https://nodejs.org/en/download/ dan silahkan di sesuaikan dengan sistem operasi masing-masing.

Untuk mengetahui, apakah Node JS sudah berhasil terinstall dikomputer kita, kita bisa menjalankan perintah dibawah ini di terminal atau CMD.

node -v
npm -v

langkah 2 - Install Vue CLI

Oke, sekarang kita akan menginstall Vue CLI secara global di laptop atau komputer kita, silahkan teman-teman jalankan perintah dibawah ini :

npm install -g @vue/cli @vue/cli-service-global

Silahkan tunggu installasi Vue CLI sampai dengan selesai. Disini teman-teman harus menggunakan koneksi internet.

Langkah 3 - Membuat Project Baru Vue JS menggunakan Vue CLI

Sekarang, kita akan memulai membuat sebuah project baru Vue JS menggunakan bantuan Vue CLI, silahkan teman-teman jalankan perintah dibawah ini untuk memulainya :

vue create vue-lumen

vue-lumen merupakan nama aplikasi yang akan kita gunakan nanti, dan kemudian silahkan teman-teman pilih preset yang akan digunakan.

Silahkan teman-teman pilih default (babel, eslint). Dan silahkan teman-teman tunggu proses installasi sampai selesai.

Langkah 4 - Menjalankan Project Vue JS

Setelah proses installasi berjalan sampai selesai, sekarang kita bisa mencoba menjalankan aplikasi kita dengan cara :

npm run serve

Maka secara otomatis project kita akan di jalankan menggunakan port 8080 di localhost, teman-teman bisa membukanya di http://localhost:8080 dan jika berhasil, kurang lebih tampilannya seperti berikut ini :


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

Buy me a coffeeBuy me a coffee
KEBIJAKAN KOMENTAR

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

KOMENTAR