Tutorial: Vue.js untuk Pemula

Jika Anda baru menggunakan Vue.js, panduan ini akan membantu Anda memulai beberapa dasar.

• Coba kotak pasir kode Vue.js HelloWorld
• Coba gunakan Node.js di Visual Studio Code

Prasyarat

• Anda harus terlebih dahulu menginstal Vue.js di Windows atau di Subsistem Windows untuk Linux. Tidak yakin mana yang harus digunakan, umumnya kami merekomendasikan pemula menginstal pada Windows untuk belajar, tetapi profesional menginstal di WSL, lihat Haruskah saya menginstal Node.js di Windows atau Subsistem Windows untuk Linux.

Coba NodeJS dengan Visual Studio Code

Jika Anda belum memilikinya, instal Visual Studio Code. Sebaiknya instal Visual Studio Code di Windows, terlepas dari apakah Anda berencana menggunakan Vue di Windows atau WSL.

1. Buka baris perintah Anda dan buat direktori baru: mkdir HelloVue, lalu masukkan direktori: cd HelloVue

2. Instal Vue CLI: npm install -g @vue/cli

3. Buat aplikasi Vue Anda: vue create hello-vue-app

   Anda harus memilih apakah akan menggunakan Pratinjau Vue 2 atau Vue 3, atau memilih fitur yang Anda inginkan secara manual.

   

4. Buka direktori hello-vue-app baru Anda: cd hello-vue-app

5. Coba jalankan aplikasi Vue baru Anda di browser web Anda: npm run serve

   Anda akan melihat "Selamat Datang di Aplikasi Vue.js Anda" di http://localhost:8080 browser Anda. Anda dapat menekan Ctrl+C untuk menghentikan server vue-cli-service.

   Catatan

   Jika menggunakan WSL (dengan Ubuntu atau distribusi Linux favorit Anda) untuk tutorial ini, Anda harus memastikan bahwa Anda memiliki Ekstensi Jarak Jauh - WSL yang diinstal untuk pengalaman terbaik menjalankan dan mengedit kode Anda dengan server jarak jauh VS.

6. Coba perbarui pesan selamat datang dengan membuka kode sumber aplikasi Vue Anda di Visual Studio Code, masukkan: code .

7. VISUAL Code akan meluncurkan dan menampilkan aplikasi Vue Anda di File Explorer. Jalankan aplikasi Anda di terminal lagi dengan npm run serve dan buka browser web Anda ke localhost sehingga Anda dapat melihat halaman selamat datang halaman Vue ditampilkan. App.vue Temukan file di Visual Studio Code. Coba ubah "Selamat Datang di Aplikasi Vue.js Anda" menjadi "Selamat Datang di Hutan!". Anda akan melihat aplikasi Vue Anda "hot reload" segera setelah Anda menyimpan perubahan Anda.

   

Sumber Daya Tambahan:

• Menggunakan Vue di Visual Studio Code: Temukan selengkapnya tentang menggunakan Vue dengan Visual Studio Code, termasuk ekstensi Vetur yang menyediakan penyorotan sintaks Vue, IntelliSense, dukungan penelusuran kesalahan, dan banyak lagi.

• Dokumen Vue.js

• Perbandingan Vue dengan kerangka kerja lain seperti React atau Angular

• Gambaran umum Vue.js

• Ambil langkah pertama Anda dengan jalur pembelajaran Vue.js