9 Langkah Cara Install Vue 3 dengan Vite

Macam mana nak install projek Vue JS? Ikuti 9 langkah mudah cara install Vue 3 di PC/laptop anda menggunakan Vite:

1. Pastikan kita sudah ada Terminal (macOS/Linux) atau gunakan Git Bash (Windows) untuk run command.

2. Lepas tu, kita perlukan NodeJS (run-time environment).
Boleh gunakan nvm (Node Version Manager) atau download installer Nodejs daripada laman web nodejs.org
Nodejs ni dah install sekali dengan npm (Node Package Manager) untuk kita install apa-apa npm package yang diperlukan.
Buka Terminal/CMD. Semak versi Node JS sama ada sudah tersedia di dalam laptop kita:

node -v && npm -v

3. Kemudian, kita boleh gunakan Visual Studio Code (atau apa-apa code editor) untuk edit source code di dalam projek Vue kita. Semak versi VS Code sama ada sudah tersedia di dalam laptop kita:

code -v

Dah ada 3 tool asas ni? Cukup!

Saya nak letak folder projek ni dalam Desktop dengan nama vue2024

4. Sekarang, kita akan gunakan Vite untuk install Vue. Buka terminal. Run command

npm create vite@latest vue2024

untuk download Vue 3.

5. Jika keluar prompt
Need to install the following packages: create-vite@[latest-version]
sebegini (untuk first time Vite user), taip ‘y’ untuk proceed.

6. Bila diminta untuk pilih framework, boleh pilih Vue

7. Kemudian kita diminta untuk pilih variant. Untuk permulaan, tak perlu pilih Typescript atau lain-lain. Jadi, kita pilih Javascript sahaja.

8. Bila dah selesai muat turun & scaffolding, masuk ke folder vue2024 tersebut. Run

cd vue2024

npm install

npm run dev

untuk test dalam mode development.

9. Klik http://127.0.0.1:5173 (localhost, port 5173 – atau port lain yang available) dan lihat paparan utama projek Vue di web browser.

Siap! Sekarang kita boleh mulakan pembangunan aplikasi web menggunakan Vue framework.

Seterusnya, kita akan belajar mengenai struktur projek Vue yang sudah kita install. Nantikan entri akan datang!