Lewati ke konten utama

🚀 Memulai dengan Vue.js

Pada bagian ini, kamu akan mempelajari cara menginstal dan menjalankan proyek Vue.js, baik secara langsung di HTML maupun menggunakan Vue CLI untuk aplikasi skala besar.

🛠️ 1. Menggunakan CDN (Tanpa Build Tools)​

Cara tercepat untuk mencoba Vue adalah dengan menyertakan library langsung dari CDN.

Contoh:​

<!DOCTYPE html>
<html>
  <head>
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Halo dari Vue.js!'
        }
      })
    </script>
  </body>
</html>

⚙️ 2. Menggunakan Vue CLI (Project Skala Menengah/Besar)​

a. Instalasi Vue CLI​

Pastikan Node.js dan npm sudah terinstal:

node -v
npm -v

Lalu install Vue CLI secara global:

npm install -g @vue/cli

Atau gunakan yarn:

yarn global add @vue/cli

b. Membuat Proyek Baru​

vue create my-vue-app

Pilih preset:

  • Default: Babel + ESLint
  • Manual: Tambahkan fitur seperti Vuex, Vue Router, TypeScript

c. Menjalankan Proyek​

cd my-vue-app
npm run serve

Hasilnya dapat diakses di http://localhost:8080

🧱 3. Struktur Folder Proyek​

Folder / FileFungsi
public/Aset statis (favicon, index.html)
src/Sumber utama kode aplikasi Vue
src/App.vueKomponen root utama
src/main.jsTitik masuk aplikasi Vue
src/components/Tempat menyimpan komponen
package.jsonKonfigurasi npm & dependensi proyek

📦 4. Alternatif: Vite (Starter Ringan)​

Vite adalah bundler modern yang lebih cepat.

Cara membuat proyek:

npm create vite@latest my-vite-app -- --template vue
cd my-vite-app
npm install
npm run dev

🔍 5. Pengujian Lokal​

Pastikan semua berjalan dengan baik:

  • Halaman utama menampilkan logo Vue

  • Struktur file App.vue bisa diubah

  • Komponen bisa ditambahkan ke folder components/