Membuat Halaman Web CV Online dengan Vuejs + Vuetify

Vue (dibaca view) adalah web framework untuk membuat front end. Menggunakan vue kita bisa membuat web yang terasa "modern". Untuk dapat menggunakan vue, developer sebaiknya terbiasa menggunakan CLI (command line interface) karena mulai dari pembuatan project hingga build dieksekusi melalui CLI.

Pada tutorial kali ini saya akan membagikan cara membuat halaman web CV online menggunakan Vue yang dilengkapi dengan Vuetify (framework Vue untuk membuat tampilan ala material design yang ada di Android).

Langkah-langkahnya adalah sebagai berikut :

1. Install Vue lewat npm atau yarn
Di sini saya menggunakan yarn di Archlinux
Petunjuk instalasi yarn bisa dilihat di https://yarnpkg.com/lang/en/docs/install
Install Vue menggunakan perintah
yarn global add @vue/cli
// atau jika menggunakan npm :
npm install @vue/cli -g

2. Membuat project Vue
Eksekusi perintah
vue create nama_project
cd nama_project

Selanjutnya tambahkan Vuetify
vue add vuetify

Selanjutnya akan diminta untuk memilih sejumlah konfigurasi, saya memilih semua opsi default.

3. Mencoba menjalankan project
Eksekusi perintah
yarn serve
// atau jika menggunakan npm :
npm run serve

Selanjutnya kita bisa membuka web browser, aplikasi yang kita buat bisa dibuka di localhost:8080

4. Membuat tampilan halaman web
Tampilan halaman web ditulis dalam sebuah file berekstensi .vue yang disimpan di folder src/components. Misalnya seperti yang saya buat berikut, tampilan halaman yang berisi kombinasi komponen card dan list.

Kemudian update App.vue


5. Build project
Project bisa dirun menggunakan perintah
yarn serve
// atau jika menggunakan npm :
npm run serve
Aplikasi bisa juga dimasukkan ke web server dengan cara melakukan build terlebih dahulu, eksekusi perintah
yarn run build
untuk melakukan build.

Setelah mencoba menggunakan Vue, saya menyimpulkan ada kelebihan dan kekurangan.
Kelebihan yang saya rasakan dari Vuejs ini adalah sintaks yang relatif sederhana dan learning curve yang tidak terlalu tinggi bagi developer yang belum pernah menggunakan Vue.
Sedangkan kekurangan yang saya rasakan adalah masih belum banyak dokumentasi dan tulisan dari orang-orang mengenai pembuatan web menggunakan Vue, selain itu adalah seperti project berbasis javascript yang menggunakan node, ukuran node_module yang ada di project sangat besar. Saya mendapati folder project saya berukuran lebih dari 180 MB hanya untuk halaman web tunggal yang setelah dibuild hanya berukuran ratusan KB.


source code https://github.com/ardhiesta/vue_cv

Comments