Instalasi Vite + Vue 3 + Vant 3

 Vite sejak dirilis hingga sekarang menjadi rekomendasi dalam pembuatan aplikasi web khususnya menggunakan framework VueJs. 

Jasawebmedan sebagai pioner pembuatan website dan aplikasi berbasis web dan mobile di Medan sejak 2020 aktif menggunakan framework VueJS untuk penyelesaian project sehari-hari. 

Berikut ini langkah-langkah menginstal Vite + Vue di komputer lokal dan menggunakan Vant versi 3 sebagai framework untuk membangun user interfacenya.

1. Instalasi Vite + Vue

Vite membutuhkan node versi 12 keatas. Cek versi dari terminal dengan mengetikkan:

node -v

jika persyaratan memenuhi, ketikkan perintah

npm init [email protected] folder-kerja -- --template vue

setelah itu masuk ke folder-kerja, ketikkan

        cd folder-kerja

        npm install

2. Instalasi Vant 3

Kita lanjutkan menginstal framework user interface yang akan menghasilkan komponen-komponen siap pakai dengan tampilan yang menawan, hehehe.

npm i [email protected] -S

agar Vant bisa dikenali, kita perlu install vite-plugin-style-import

npm i vite-plugin-style-import -D

kemudian pada file vite.config.js, lakukan edit sebagai berikut

// vite.config.js import vue from '@vitejs/plugin-vue'; import styleImport from 'vite-plugin-style-import'; export default { plugins: [ vue(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), ], };