Vue CLi UI — Manajemen Projek Vue Dengan Graphical Interface Yang Praktis
Halo teman teman :) sekarang kita akan bahas salah satu fitur dari Vue CLI yaitu manajemen vue dengan GUI. Tentunya dengan menggunakan fitur ini manajemen projek kita akan jadi lebih enak karena dengan tampilan yang modern ala vue yang pasti mempersingkat waktu kita yang biasanya kita mengetik di terminal sekarang cukup klik-klik aja.
Instalasi Vue CLI
Pertama, Pastinya kalian harus menginstall vue-cli dahulu. Cukup ketik
$ npm install -g @vue/cli# OR$ yarn global add @vue/cli
Lalu Cek Apakah berhasil terpasang dengan
$ vue --versionMembuat Projek Baru
Untuk Membuat Projek dengan Vue Cli UI , cukup ketik $ vue ui di terminal lalu tunggu proses nya
Setelah muncul “Ready on…” maka kalian bisa langsung buka di browser alamat url nya yaitu http://localhost:8000 sesuai dengan perintah di terminal tersebut
Tampilan pertama seperti gambar diatas, untuk membuat projek vuejs baru , silahkan menuju ke tab “Create”
Pilih lokasi project vue akan diinstal, lalu jika sudah yakin lokasinya maka tekan “Create a new project here”
Isi Project Folder dengan nama Aplikasi Vue Yang Akan Kamu Buat dan nantinya juga akan jadi nama folder aplikasi tersebut. Lalu pilih Package Manager untuk dijadikan managemen nantinya dan sebagai contoh diatas saya memakai yarn. jika sudah klik Next.
Disini kita akan memilih Preset, saya akan pilih Default Vuejs, Lalu Klik “Create Project”
Lalu Tunggu sampai proses creating project selesai.
Jika sudah tampil seperti diatas, selamat kamu sudah membuat projek baru dengan menggunakan Vue Cli UI
Menambahkan dependencies
Silahkan teman teman menuju ke folder projek vuejs, sebagai contoh saya ada di ~/Project/myapp/tes-vue lalu ketik vue ui
$ cd ~/Project/myapp/tes-vue
$ vue ui
Setelah itu buka di Browser, dan menuju ke Tab dependencies, disini kalian bisa dengan mudah menambah baru, menghapus bahkan memperbarui dependencies dengan mudah.
sebagai contoh saya ingin menambahkan vuetify , dengan cara klik install dependency, akan muncul modal dan ketik di searchbar “vuetify”, lalu klik vuetify tersebut lalu klik tombol dibawah “install vuetify”.
Menjalankan Vuejs
Kamu juga bisa dengan mudah menjalankan dev vuejs kamu, cara nya serpti sebelumnya masuk ke folder projek di terminal lau ketik vue ui
Lalu ke tab “Tasks” pilih menu “serve” dan klik tombol “Run task”. tunggu proses building.
Setelahbuilding success, kalian akan menemukan tombol “Open App” untuk membukanya.
Membuka Projek ke Text Editor
Caranya cukup mudah, klik saja tombol dropdown dengan nama projek pojok kanan atas lalu pilih open in editor
Lalu Projek akan terbuka di Text Editor default teman teman.
Begitulah beberapa Fitur yang bisa kalian Gunakan di Vue Cli UI ini, dan perlu anda ketahui projek Vue Cli UI ini masih beta, jadi maklumi saja jika ada beberapa kekurangan. Tapi sampai detik ini, saya sendiri masih belum pernah mengalami masalah yang berarti dari Vue CliUI ini, jadi masik layaklah dipakai walaupun masih dalam versi beta.
Tak hanya itu juga, akan ada fitur baru di Dashboard Projek Kalian, diamana disana akan ada beberapa widget yang bisa ditambahkan yang memudahkan pastinya dan monitoring projek kita.
Sumber :
https://cli.vuejs.org/guide/creating-a-project.html#vue-create
