Tutorial Pemrograman : Perkenalan Framework Vue JS untuk Pemula

Framework vue js menjadi framework pada bahasa pemrograman aplikasi berbasis web yang banyak diminati. Selain itu framework vue js mempunyai performa yang tinggi.

Untuk mempelajari lebih dalam mengenai framework vue js ini, Anda dapat membacanya di konten artikel yang telah disusun berikut ini.

Apa itu Vue JS ?

Framework Vue JS merupakan library JavaScript yang dimana bisa digunakan dalam membuat tampilan untuk interface pada sebuah website yang interaktif. Fitur utama pada Framework Vue JS ini pada rendering dan komposisi element. Tapi, jika Anda berencana membuat aplikasi yang lebih kompleks lagi dengan Vue JS, maka Anda membutuhkan routing, state manajemen, template, build-tool dsb.

Selain itu library pada Vue JS berfokus pada view layer. Framework ini juga tergolong mudah untuk diterapkan dengan library lain atau dengan project yang telah Anda buat sebelumnya. Vue JS ini memakai id, name atau class pada suatu component html.

Cara Install Vue JS di Windows

Untuk cara install Vue JS ini, Hal yang pertama dapat Anda lakukan adalah dengan menginstall Node.js . Setelahnya, Anda akan berjumpa dengan NPM. 

NPM merupakan sebuah tool yang dipakai dalam mengelola package JavaScript. Keberadaan NPM ini sangat dibutuhkan agar Anda dapat melakukan instalasi Vue JS.

Berikut untuk langkah-langkah dalam menginstall Vue JS di Windows :

1. Download dan Install Node JS

Agar Anda dapat mendownload file installer Node JS, Anda bisa mendapatkannya dengan klik disini yang mengarahkan Anda ke halaman link download. 

Setelah itu sesuaikan tipe sistem operasi Windows versi 64bit atau 32bit. Lalu pilih salah satu dari kedua versi tsb dan Anda dapat mendapatkan file installer Node JS ini dengan menunggu proses download sampai selesai.

Jika proses download telah selesai, Anda dapat membuka setup instalasi Node JS dan ikuti instruksi instalasinya. Tunggu proses instalasi Node JS ini sampai selesai.

2. Cek Instalasi Node JS

Anda juga dapat memeriksa apakah instalasi pada Node JS Anda telah berhasil atau tidak. Caranyanya dengan menggunakan cmd. Buka file cmd dengan cara klik tombol windows lalu ketik cmd di menu pencarian. Klik kanan juga pada aplikasi Command Prompt, setelahnya pilih Run as Administrator.

Setelah itu, Anda dapat menginputkan perintah seperti di bawah ini agar dapat memastikan proses instalasi Node JS Anda berhasil.

node -v

3. Install Vue JS

Agar dapat terhindar dari kesalahan error pada saat proses instalasi Vue JS, Anda dapat membersihkan cache pada cmd dengan mengetikan perintah seperti di bawah ini :

npm cache clean  –force

Kemudian, mulai install Vue JS seperti di bawah ini :

npm install -g @vue/cli

Saat proses install Anda telah terhubung ke dalam jaringan internet. Pada Proses install tsb membutuhkan resource Vue JS yang pada download file dari ada di Node JS.

Lalu tunggu sampai proses instalasi selesai.

4. Buat Project Vue JS

Setelah proses instalasi Vue JS selesai, Anda dapat langsung mencoba langsung dalam membuat project menggunakan Vue JS.

Langkah pertama Anda dapat masu ke direktori tempat Anda menyimpan project Vue JS. Anda dapat menyimpannya ke direktori Local Disk: D seperti pada panduan ini.

Lalu, buat project baru menggunakan Vue JS dengan menjalankan perintah berikut ke dalam Command Prompt Anda. 

vue create my project

Myproject adalah nama folder yang digunakan sebagai menyimpan project Vue JS. Tapi Anda juga dapat menggunakan nama lain yang sesuai Anda kehendaki.

Setelah itu, Anda dapat memilih opsi instalasi pada Vue CLI. Lalu akan ada dua pilihan yaitu default dan manually. Anda dapat memilih menggunakan pilihan default mengikuti pada panduan ini. Setelah itu, tekan tombol Enter.

Dan proses pembuatan project akan berjalan. Anda dapat menunggu proses ini sampai selesai. Jika proses dalam pembuatan project sudah berhasil, maka akan muncul pesan seperti Successfully created project myproject.

Lalu Anda dapat masuk ke dalam direktori project dan ketikan perintah :

cd myprojects

Kemudian masuk ke dalam direktori project, lalu ketikan perintah berikut untuk menjalankan Vue JS

npm run serve

Terakhir, buka browser Anda dan akses salah satu dari IP/localhost yang tertera pada command prompt Anda. Dan tampilan halaman dari Vue JS telah tertampil.

Setelahnya Anda dapat melakukan proses develop front-end pada website atau aplikasi.

Fitur- fitur di Framework Vue JS

Framework Vue JS memiliki beberapa keunggulan seperti templates, reactivity, components, transitions, dan routing. Berikut beberapa fitur pada Framework Vue JS.

1. Computed Properties

Fitur ini merupakan fitur penting pada Vue JS karena sangat membantu Anda dalam melihat perubahan yang terjadi pada elemen user interface. Jadi Anda pun tidak perlu melakukan penambahan kode.

2. Event Handling

Event handling (v-on) merupakan atribut yang ditambahkan ke elemen DOM pada suatu event Vue JS.

3. Components

Fitur ini dapat membantu dalam membuat elemen kustom pada HTML. Selain itu, elemen kustom ini bisa digunakan secara berulang-ulang.

4. Data Binding

Data binding pada Vue JS berfungsi dalam memanipulasi dan memberikan values pada atribut HTML.

5. Virtual DOM

DOM atau Document Object Model merupakan interface yang digunakan program dalam mengakses dan menambahkan konten di dalam dokumen. Vue JS mempunyai Virtual DOM yang menjadi replika dari DOM.

Fitur ini dapat menyimpan perubahan dokumen di replika DOM yang dapat memudahkan Anda dalam mereview perubahan sebelum menerapkannya di DOM.

6. Lightweight

Fitur ini digunakan untuk membuat script dari Vue JS agar lebih sederhana tapi masih powerful dan sangat cepat.

7. Routing

Fitur ini dapat digunakan untuk penghubung antar halaman. Fitur ini menggunakan vue-router sebagai tambahannya. Selain itu juga dapat membantu dalam membangun website Single Page Applicatioan (SPA) hanya dengan menggunakan satu file HTML yang dapat memanggil semua halaman yang Anda miliki.

8. Watchers

Watcher merupakan fitur yang dapat digunakan pada data yang telah berubah. Contoh dalam bentuk elemen input. Anda pun jadi tidak perlu dalam menambahkan event tambahan pada element input. Watcher bisa mengatasi perubahan pada data apa pun yang memudahkan dalam membuat kode lebih sederhana dan cepat.

9. Directives

Vue JS telah disediakan perintah bawaaan yang bisa digunakan seperti v-if, v-else, v-show, v-on, v-bind, dan v-model, yang bisa digunakan dalam melakukan berbagai aksi pada front end website.

10. Templates

Vue JS mempunyai template berbasis HTML yang dapat menghubungkan DOM dengan datan instance Vue JS. Selain itu, juga dapat mengkompilasi template menjadi fungsi DOM Render virtual.

Kesimpulan

Framework vue js menjadi framework yang sangat populer dan paling sering digunakan karena memiliki struktur kode yang sederhana dan mudah dipahami.

Selain itu Vue JS juga dapat membuat ukuran file kode menjadi kecil yang memudahkan dalam membantu load website menjadi lebih cepat.

Semoga bermanfaat

Anda juga dapat mengikuti informasi di blog IDwebhost ini supaya mendapatkan info seputar bisnis secara gratis.

Lalu, IDwebhost juga memiliki promo hosting dan domain yang dapat digunakan dalam memenuhi kebutuhan hosting atau domain pada website Anda. Salam!