Bagikan melalui


Membuat proyek Vue.js

Dalam pengenalan 5-10 menit ini ke lingkungan pengembangan terintegrasi Visual Studio (IDE), Anda membuat dan menjalankan aplikasi web frontend Vue.js sederhana.

Prasyarat

Pastikan untuk menginstal perangkat lunak berikut:

Membuat aplikasi Anda

  1. Di jendela Mulai (pilih File>Jendela Mulai untuk dibuka), pilih Buat proyek baru.

    cuplikan layar memperlihatkan Buat proyek baru

  2. Cari Vue di bilah pencarian di bagian atas lalu pilih Vue App untuk JavaScript atau TypeScript.

    cuplikan layar menampilkan proses memilih templat

    Mulai dari Visual Studio 2022 Versi 11, nama templat diubah dari Proyek JavaScript Vue Mandiri menjadi Aplikasi Vue.

  3. Beri nama proyek dan solusi Anda, lalu pilih Berikutnya.

  4. Pilih Buat, lalu tunggu Visual Studio untuk membuat proyek.

Menampilkan properti proyek

Pengaturan proyek default memungkinkan Anda untuk membangun dan men-debug proyek. Tetapi, jika Anda perlu mengubah pengaturan, klik kanan proyek di Penjelajah Solusi, pilih Properti, lalu buka bagian Linting, Build, atau Penerapan.

Untuk konfigurasi debugger, gunakan launch.json.

Nota

launch.json menyimpan pengaturan startup yang terkait dengan tombol Mulai di toolbar Debug. Saat ini, launch.json harus berada di bawah folder .vscode.

Bangun Proyek Anda

Pilih Build>Build Solution untuk menyusun proyek.

Memulai Proyek Anda

Tekan F5 atau pilih tombol Mulai di bagian atas jendela, dan Anda akan melihat prompt perintah seperti:

  • VITE v4.4.9 siap dalam 780 ms

    Nota

    Periksa output konsol untuk pesan, seperti pesan yang menginstruksikan Anda untuk memperbarui versi Node.js.

Selanjutnya, Anda akan melihat aplikasi Vue.js dasar muncul!

Langkah berikutnya

Untuk integrasi ASP.NET Core: