THANK YOU FOR VISITING MY BLOG,THANK YOU FOR READING MY ARTICLES

Please Like, Share, Comment, Like Again, Post, And Don’t Forget To Comment.

THANK YOU FOR VISITING MY BLOG,THANK YOU FOR READING MY ARTICLES

Please Like, Share, Comment, Like Again, Post, And Don’t Forget To Comment.

THANK YOU FOR VISITING MY BLOG,THANK YOU FOR READING MY ARTICLES

Please Like, Share, Comment, Like Again, Post, And Don’t Forget To Comment.

THANK YOU FOR VISITING MY BLOG,THANK YOU FOR READING MY ARTICLES

Please Like, Share, Comment, Like Again, Post, And Don’t Forget To Comment.

THANK YOU FOR VISITING MY BLOG,THANK YOU FOR READING MY ARTICLES

Please Like, Share, Comment, Like Again, Post, And Don’t Forget To Comment.

Friday, July 3, 2020

Membuat Project Dengan Vue UI





VUE.JS


Pada tutorial kali ini kita akan membahas bagaimana cara  membuat project dengan menggunakan Vue UI, pertama buka command line dan ketikan VUE UI seperti gambar yang dibawah.



Setelah mengetikan comman Vue ui seperti gambar diatas maka akan muncul tampilan seperti dibawah, setelah muncul tampilan seperti dibawah maka selanjutnya isi nama project vue yang ingin dibuat.






Isi nama project , pilih package manager yang ingin digunakan, disini saya mengunakan npm dan isi bagian recommended git repository tapi bisa diabaikan.  lalu untuk preset kita akan pilih secara default dari bawaan VUE. UI  




Biasanya akan memerlukan waktu lama untuk membuat sebuah projeact Vue, setelah selesai maka akan keluar tampilan seperti gambar dibawah.






Selanjutnya kita  perlu menambahkan vue.router, vue router ini berfungsi untuk membuat halaman menjadi lebih dari satu karna untuk saat pertama kali kita membuat sebuah project baru divue maka hanya terdapat satu halaman, untuk mentesting atau menampilkan project yang kita buat maka bisa mengclick tombol.






Setelah menjalankan Run task maka tunggu serve untuk membuild setelah berhasil membuild maka click open App seperti gambar dibawah




Maka akan muncul tampilan seperti dibawah, tapi disini hanya ada single page.





Untuk menambahkan beberapa halaman kita perlu untuk menginstall vue router, untuk menambahkan rouver kalian bisa pergi ke pulgins dan click serach dan pilih  @vue/cli pulgin-router seperti gambar dibawah.





Tunggu beberapa saat dan setelah berhasil di install maka akan ada pemberitahuan seperti gambar dibawah, jadi kalian bisa langsung click finish.





Maka secara otomatis vue akan mengenerate halaman baru dan menambahkan beberapa component, ketika kita mendapatkan perubahan dibeberapa document maka akan langsung otomatis terupload kepada github maka akan ada beberapa pemberitahuan seperti apa saja yang telah dihapus, ditambahkan, diubah maka kita bisa melakukan perubahan terhadap github 





Setelah kembali pada VSC ( visual studio code ) kalian bisa melihat difile yang telah kalian buat sebelumnya terdapat perubahan ke versi terbaru atau perubahan di bagian router, nah untuk melihat perubahan yang telah dilakukan maka kalian bisa check halaman UI dibrowser maka akan tampil hasi seperti gambar maka kalian akan menemukan  dua halaman dari perubahan router yang kalian install sebelumnya.