Cara Install Vue Js Untuk Membuat Web dengan Vue CLI

Cara Install Vue Js Untuk Membuat Web dengan Vue CLI
Konten Halaman

Pada kesempatan kali saya mau share cara install Vue CLI (Command Line Interface) untuk membuat web, tujuannya dari Vue js dengan CLI adalah untuk memudahkan proses development seperti menggunakan plugin atau library yang lain di javascript dari npm, selain itu vue CLI akan mem-bundling semua file project seperti javascriptnya, CSS, beserta HTML menjadi satu file dan di compile dalam satu folder project yang menjadi single page application.

Bagi yang belum melakukan install NodeJS dengan NPM bisa ikuti posting an saya di Cara Install NodeJS di Windows.

Persiapan Install Vue CLI

  • nodejs versi 8.9 atau lebih, di anjurkan versi 10 lebih
  • jika sudah memiliki nodejs dengan NPM maka jalankan perintah di bawah ini:
npm install -g @vue/cli

Command atau perintah di atas dijalankan di sembarang tempat karena perintah tersebut menjalankan secara global tanpa terkait folder berada di mana

  • cek kembali apakah sudah berjalan dengan baik dengan perintah command ini:
vue --version

jika muncul ada respons di command seperti berikut, maka vue cli berhasil di install dengan baik vue cli in windows with git bash jika teman-teman gagal menjalankan nya di sistem operasi windows pakai CMD atau Powershell bisa menggunakan bash dari Git, contoh di atas menggunakan Bash Git atau bisa menggunakan aplikasi Cmder bawaan dari Laragon

Membuat project pertama di Vue CLI

buka terminal atau CMD di folder yang anda pilih, kemudian jalankan perintah berikut ini:

vue create belajar-vuejs

Penjelasan :

  • vue create : memanggil vuejs dengan CLI yang kita install sebelumnya, dan memerintahkan untuk create atau buat baru untuk project baru
  • belajar-vuejs : folder yang akan digunakan dan di install vue js

vue cli in windows with git bash running

  • pilih versi vue js yang akan digunakan, usahakan pakai yang terbaru, ketika tulisan ini dibuat yang paling terbaru adalah versi 3.

vue cli in windows with bash show version

  • tunggu sampai proses download install selesai, karena vue CLI sedang membutuhkan download library dan plugin cukup banyak.

vue cli in windows with git bash loading

  • proses download dan install vue cli selesai, maka tampilah seperti gambar di atas.

Menjalankan project Vue CLI

setelah proses install tadi berhasil di install di folder belajar-vue maka panggil command seperti berikut ini dan jalankan vue cli:

cd belajar-vue
npm run serve
  • proses menjalankan npm run serve vuejs CLI di local terminal vue cli running local stasrt serve

  • jika proses selesai maka tampilannya akan seperti dibawah ini vue cli running local finish

setelah menjalankan npm run serve teman-teman bisa membuka browser dengan alamat http://localhost:8000 maka tampilannya seperti di bawah ini: vue cli running local npm run serve

jika muncul tampilan seperti di atas maka vue js CLI berjalan dengan normal di pc teman-teman dengan demikian ketika melakukan perubahan browser secara otomatis atas reload atau istilahnya hotrealod.

Build dan compile Vue CLI untuk membuat web static

jika teman-teman ingin melakukan deploy atau release aplikasinya saya sarankan untuk melakukan build compile dengan bantuan webpack javascript sehingga tidak perlu menjalankan server, dengan build static project kalian berjalan tanpa server nodejs dan bisa di hosting di share hosting cpanel. berikut ini perintah untuk builnya:

npm run build
  • proses build vue cli vue cli running local proses

  • proses build vue cli sudah selesai vue cli running and build local

selanjutnya jika sudah maka teman-teman bisa melihat di folder public dan upload file dist yang berada di folder project kita, jika ingin melakukan hosting online maka salin folder dist ke tempat hosting atau server teman-teman. vue cli running and build local in folder dish

Kesimpulan

dengan menjalankan vue js dengan vue CLI teman-teman dimudahkan untuk proses development tidak perlu reload dan clear cache setiap ada perubahan selain itu kita bisa membuat component vue secara modular.

proses download terjadi di NPM dan memudahkan instalasi tanpa harus panggil src dari luar.