Rumahweb Blog
banner blog - Apa itu Vue JS Pengertian dan Keunggulannya

Apa itu Vue JS? Pengertian dan Keunggulannya

Vue JS adalah framework Javascript yang sangat ringan dan powerful. Apabila telah menguasai dasar HTML, CSS dan Javascript, mempelajari Vue JS akan mengembangkan kemampuan coding Anda.

Di artikel ini, Anda akan mendapatkan informasi mengenai pengertian, keunggulan, hingga alasan kenapa banyak orang memilih Vue JS untuk membangun aplikasi front end. Anda juga akan mengenal sejarah singkat Vue JS serta mengetahui hal mendasar apa saja yang perlu dikuasai sebelum berkiprah menggunakan Vue JS. Dan yang terakhir, panduan untuk melakukan instalasi Vue Js.

Apa itu Vue JS?

Vue Js merupakan framework Javascript yang digunakan untuk membuat aplikasi modern. Dilansir dari laman resminya, Vue.js sering disebut dengan Vue saja. Bila diucapkan seperti berbunyi view atau /vjuː/ .

Di arsitektur MVC, Vue bekerja dibagian view saja (tampilan). Untuk back end-nya Anda bebas menggunakan apapun yang Anda suka. Bisa deploy dengan NodeJS, PHP, Python ataupun yang lainnya.

Selain digunakan untuk membangun project website, Vue juga banyak digunakan untuk membangun aplikasi desktop maupun mobile

Mengapa orang memilih Vue JS

Meskipun sudah ada FrameWork Javascript seperti Angular dan React, lalu untuk apa ada Vue JS?

Singkat cerita, Evan You, mantan pekerja Google, pernah mengerjakan beberapa proyeknya menggunakan AngularJS. Setelah sering bekerja dengan FrameWork tersebut, ia mulai berpikir untuk menghadirkan sesuatu yang lebih baik, ringan, dan powerful. Hingga lahirlah Vue JS pada Februari 2014 dengan ukuran file yang sangat kecil, tidak lebih dari 24KB.

Beberapa alasan kenapa orang memilih Vue JS, antara lain:

  • Ukurannya kecil
    Salah satu poin yang menjadi kebanggaan Vue JS adalah ukurannya yang sangat kecil. Dengan tidak lebih dari 24KB, menjadikan Vue sebagai FrameWork Javascript yang paling ringan.
  • Mudah digunakan
    Vue JS mudah dipahami dan digunakan untuk mengembangkan aplikasi
  • Dokumentasi yang detail
    Dokumentasi yang ditulis dengan sangat detail dan lengkap. Anda pun bisa mempelajari dengan mudah disana.
  • Fleksibilitas
    Vue Js memungkinkan Anda untuk bisa menulis template Vue di dalam HTML, file JavaScript, ataupun file JavaScript murni menggunakan node virtual. Fleksibilitas ini memudahkan juga untuk dipahami oleh para pengembang FrameWork JavaScript lain seperti React.js, Angular.js.

Install Vue JS di Komputer

Persiapan

Untuk bisa memulai coding menggunakan Vue, ada beberapa syarat yang perlu Anda penuhi. Anda harus sudah familiar atau pernah mempelajari HTML, bekerja manipulasi website menggunakan CSS, dan juga perlu belajar tentang dasar-dasar Javascript.

Peralatan

Peralatan yang perlu disiapkan antara lain;

  • Text Editor, bisa memilih menggunakan VS Code, Notepad++ atau yang lainnya
  • Install NodeJS dan NPM
  • Vue CLI
  • Web Browser

Cara Install Vue JS

Panduan instalasi Vue JS berikut ini, adalah dengan komputer yang menggunakan OS Windows. 

Langkah 1. Install Node JS

Untuk memulai project ini, silakan menginstal Node JS terlebih dahulu dengan download file installer Node JS di halaman berikut. Pilih tipe sistem operasi yang digunakan di komputer Anda. Setelah selesai download, tinggal melanjutkan proses instalasi mengikuti instruksi yang diberikan. 

Langkah 2. Cek Instalasi Node JS

Setelah melakukan instalasi Node JS, selanjutnya dicek terlebih dulu, apakah Node JS sudah berhasil terinstal atau belum. Untuk mengeceknya, silakan buka CMD atau Command Prompt

gambar 1 - Cara buka CMD Command Prompt Windows

Setelah itu ketikkan perintah berikut:

node -v

Lalu, Anda akan menjumpai tampilan berikut bila Node JS telah berhasil diinstal.

gambar 2 - Cek versi Node JS

Langkah 3. Instal Vue JS

Sebelum lanjut ke langkah instal Vue JS, silakan Anda menghapus cache CMD yang ada terlebih dahulu, dengan menggunakan perintah berikut:

npm cache clean –force

gambar 3 - Membersihkan Cache di CMD

Setelah cache bersih, lanjutkan instal Vue JS dengan perintah

npm install -g @vue/cli

Untuk menginstal ini, pastikan komputer Anda telah terhubung dengan jaringan Internet. Karena perintah ini akan mengunduh langsung dari server Vue.

Langkah 4. Membuat Project Vue

Pertama, silakan masuk ke directory tempat dimana project Vue Anda tersimpan. Pada panduan, project ditempatkan di direktori C:\xampp\htdocs\vueproject.

gambar 4 - Lembar Kerja Vue JS di Komputer Saya

Kedua, untuk membuat project Vue, Anda cukup jalankan perintah berikut di CMD, dan ganti myproject dengan nama direktori lembar kerja Anda.

vue create myproject

Ketiga, Anda akan diminta untuk memilih opsi instalasi Vue. Disana akan ditemui 2 pilihan, yaitu Default dan Manually. Di panduan ini, Default dipilih supaya bisa menggunakan pengaturan standar Vue. Lanjutkan dengan tekan Enter.

gambar 5 - Install Vue JS

Selanjutnya, silakan tunggu proses instalasinya selesai, hingga muncul pesan Successfully created project vueproject seperti gambar dibawa ini.

gambar 6 - Proses instalasi Vue JS

Lanjutkan dengan masuk ke directory kerja Anda, kemudian jalankan Vue JS dengan perintah 

npm run serve

Setelah itu, Anda akan menjumpai tampilan seperti gambar berikut.

gambar 7 - Running Project Vue JS

Sampai disini, Vue telah berhasil running. Untuk mengaksesnya, silakan menggunakan pilihan alamat diatas.

gambar 8 - Tampilan Welcome hasil instalasi VueJS

Jika sudah muncul tampilan seperti diatas, maka Anda telah berhasil menginstall Vue Js di komputer. Setelah ini Anda sudah bisa mengeksplor lebih lanjut di direktori kerja Vue JS untuk membiasakan diri. Bila Anda ingin belajar tentang dasar-dasar Vue, Anda bisa mengunjungi website W3School atau halaman resmi dari VueJS langsung. 

Kesimpulan

Vue JS adalah FrameWork Javascript yang sangat ringan dan powerful. Bila Anda ingin men-deploy project langsung di hosting, Anda bisa menggunakan paket Medium atau Large hosting murah dari Rumahweb Indonesia. Di paket ini Anda diberikan akses SSH yang memungkinkan untuk bekerja menggunakan command/ shell.

Jangan sampai terlewat informasi promo dan diskon seru terbaru dari Kami lainnya, dengan memantau media sosial kami, atau bisa dengan menghubungi support live chat yang online 24/7. 

Berikan Komentar

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 0 / 5. Vote count: 0

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Anggit Puguh