Mulai cepat: Membuat proyek Vue.js

Dalam Mulai Cepat ini, Anda membuat dan menjalankan aplikasi web front-end Vue.js dasar. Artikel ini menyediakan pengenalan 5-10 menit untuk lingkungan pengembangan terintegrasi (IDE) Visual Studio.

Prasyarat

Siapkan konfigurasi Anda dengan prasyarat berikut:

• Visual Studio 2022 atau yang lebih baru (Dapatkan versi gratis di unduhan Visual Studio)

• npm (disertakan dengan Node.js, https://www.npmjs.com/)

• Vue.js (Penginstalan | Vue.js (vuejs.org))

Membuat aplikasi Vue Anda

Buat aplikasi web Vue.js dengan mengikuti langkah-langkah berikut:

1. Di jendela mulai Visual Studio (pilihJendela Mulai>), pilih Buat proyek baru.

   

   

2. Dalam dialog Buat proyek baru , masukkan Vue di kotak pencarian. Pilih templat Aplikasi Vue untuk JavaScript atau TypeScript, dan pilih Berikutnya.

   

   

   Di Visual Studio 2022 versi 11 dan yang lebih baru, nama templat Vue JavaScript Mandiri Project diubah menjadi Aplikasi Vue.

3. Masukkan nama untuk proyek dan solusi Anda, dan pilih Buat.

Tunggu hingga Visual Studio membuat proyek baru Anda.

Menampilkan properti proyek

Pengaturan proyek default memungkinkan Anda untuk membangun dan men-debug proyek.

Jika Anda ingin mengubah pengaturan apa pun, ikuti langkah-langkah berikut:

1. Klik kanan proyek di Penjelajah Solusi dan pilih Properti.

2. Di panel properti proyek, pilih Debug, Linting, Build, atau Sebarkan untuk melihat properti yang sesuai.

Untuk konfigurasi debugger, gunakan file launch.json .

Membangun proyek Anda

Untuk membangun proyek baru Anda, pilih Build>Build Solution.

Memulai proyek Anda

Pilih F5 atau gunakan tindakan Mulai di bagian atas jendela.

Proyek membuka jendela Command Prompt dengan teks berikut ini (atau yang serupa):

VITE v4.4.9 ready in 780 ms

Ketika proses berhasil, aplikasi Vue.js dasar terbuka.

Langkah selanjutnya