Instalasi Vue 3 menggunakan Vue CLI & Vite

Instalasi Vue 3 menggunakan Vue CLI

Vue CLI adalah alat untuk membuat proyek Vue secara otomatis dengan konfigurasi yang sudah diatur sebelumnya. Ini adalah pilihan yang bagus jika kamu ingin memiliki kontrol lebih atas pengaturan proyek dan konfigurasi build.

Langkah-langkah:

1. Install Vue CLI secara global (jika belum terpasang): Buka terminal dan jalankan perintah berikut untuk menginstal Vue CLI secara global di komputer kamu:
   

   
     npm install -g @vue/cli
     

2. Buat proyek baru menggunakan Vue CLI: Setelah Vue CLI terpasang, kamu bisa membuat proyek Vue 3 baru dengan perintah berikut:
   

   
     // Pilih salah satu
     vue create nama-proyek
     npm create vue@latest nama-proyek // Rekomendasi karena sesuai Official Docs
     

   Gantilah nama-proyek dengan nama yang kamu inginkan untuk proyekmu.
3. Pilih konfigurasi: Ketika perintah di atas dijalankan, Vue CLI akan menanyakan beberapa pilihan konfigurasi. Pilihlah opsi yang sesuai (misalnya, memilih preset default yang sudah menyertakan Babel, ESLint, dan lainnya).
4. Masuk ke folder proyek: Setelah proyek selesai dibuat, masuk ke direktori proyek tersebut:
   

   
     cd nama-proyek
     

5. Jalankan proyek: Untuk melihat proyek Vue yang baru kamu buat, jalankan perintah berikut:
   

   
     npm run serve
     

6. Proyek Vue akan berjalan di localhost pada port default (biasanya http://localhost:8080).
   

Instalasi Vue 3 menggunakan Vite

Vite adalah alat build yang lebih modern dan cepat, dan sangat disarankan untuk proyek Vue 3. Vite memiliki keunggulan dalam kecepatan dan kemudahan penggunaan. Instalasi dan setup Vite lebih cepat daripada Vue CLI, dan sangat cocok jika kamu menginginkan proses build yang lebih cepat.

Langkah-langkah:

1. Buat proyek baru menggunakan Vite: Buka terminal dan jalankan perintah ini untuk membuat proyek baru menggunakan template Vue:
   

   
     npm create vite@latest nama-proyek -- --template vue
     

   Gantilah nama-proyek dengan nama proyek yang kamu inginkan.
2. Masuk ke folder proyek: Setelah perintah selesai, masuk ke folder proyek:
   

   
     cd nama-proyek
     

3. Install dependensi: Install semua dependensi yang diperlukan dengan menjalankan:
   

   
     npm install
     

4. Jalankan proyek: Untuk memulai server pengembangan, jalankan perintah berikut:
   

   
     npm run dev
     

5. Vite akan menjalankan proyek Vue di http://localhost:5173 (default port). 

Perbandingan Vue CLI dan Vite

• Vue CLI:

  • Lebih banyak konfigurasi dan pilihan

  • Menyediakan preset untuk konfigurasi aplikasi yang lebih lengkap

  • Bisa sedikit lebih lambat dalam build dan hot-reload dibandingkan Vite

• Vite:

  • Kecepatan build dan hot-reload yang lebih cepat

  • Lebih sederhana dan lebih ringan

  • Cocok untuk proyek baru yang menggunakan Vue 3

---

Kedua metode di atas akan memberikan proyek Vue 3 yang siap digunakan.