Tutorial pengenalan VUE3: Gunakan vue-loader untuk menghuraikan dan menyusun komponen Vue.js

Vue.js ialah rangka kerja JavaScript popular yang cukup berkuasa dalam membina aplikasi web moden. Berbanding dengan rangka kerja MVC tradisional, Vue.js menyediakan cara yang lebih semantik dan intuitif untuk membina antara muka pengguna. Versi Vue 3 yang dikeluarkan baru-baru ini memperkenalkan banyak ciri dan pengoptimuman baharu, menjadikan penggunaan Vue.js lebih mudah diakses dan fleksibel.

Dalam Vue.js, komponen ialah salah satu konsep abstrak yang paling penting. Setiap komponen boleh mengandungi templat, data dan kaedahnya sendiri dan boleh digunakan semula dengan mudah tanpa mengambil berat tentang keseluruhan keadaan aplikasi. Vue.js menyediakan sistem komponen yang fleksibel supaya pembangun boleh mencipta komponen yang sangat boleh disesuaikan dan boleh digunakan semula. Artikel ini akan memperkenalkan penggunaan vue-loader untuk menghuraikan dan menyusun komponen Vue.js.

Apakah itu Vue-loader?

Vue-loader ialah pemalam Webpack yang dilancarkan secara rasmi oleh Vue.js Ia digunakan untuk menghuraikan dan menyusun fail .vue tukar fail .vue Tukar kod HTML, CSS dan JavaScript dalam fail ke dalam modul JavaScript supaya Webpack boleh memproses modul ini dan menggabungkannya ke dalam fail JavaScript akhir.

Fungsi utama Vue-loader termasuk:

• Parse .vue files
• Sokongan prapemproses (seperti Sass dan Less)
• Kompilasi Templat, skrip dan gaya dalam fail .vue

Pemasangan Vue-loader

Untuk menggunakan Vue-loader, anda perlu memasang Vue.js dan Webpack terlebih dahulu. Anda boleh memasang kebergantungan ini dalam baris arahan menggunakan npm:

npm install vue webpack webpack-cli vue-loader vue-template-compiler -D

Selepas pemasangan selesai, anda perlu memuatkan pemalam Vue-loader dalam fail konfigurasi Webpack. Buka fail webpack.config.js dan tambahkan kod berikut:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
    // make sure to include the plugin!
  ]
}

Sekarang, apabila Webpack membina aplikasi anda, Vue-loader akan menghuraikan dan menyusun semua fail .vue secara automatik.

Cara Komponen Vue Ditulis

Komponen Vue ialah blok binaan asas untuk membina aplikasi dengan Vue.js. Seperti yang dinyatakan di atas, Vue-loader menghuraikan semua fail .vue ke dalam modul JavaScript. Oleh itu, anda perlu menggunakan sintaks tertentu untuk menulis komponen Vue. Dalam artikel ini, kami akan menggunakan sintaks Komponen Fail Tunggal (SFC) untuk menulis komponen Vue.

SFC ialah sintaks untuk membungkus semua templat, skrip dan gaya ke dalam satu fail .vue. Setiap fail SFC mengandungi kandungan berikut:

<template>
  <!-- HTML模板 -->
</template>

<script>
export default {
  // Vue组件选项
}
</script>

<style>
/* 样式 */
</style>

Dalam coretan kod di atas, anda boleh melihat tiga bahagian penting komponen: