Membuat Halaman Web CV Online dengan Vuejs + Vuetify

By -
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

Post a Comment

Popular posts from this blog

Contoh Inheritance (Pewarisan) di Java

By -
Image
diupdate 24 November 2023 Inheritance atau pewarisan, dalam paradigma pemrograman berorientasi objek bisa diartikan membuat suatu class yang mirip seperti class yang lain. Ada class yang ditiru (class induk / parent / superclass) dan ada class hasil tiruan / hasil turunan (class child / subclass). Subclass akan mewarisi atribut dan method-method yang ada pada superclass. Contoh inheritance atau pewarisan dalam OOP misalnya sebagai berikut. Ada class Karyawan yang memiliki atribut NIP, nama, dan jenis kelamin serta dua buah method yaitu masukKerja() dan beriNama(String nama). Apabila digambarkan dalam class diagram seperti berikut Dibuat source code dalam bahasa pemrograman Java sebagai berikut Dibuat class baru yaitu Dosen, class Dosen adalah turunan dari class Karyawan. Dalam bahasa pemrograman Java untuk membuat pewarisan digunakan keyword extends ketika menuliskan deklarasi class (lihat baris ke tiga di source berikut). Class Dosen akan mewarisi atribut NIP, nama, dan je...
Read more

Review Singkat Pilihan Transportasi Umum Rute Solo - Wonosobo

By -
Karena satu hal, saya cukup sering bolak balik Solo - Wonosobo. Jarak dua kota tersebut cukup jauh, sebenarnya bisa saja ditempuh dengan kendaraan pribadi seperti sepeda motor namun kadang untuk meminimalisir rasa capek akibat mengemudi saya memilih naik kendaraan umum. Terdapat beberapa pilihan moda transportasi umum untuk rute Solo - Wonosobo. Sejumlah bus AKAP asal Jawa Timur saat ini telah memperluas jangkauannya hingga mencapai Purbalingga, kita dapat memilih naik Eka atau Sugeng Rahayu jurusan Purbalingga yang melalui Wonosobo. Bus-bus AKAP ini cukup nyaman dengan fasilitas standar bus PATAS Jawa Timuran : AC dingin, interior terawat, dan tidak ketinggalan full music Jawa.  Dari segi harga, saya sudah agak lupa karena sudah lama tidak naik bus ini, namun kalau saya tidak salah ingat saat ini untuk jurusan Solo - Wonosobo sudah tembus di atas 100 ribu rupiah. Kenaikan harga BBM yang kemudian diikuti pandemi Covid-19 berkontribusi mengerek tarif bus, padahal dulu di tahun 2018 ...
Read more

Physical address dan Logical Address dalam Jaringan Komputer

By -
Image
Dalam jaringan komputer, setiap node (misalnya PC atau perangkat smartphone) yang terhubung diberikan suatu alamat agar dapat berkomunikasi dengan node lainnya. Dalam arsitektur TCP/IP, terdapat empat jenis alamat, yaitu : 1. Physical address 2. Logical address 3. Port address 4. Application-specific address   Physical address adalah alamat suatu node yang ditentukan oleh jaringan (LAN atau WAN), alamat ini diinclude-kan dalam frame data yang digunakan oleh data link layer. Ukuran dan format dari physical address tersebut sangat bervariasi tergantug pada jaringannya, misal pada ethernet digunakan alamat 6-byte (48 bit) yang diasosiasikan dengan sebuah network interface card (NIC). Karena ukuran dan format physical address yang berbeda-beda (tergantung jenis jaringan), maka jenis alamat ini kurang cocok untuk lingkungan internetwork yang di dalamnya terdapat sejumlah jaringan dengan format alamat yang berbeda-beda. Untuk mengatasi hal tersebut, diperlukan adanya alamat univ...
Read more