Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Dalam pengenalan 5-10 menit ini ke lingkungan pengembangan terintegrasi Visual Studio (IDE), Anda akan membuat dan menjalankan aplikasi web Vue.js sederhana.
Prasyarat
Anda harus menginstal Visual Studio dan beban kerja pengembangan Node.js.
Jika Anda belum menginstal Visual Studio 2019, buka halaman unduhan Visual Studio untuk menginstalnya secara gratis.
Jika Anda perlu menginstal beban kerja tetapi sudah memiliki Visual Studio, buka Alat>Dapatkan Alat dan Fitur..., yang membuka Alat Penginstal Visual Studio. Pilih beban kerja pengembanganNode.js , lalu pilih Ubah.
Anda harus menginstal runtime Node.js.
Jika Anda tidak menginstalnya, kami sarankan Anda menginstal versi LTS dari situs web Node.js untuk kompatibilitas terbaik dengan kerangka kerja dan pustaka luar. Node.js dibangun untuk arsitektur 32-bit dan 64-bit. Alat Node.js di Visual Studio, yang disertakan dalam beban kerja Node.js, mendukung kedua versi. Hanya satu yang diperlukan dan alat penginstal Node.js hanya mendukung satu instalasi pada satu waktu.
Secara umum, Visual Studio secara otomatis mendeteksi runtime Node.js yang diinstal. Jika tidak mendeteksi runtime yang diinstal, Anda dapat mengonfigurasi proyek Anda untuk mereferensikan runtime terinstal di halaman properti (setelah Anda membuat proyek, klik kanan simpul proyek, pilih Properti, dan atur jalurNode.exe). Anda dapat menggunakan penginstalan global Node.js atau Anda dapat menentukan jalur ke penerjemah lokal di setiap proyek Node.js Anda.
Membuat proyek
Pertama, Anda akan membuat proyek aplikasi web Vue.js.
Jika Anda belum menginstal runtime Node.js, instal versi LTS dari situs web Node.js .
Untuk informasi selengkapnya, lihat prasyarat.
Buka Visual Studio.
Buat proyek baru.
Tekan Esc untuk menutup jendela mulai. Ketik Ctrl + Q untuk membuka kotak pencarian, ketik Basic Vue.js, lalu pilih Aplikasi Web Vue.js Dasar (baik JavaScript atau TypeScript). Dalam kotak dialog yang muncul, ketik nama basic-vuejs, lalu pilih Buat.
Jika Anda tidak melihat template proyek aplikasi Web Basic Vue.js, Anda harus menambahkan beban kerja pengembangan Node.js. Untuk petunjuk terperinci, lihat Prasyarat.
Visual Studio membuat proyek baru. Proyek baru terbuka di Penjelajah Solusi (panel kanan).
Periksa jendela Output (panel bawah) untuk kemajuan saat menginstal paket npm yang diperlukan untuk aplikasi.
Di Penjelajah Solusi, buka simpul npm dan pastikan bahwa semua paket npm yang tercantum diinstal.
Jika ada paket yang hilang (ikon tanda seru), Anda dapat mengklik kanan simpul npm dan memilih Instal Paket npm yang Hilang.
Menjelajahi IDE
Lihat Penjelajah Solusi di panel kanan.
Disorot dalam huruf tebal adalah proyek Anda, menggunakan nama yang Anda berikan dalam kotak dialog Proyek Baru . Pada disk, proyek ini diwakili oleh . file njsproj di folder proyek Anda.
Di tingkat atas adalah solusi, yang secara default memiliki nama yang sama dengan proyek Anda. Solusi, yang diwakili oleh . file sln pada disk, adalah kontainer untuk satu atau beberapa proyek terkait.
Simpul npm menunjukkan paket npm yang diinstal. Anda dapat mengklik kanan simpul npm untuk mencari dan menginstal paket npm menggunakan kotak dialog.
Jika Anda ingin menginstal paket npm atau menjalankan perintah Node.js dari prompt perintah, klik kanan simpul proyek dan pilih Buka Prompt Perintah Di Sini.
Menambahkan file .vue ke proyek
Di Penjelajah Solusi, klik kanan folder apa pun seperti folder src/components , lalu pilih Tambahkan>Item Baru.
Jika Anda tidak melihat semua templat item, pilih Perlihatkan Semua Templat, lalu pilih templat item.
Pilih Komponen File Tunggal JavaScript Vue atau Komponen File Tunggal TypeScript Vue, lalu klik Tambahkan.
Visual Studio menambahkan file baru ke proyek.
Membangun proyek
Selanjutnya, pilih Build>Build Solution untuk membangun proyek.
Periksa jendela Output untuk melihat hasil build, dan pilih Bangun dari daftar Tampilkan output dari .
Templat proyek JavaScript Vue.js (dan template TypeScript versi lama) menggunakan build skrip npm dengan mengonfigurasi peristiwa post build. Jika Anda ingin mengubah pengaturan ini, buka file proyek (<projectname.njsproj>) dari Windows Explorer dan temukan baris kode ini:
<PostBuildEvent>npm run build</PostBuildEvent>
Jalankan aplikasi
Tekan Ctrl+F5 (atau Debug > Mulai Tanpa Penelusuran Kesalahan) untuk menjalankan aplikasi.
Di konsol, Anda akan melihat pesan Memulai Server Pengembangan.
Kemudian, aplikasi terbuka di browser.
Jika Anda tidak melihat aplikasi yang sedang berjalan, refresh halaman.
Tutup browser web.
Selamat telah menyelesaikan Panduan Awal ini! Kami harap Anda belajar sedikit tentang menggunakan IDE Visual Studio dengan Vue.js. Jika Anda ingin mempelajari lebih dalam kemampuannya, lanjutkan dengan tutorial di bagian Tutorial dari daftar isi.