fbpx
Cara Install Vue.js Dengan Mudah

Cara Install Vue.js Dengan Mudah

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/cli

Pastikan 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 myproject

Kemudian, 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 myprojects

Setelah masuk ke dalam direktori project, jalankan Vue JS menggunakan perintah berikut:

npm run serve

Perintah 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!

Sebarkan konten ini jika bermanfaat:

Facebook
Twitter
Pinterest
LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

PORTOFOLIO KAMI:

PRODUK ALAN:

Media Sosial kami:

ARTIKEL POPULER!

Dapatkan info terbaru!

Dapatkan artikel & info terbaru!

Tidak ada spam, hanya artikel dan info terbaru!

KATEGORI ARTIKEL

Banyak artikel lain disini!

Baca artikel lainnya...

3 Manfaat CloudFlare untuk Website Bisnis

Halo, Alan Lovers! Kamu tahu gak apa manfaat Cloudflare? Yap, Cloudflare merupakan perusahaan yang memiliki layanan cloud yang berfokus pada keamanan, kecepatan, dan konektivitas website.

Konsultasi aja dulu. Gratis!

Hubungi kami untuk mendapatkan proposal penawaran jika project brief/requirement (dokumen proyek) sudah ada dan lengkap.
Konsultasi yuk ->
Butuh konsultasi?
Hai,

Alan Creative disini, kami berharap anda tersenyum dan bahagia hari ini. Ada yang dapat kami bantu? Jika iya, jangan sungkan menghubungi kami.

Salam hangat,
Alan Creative