Vue 3 + TypeScript + Vite + TailwindCSS

Link Demo : https://mpl-indonesia.vercel.app
Link Official : https://id-mpl.com

Path Url : "/" and "/teams"

Oleh: Riswan Nopiyar

---

Gambaran Proyek

Proyek ini adalah aplikasi web modern yang dibangun menggunakan teknologi berikut:

• Vue 3: Framework JavaScript progresif untuk membangun antarmuka pengguna.
• TypeScript: Superset JavaScript yang menambahkan pengetikan statis pada bahasa tersebut.
• Vite: Alat build frontend generasi berikutnya yang menyediakan pengalaman pengembangan yang cepat.
• TailwindCSS: Framework CSS berbasis utilitas untuk pengembangan antarmuka pengguna yang cepat.

---

Halaman yang Tersedia

1. Halaman Utama

Path: /

Halaman awal dari aplikasi.

2. Halaman Tim

Path: /teams

Halaman khusus untuk menampilkan tim.

---

Cara Instalasi dan Menjalankan Secara Lokal

Prasyarat

Pastikan Anda telah menginstal perangkat berikut di komputer Anda:

• Node.js (v16 atau lebih tinggi)
• npm atau Yarn

Langkah Instalasi

1. Clone Repository

   git clone https://github.com/Riswan-Nopiyar/mpl-id-mobile-legends-clone.git
   cd mpl-id-mobile-legends-clone

2. Instal Dependensi

   npm install

   Atau jika Anda menggunakan Yarn:

   yarn install

3. Jalankan Server Pengembangan

   npm run dev

   Atau dengan Yarn:

   yarn dev

4. Akses Aplikasi Buka browser Anda dan navigasikan ke http://localhost:5173.

---

Struktur Proyek

src/
├── assets/        # Aset statis seperti gambar atau font dan gaya global TailwindCSS
├── components/    # Komponen Vue
├── layouts/       # Layout yang dapat digunakan kembali
├── router/        # Konfigurasi utama untuk routing sisi klien
├── views/         # Halaman aplikasi
└── main.ts        # Titik masuk aplikasi

---

Perkembangan Proyek

• Fitur yang Selesai:
  • Pengaturan dasar proyek dengan Vite
  • Integrasi TailwindCSS
  • Pembuatan halaman dasar: / dan /teams
• Langkah Berikutnya:
  • Mengimplementasikan routing lanjutan dan manajemen state
  • Mendesain komponen responsif

---