Halo, Alan Lovers! Kamu developer front end dan tertarik untuk menggunakan Vue.js? Gak heran sih, soalnya Vue.js emang jadi salah satu framework pilihan terbaik untuk kalian.
Tapi, kalian tau gak sih gimana cara install-nya? Kalau kalian masih bingung gimana cara install Vue.js di perangkat kalian, yuk simak artikel ini.
Cara Install Vue.js
Sebelum meng-install Vue.js, kalian perlu meng-install terlebih dahulu Node.js. Setelah Node.js ter-install, kalian bakal menemui NPM. Kalau di Java Script, NPM itu ibaratnya Composer, paham kan?
Langkah 1: Download dan Install Node.js
Untuk mengunduh file installer Node JS, kalian bisa klik disini. Sesuaikan file yang di-download dengan tipe sistem operasi Windows kalian. Setelah kalian download, selanjutnya jalankan file .msi tersebut dan lakukan instalasi seperti biasa.
Catatan:
Untuk melihat apakah Node.js sudah ter-install di perangkat kalian, bisa ikuti langkah berikut:
- Buka cmd dengan cara klik tombol windows lalu ketik cmd pada menu pencarian. Klik kanan pada aplikasi Command Prompt lalu pilih Run as Administrator. Seperti contoh gambar di bawah ini.
- Kemudian, masukkan perintah berikut untuk memastikan proses instalasi Node JS kalian berhasil.
node -v- Maka output dari perintah di atas akan seperti gambar di bawah ini:
Langkah 2: Install Vue.js
Masih berada di CMD, selanjutnya install Vue.js menggunakan perintah berikut.
npm install -g @vue/cliPastikan saat proses install terhubung ke dalam jaringan internet. Karena, proses install membutuhkan download file dari resource Vue.js yang ada di Node JS.
Tunggu hingga proses instalasi selesai, seperti contoh gambar di bawah ini:
Langkah 3: Tes Vue.js
Setelah kalian selesai melakukan instalasi Vue JS, kalian perlu untuk mecoba membuat project menggunakan Vue JS.
Pertama, masuk ke direktori tempat kalian nanti akan menyimpan project Vue JS. Sebagai contoh, di sini menggunakan direktori Local Disk: D..
Selanjutnya, untuk membuat project baru Vue JS, cukup jalankan perintah berikut ke dalam Command Prompt kalian. Di sini, “myproject” adalah nama folder tempat menyimpan project Vue JS, kalian juga bisa menggunakan nama lain.
vue create myprojectKemudian, kalian akan diminta untuk memilih opsi instalasi pada Vue CLI. Terdapat dua pilihan yaitu default dan manually. Jika sudah memilih, lalu tekan ENTER.
Setelah itu proses pembuatan project akan berjalan. Kalian perlu menunggu proses ini sampai selesai. Apabila pembuatan project berhasil akan muncul pesan Successfully created project “myproject”.
Selanjutnya kalian erlu masuk ke dalam direktori project. Gunakan perintah yang telah diberikan saat proses instalasi selesai. Pada panduan ini menggunakan perintah.
cd myprojectsSetelah masuk ke dalam direktori project, jalankan Vue JS menggunakan perintah berikut:
npm run servePerintah diatas akan menghasilkan output seperti gambar di bawah ini.
Terakhir, buka browser kalian dan akses salah satu dari IP / localhost yang ada pada gambar di atas. Maka Kalian akan mendapatkan tampilan halaman dari Vue JS.
Setelah itu, kalian bisa melakukan proses pengembangan front end dari website atau aplikasi.
Kesimpulan
Kamu tertarik untuk mengembangkan website tapi bingung gimana caranya? Jangan khawatir, Alan Creative hadir untuk membantu menyelesaikan masalah kamu. Kami menyediakan layanan pembuatan website dengan profesional. Tunggu apalagi? Hubungi kami sekarang juga untuk mendapatkan penawaran terbaik!
