Bagaimana untuk menggunakan Vue untuk pembangunan aplikasi berbilang halaman?

Vue ialah rangka kerja bahagian hadapan yang sangat popular yang boleh membantu kami membina aplikasi satu halaman berprestasi tinggi dan boleh diselenggara. Walau bagaimanapun, kadangkala kita perlu membina aplikasi berbilang halaman, yang memerlukan penggunaan model pembangunan aplikasi berbilang halaman Vue. Artikel ini akan memperkenalkan cara menggunakan Vue untuk pembangunan aplikasi berbilang halaman.

1. Perbezaan antara aplikasi berbilang halaman dan aplikasi satu halaman

Dalam aplikasi satu halaman, semua kandungan dijana secara dinamik melalui JavaScript dan hanya terdapat satu fail HTML. Semasa pengguna berinteraksi dengan aplikasi, hanya komponen dan laluan perlu dikemas kini tanpa memuatkan semula keseluruhan aplikasi.

Dalam aplikasi berbilang halaman, setiap halaman mempunyai fail HTML sendiri, dan setiap kali halaman dibuka, penyemak imbas akan memuatkan fail HTML baharu. Ini bermakna apl berbilang halaman mempunyai lebih banyak kandungan untuk dimuatkan, tetapi ia lebih sesuai untuk situasi di mana SEO diperlukan atau di mana lebih banyak pengoptimuman satu halaman diperlukan.

2. Gunakan Vue CLI untuk mencipta aplikasi berbilang halaman

Kita boleh menggunakan Vue CLI untuk mencipta aplikasi berbilang halaman. Vue CLI ialah alat perancah yang disokong secara rasmi yang menyediakan persekitaran pembangunan dan proses pembinaan yang standard. Berikut ialah contoh mudah:

Mula-mula, pasang Vue CLI.

npm install -g @vue/cli

Kemudian, buat aplikasi berbilang halaman.

vue create my-app --preset multi-page

Ini akan mencipta projek baharu yang dipanggil "apl saya" dan menggunakan pratetap berbilang halaman Vue CLI. Pratetap ini secara automatik akan menjana direktori "src/pages" yang mengandungi dua halaman sampel.

3. Mengkonfigurasi aplikasi berbilang halaman

Seterusnya, kita perlu mengkonfigurasi Vue CLI untuk menyokong aplikasi berbilang halaman. Buka fail "vue.config.js" dan tambah kandungan berikut pada fail:

module.exports = {
  pages: {
    index: {
      entry: 'src/pages/index/main.js',
      template: 'src/pages/index/index.html',
      filename: 'index.html'
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'src/pages/about/about.html',
      filename: 'about.html'
    }
  }
}

Di sini kami mentakrifkan dua halaman: indeks dan kira-kira, sepadan dengan "src/pages/index" dan "src/pages/about" masing-masing "Fail kemasukan dan fail templat dalam direktori. Setiap halaman perlu menentukan fail masukan dan fail templat. Fail kemasukan ialah titik masuk utama program, dan fail templat mentakrifkan struktur dan gaya halaman.

4. Mencipta komponen halaman

Sekarang kita perlu mencipta komponen untuk setiap halaman. Dalam aplikasi sampel, kita boleh mencipta komponen ini di bawah direktori "src/pages/index/components" dan "src/pages/about/components". Sebagai contoh, anda boleh mencipta komponen "Pengepala" dan komponen "Pengaki" dan menggunakannya dalam setiap halaman. Berikut ialah contoh mudah:

<template>
  <div>
    <Header />
    <h1 id="title">{{ title }}</h1>
    <p>{{ message }}</p>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      title: 'About',
      message: 'This is the about page.'
    }
  }
}
</script>

5. Membina dan menjalankan aplikasi

Kini kami telah menyelesaikan konfigurasi dan penciptaan komponen aplikasi berbilang halaman. Seterusnya, kita perlu membina dan menjalankan aplikasi. Jalankan arahan berikut untuk membina aplikasi:

npm run build

Ini akan menjana fail "index.html" dan "about.html" dalam direktori "dist". Untuk memulakan pelayan pembangunan dan melihat aplikasi, jalankan arahan berikut:

npm run serve

Ini akan memulakan pelayan pembangunan dan membuka pelayar untuk melihat aplikasi berbilang halaman. Anda boleh mengakses aplikasi menggunakan URL berikut:

• http://localhost:8080/index.html
• http://localhost:8080/about.html

6. Ringkasan

Menggunakan Vue untuk berbilang aplikasi halaman Pembangunan program membolehkan kami mengurus dan mengoptimumkan setiap halaman dengan lebih cekap. Menggunakan Vue CLI boleh membantu kami mencipta seni bina asas aplikasi berbilang halaman dengan cepat. Dengan mengkonfigurasi fail "vue.config.js" dan mencipta komponen halaman, anda boleh membina aplikasi yang kaya dengan ciri.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk pembangunan aplikasi berbilang halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!