Cara menggunakan vue hanya selepas mengemas kini

Vue.js ialah rangka kerja bahagian hadapan yang popular, dan versi terbaharunya, Vue 3.0, telah dikeluarkan secara rasmi pada September 2020. Versi baharu membawa beberapa perubahan besar, termasuk prestasi yang lebih baik, sokongan TypeScript yang lebih baik dan cara yang lebih mudah untuk menulis kod. Artikel ini akan memperkenalkan cara pemula boleh menggunakan Vue.js 3.0.

1. Pasang Vue.js 3.0

Sebelum mula menggunakan Vue 3.0, kita perlu memasang Vue.js terlebih dahulu. Vue 3.0 boleh dipasang melalui npm.

Kami boleh membuka tetingkap konsol dan masukkan perintah berikut di dalamnya:

npm install vue@next

Ini akan memasang Vue.js 3.0 secara setempat. Kami boleh menggunakan arahan berikut untuk menyemak versi Vue.js kami yang dipasang pada bila-bila masa:

vue --version

2 Cipta aplikasi Vue.js

Kami boleh menggunakan Vue CLI 4 untuk mencipta Vue baharu. aplikasi js. Vue CLI 4 ialah alat antara muka baris arahan yang boleh membantu kami menjana rangka projek, menyediakan konfigurasi luar kotak dan membina aplikasi Vue.js dengan cepat.

Jika anda belum memasang Vue CLI 4 lagi, buka tetingkap konsol dan masukkan arahan berikut:

npm install -g @vue/cli

Semasa proses pemasangan, anda mungkin diminta memasukkan kata laluan pentadbir anda.

Setelah pemasangan selesai, kami boleh mencipta aplikasi Vue.js baharu. Sila masukkan arahan berikut dalam tetingkap konsol:

vue create my-vue-app

Arahan ini akan mencipta projek baharu bernama "my-vue-app". Semasa penciptaan projek, anda boleh memilih untuk menggunakan tetapan lalai atau mengubah suainya mengikut keperluan.

3. Jalankan aplikasi Vue.js

Selepas melengkapkan penciptaan aplikasi Vue.js, kita boleh memasuki direktori akar aplikasi dan menjalankan arahan berikut untuk memulakan pelayan pembangunan :

cd my-vue-app
npm run serve

Arahan ini akan memulakan perkhidmatan web tempatan supaya anda boleh menjalankan aplikasi Vue.js anda pada komputer setempat anda.

Masukkan http://localhost:8080/ dalam penyemak imbas anda untuk membuka aplikasi.

4. Mula menulis aplikasi Vue.js

Sekarang, kami bersedia untuk mula menulis aplikasi Vue.js. Dalam Vue.js 3.0, cara anda mentakrifkan aplikasi anda sedikit berbeza daripada sebelumnya.

Berikut ialah contoh mudah yang akan memaparkan butang dan apabila butang itu diklik, mesej akan dipaparkan pada skrin:

<template>
  <div>
    <button @click="showMessage">显示消息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: ''
    })

    function showMessage() {
      state.message = '欢迎来到 Vue 3.0!'
    }

    return {
      ...state,
      showMessage
    }
  }
}
</script>

Anda boleh menyalin dan menampal kod ini ke dalam my- vue -app/src/App.vue fail dan simpan fail tersebut.

Semasa apl berjalan, anda akan melihat butang. Apabila butang diklik, mesej akan muncul pada skrin mengatakan "Selamat Datang ke Vue 3.0!".

5. Ringkasan

Vue.js 3.0 membawa banyak peningkatan dan perubahan untuk menjadikan rangka kerja lebih mudah digunakan dan lebih cekap. Dalam artikel ini, kami membincangkan cara memasang dan menggunakan Vue 3.0 dan cara menulis aplikasi menggunakan sintaks Vue.js 3.0 baharu. Saya harap artikel ini membantu dan mula membina aplikasi web anda yang seterusnya dengan Vue.js 3.0!

Atas ialah kandungan terperinci Cara menggunakan vue hanya selepas mengemas kini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!