SuperApp：Menggunakan kerangka untuk program mini

Prasyarat

Versi terbaru dari Visual Studio Code dan Node telah diunduh dan diinstal.

Inisialisasi kerangka

1. Klik ikon di bilah sisi Visual Studio Code, lalu klik Create Miniapp di jendela saat ini. Halaman pemilihan template akan muncul.

   

2. Pilih template untuk membuat program mini di halaman tersebut. Ekstensi Visual Studio Code untuk WindVane menyediakan tujuh template bawaan, termasuk enam template yang menggunakan framework utama seperti React, Vue, dan Angular, serta satu template tanpa framework.

   

3. Setelah memilih template, kotak dialog penyimpanan file sistem akan muncul. Gambar berikut menunjukkan kotak dialog di sistem macOS. Di kotak dialog, tentukan nama aplikasi, pilih direktori penyimpanan, lalu klik Create untuk menginisialisasi proyek kerangka.

   

   Setelah inisialisasi selesai, ekstensi Visual Studio Code untuk WindVane secara otomatis membuka proyek kerangka.

   Jalankan perintah npm install untuk menambahkan dependensi proyek. Gambar berikut menunjukkan direktori proyek setelah dependensi ditambahkan.

   

   • public berisi sumber daya publik proyek.

   • scripts berisi skrip pembuatan.

   • src berisi file sumber proyek. Terdiri dari subdirektori dan file berikut:

     • assets: menyimpan gambar seperti file logo.

     • components: menyimpan file komponen.

     • index.js: file entri untuk proyek.

   • package.json adalah file konfigurasi proyek.

   • node_modules berisi modul dependensi proyek yang dimuat oleh perintah npm.

   • dist dihasilkan setelah proyek dikemas dengan menjalankan perintah npm run build.

Mengintegrasikan API JavaScript

1. Di ekstensi Visual Studio Code untuk WindVane, IntelliSense tersedia untuk kode terkait API JavaScript WindVane. Jika Anda memasukkan WV di file .js atau .ts, API yang relevan akan ditampilkan.

2. Setelah memilih API JavaScript, potongan kode yang relevan langsung disisipkan untuk mengintegrasikan API tersebut.