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 pengantar 5-10 menit ke lingkungan pengembangan terpadu (IDE) Visual Studio ini, 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 memasang Visual Studio 2019, buka halaman unduhan Visual Studio untuk memasangnya 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 pengembangan Node.js, lalu pilih Ubah.
Anda harus menginstal runtime Node.js.
Jika Anda belum 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 dalam Visual Studio, termasuk dalam beban kerja Node.js, mendukung kedua versi. Hanya satu yang diperlukan dan alat penginstal Node.js hanya mendukung satu penginstalan pada satu waktu.
Secara umum, Visual Studio secara otomatis mendeteksi runtime Node.js yang diinstal. Jika tidak mendeteksi waktu proses yang diinstal, Anda dapat mengonfigurasi proyek Anda untuk merujuk waktu proses yang diinstal di halaman properti (setelah Anda membuat proyek, klik kanan node proyek, pilih Properti, dan atur Jalur Node.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). Pada kotak dialog yang muncul, ketik nama basic-vuejs, lalu pilih Buat.
Jika Anda tidak melihat templat proyek Aplikasi Web Vue.js Dasar, Anda harus menambahkan beban kerja pengembangan Node.js. Untuk instruksi terperinci, lihat Prasyarat.
Visual Studio membuat proyek baru. Proyek baru terbuka di Penjelajah Solusi (panel kanan).
Periksa jendela Output (panel bawah) untuk kemajuan dalam menginstal paket npm yang diperlukan untuk aplikasi.
Di Penjelajah Solusi, buka node npm dan pastikan bahwa semua paket npm yang tercantum diinstal.
Jika terdapat paket yang hilang (ikon tanda seru), Anda dapat mengeklik kanan node npm dan memilih Instal Paket npm yang Hilang.
Menjelajahi IDE
Lihat Penjelajah Solusi di panel kanan.
Yang disorot dalam huruf tebal adalah proyek Anda, menggunakan nama yang Anda berikan di kotak dialog Proyek Baru. Pada disk, proyek ini direpresentasikan oleh file njsproj di folder proyek Anda.
Di tingkat atas adalah solusi, yang secara default memiliki nama yang sama dengan proyek Anda. Solusi, yang direpresentasikan oleh file .sln di disk, adalah kontainer untuk satu atau lebih proyek terkait.
Node npm menampilkan semua paket npm yang diinstal. Anda dapat mengeklik kanan node 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 node 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 Tambah>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 Vue TypeScript, lalu klik Tambahkan.
Visual Studio menambahkan file baru ke proyek.
Membangun proyek
Berikutnya, pilih Build>Build Solusi untuk membangun proyek.
Periksa jendela Output untuk melihat hasil build, dan pilih Build dari daftar Tampilkan output dari.
Templat proyek JavaScript Vue.js (dan versi lama dari templat TypeScript) menggunakan skrip npm build dengan mengonfigurasi peristiwa pembuatan posting. 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 melihat pesan Memulai Server Pengembangan.
Kemudian, aplikasi terbuka di browser.
Jika Anda tidak melihat aplikasi yang sedang berjalan, refresh halaman.
Tutup browser web.
Selamat atas penyelesaian Mulai Cepat ini! Kami harap Anda belajar sedikit tentang penggunaan Visual Studio IDE dengan Vue.js. Jika Anda ingin mempelajari lebih dalam kemampuannya, lanjutkan dengan tutorial di bagian Tutorial pada daftar isi.