close

Memasang Vue.js dan Mencipta Projek Pertama Anda

Untuk memasang Vue.js, anda boleh mengikuti langkah di bawah:

Langkah 1: Buat direktori baharu untuk projek anda dan buka terminal dalam direktori itu.

Langkah 2: Gunakan npm untuk memasang Vue CLI(Antara Muka Baris Perintah) dengan menjalankan arahan berikut:

npm install -g @vue/cli


Langkah 3: Selepas pemasangan berjaya, anda boleh mencipta projek Vue baharu menggunakan arahan berikut:

vue create my-vue-project


Langkah 4: Pilih pilihan konfigurasi untuk projek anda, termasuk memasang Babel, ESLint dan Pra-pemproses CSS(pilihan).

Langkah 5: Setelah proses penciptaan projek selesai, navigasi ke dalam direktori projek menggunakan arahan:

cd my-vue-project


Langkah 6: Jalankan arahan berikut untuk memulakan projek Vue:

npm run serve


Selepas proses permulaan selesai, anda akan melihat URL untuk mengakses aplikasi Vue anda pada penyemak imbas.

Contoh mudah Vue.js:

Mari buat fail HTML baharu dan namakannya index.html `. Dalam fail ini, tambahkan kod berikut:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

Dalam contoh ini, kami telah mencipta aplikasi Vue mudah dengan h1 tag dan butang. Apabila butang diklik, mesej akan berubah.

Simpan index.html  fail dan buka dalam penyemak imbas. Anda akan melihat mesej awal sebagai "Hello Vue.js!". Apabila anda mengklik butang, mesej akan bertukar kepada "Mesej berjaya ditukar!".

Ini hanyalah contoh mudah untuk membolehkan anda bermula dengan Vue.js. Anda boleh meneroka lebih banyak ciri dan keupayaan berkuasa Vue.js semasa membangunkan aplikasi anda.