Tutorial: Vue.js untuk Pemula
Jika Anda baru menggunakan Vue.js, panduan ini akan membantu Anda memulai beberapa dasar.
Prasyarat
- Anda harus terlebih dahulu menginstal Vue.js pada Windows atau pada 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.
Buka baris perintah Anda dan buat direktori baru:
mkdir HelloVue
, lalu masukkan direktori:cd HelloVue
Instal Vue CLI:
npm install -g @vue/cli
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.
Buka direktori hello-vue-app baru Anda:
cd hello-vue-app
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.
Coba perbarui pesan selamat datang dengan membuka kode sumber aplikasi Vue Anda di Visual Studio Code, masukkan:
code .
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.
Perbandingan Vue dengan kerangka kerja lain seperti React atau Angular
Windows developer