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 :
