Cara menggunakan vue dalam vscode

Dalam beberapa tahun kebelakangan ini, rangka kerja Vue dalam bidang pembangunan bahagian hadapan telah menjadi semakin popular dan telah menjadi bahagian pembangunan web yang tidak boleh ditukar ganti. Untuk pembangunan bahagian hadapan, memilih editor kod yang sangat baik adalah sangat penting. Antaranya, Kod Visual Studio (selepas ini dirujuk sebagai Kod VS) sudah pasti pilihan pertama banyak pembangun bahagian hadapan. Jadi, bagaimana untuk menggunakan rangka kerja Vue dalam Kod VS? Artikel ini akan memperkenalkannya kepada anda.

Langkah Satu: Pasang Kod VS dan Vue.js

Pertama, anda perlu memuat turun dan memasang Kod VS, yang boleh didapati di tapak web rasminya https://code.visualstudio.com / . Kedua, anda juga perlu memasang Node.js dan Vue.js pada komputer anda. Masukkan:

node -v

dalam baris arahan untuk menyemak sama ada Node.js telah dipasang Jika tidak, anda boleh memuat turun dan memasangnya dari tapak web rasmi https://nodejs.org/en/. Seterusnya, anda boleh memasang Vue.js melalui arahan berikut:

npm install vue

Langkah 2: Gunakan sambungan Vue

Dalam Kod VS, anda boleh memasang sambungan Vue.js dengan, Kepada mempunyai konfigurasi global dan semakan sintaks rangka kerja Vue. Buka Kod VS dan tekan Ctrl+Shift+X untuk memasukkan pilihan sambungan. Masukkan tiga huruf "Vue" dalam bar carian dan pasang sambungan Vue. Pada ketika ini, anda akan melihat pilihan "Vue" ditambahkan pada bar menu kiri. Klik pilihan ini dan anda boleh menyediakan dan mengurus rangka kerja Vue.

Langkah 3: Buat projek Vue

Selepas memasang konfigurasi di atas, untuk mula menggunakan rangka kerja Vue, kami mula-mula menggunakan alat perancah Vue-cli untuk mencipta projek Vue.

Pasang Vue-cli menggunakan arahan berikut:

npm install -g @vue/cli

Apabila mencipta projek, anda boleh menciptanya melalui pratetap yang disediakan oleh Vue-cli atau mengkonfigurasinya secara manual. Di sini saya menggunakan konfigurasi lalai dan laksanakan baris arahan berikut:

vue create vue-test

Tunggu sebentar, masukkan dua arahan berikut, dan kemudian tekan Enter:

cd vue-test
npm run serve

Paparan dalam konsol Apabila "Berjaya disusun" dipaparkan, anda boleh membuka pelayar dan melawati http://localhost:8080 Apabila anda melihat halaman seperti yang ditunjukkan di bawah, projek Vue telah berjaya dibuat.

Langkah 4: Gunakan komponen Vue

Dalam Vue, komponen ditakrifkan melalui HTML, terutamanya untuk meningkatkan kebolehgunaan semula kod. Dalam Kod VS, anda boleh memisahkan kod HTML anda kepada fail yang berbeza dengan menggunakan komponen Vue, supaya anda boleh menyusun kod anda dengan lebih baik. Di sini, saya menunjukkan kepada anda cara membuat komponen Vue.

Mula-mula, buat folder baharu, bernama "Komponen", dan buat fail bernama "Hello.vue" di bawah folder:

<template>
  <div>
    <h1>{{title}}</h1>
    <h2>{{message}}</h2>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      title: 'Welcome to the Vue World!',
      message: 'Vue is Awesome!'
    }
  }
}
</script>

Selepas mencipta komponen, kita perlu menambah komponen ini kepada contoh akar Vue kami. Dalam fail "App.vue", tambah kod berikut:

<template>
  <div id="app">
    <Hello></Hello>
  </div>
</template>

<script>
import Hello from './components/Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  }
}
</script>

Selepas mencetak dan mengesahkan, jalankan projek dan anda akan melihat output "Hello World" seperti yang ditunjukkan dalam rajah di bawah.

Langkah 5: Gunakan penyahpepijat Vue

Dalam Kod VS, pengguna boleh menggunakan "Vue DevTools" untuk melihat status komponen Vue semasa proses pembangunan, yang berguna untuk menyelesaikan masalah ralat kod dengan cepat sangat membantu. Dalam contoh kami di sini, kami menggunakan penyemak imbas Chrome untuk melihat status komponen Vue Sila pasang penyemak imbas Chrome. Buka Vue DevTools pada penyemak imbas Chrome dan anda boleh melihat status komponen Vue dan apl terbina.

Buka Vue DevTools dalam penyemak imbas Chrome, klik pada mana-mana komponen, anda akan melihat data dan sifat dikira komponen tersebut.

Pada ketika ini, anda telah melengkapkan tutorial tentang cara menggunakan rangka kerja Vue dalam Kod VS. Semoga artikel ini dapat membantu anda. Dalam proses pembangunan anda, saya berharap dapat menggunakan Vue.js untuk lebih banyak percubaan dan amalan!

Atas ialah kandungan terperinci Cara menggunakan vue dalam vscode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!