Bagikan melalui

Tutorial: Vue.js untuk Pemula

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

Prasyarat

Coba NodeJS dengan Visual Studio Code

Jika Anda belum memilikinya, instal VS 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.

    preset CLI Vue

  4. Buka direktori aplikasi hello-vue-app yang 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.

    Nota

    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 Vue ditampilkan. Temukan file App.vue di Visual Studio Code. Coba ubah "Selamat Datang di Aplikasi Vue.js Anda" menjadi "Selamat Datang di Hutan!". Anda akan melihat aplikasi Vue Anda melakukan "pemutakhiran langsung" segera setelah Anda menyimpan perubahan.

    Hot reload aplikasi Vue saat terjadi perubahan gif animasi

Sumber daya tambahan