Di manakah arahan untuk projek hujung hadapan berbilang halaman vue?

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membangunkan aplikasi web bahagian hadapan. Vue mempunyai seni bina boleh atur cara dan boleh dikembangkan, yang menjadikannya salah satu pilihan utama dalam kalangan pembangun. Vue juga menyediakan banyak ciri dan API untuk membantu pembangun mempercepatkan pembangunan projek mereka.

Dalam Vue, anda boleh memilih cara untuk membangunkan sebagai aplikasi satu halaman (SPA) atau aplikasi berbilang halaman (MPA). Untuk SPA, anda hanya memerlukan satu fail kemasukan dan satu fail laluan untuk melaksanakan aplikasi, tetapi untuk MPA, anda memerlukan berbilang fail kemasukan dan berbilang fail laluan untuk membina keseluruhan aplikasi. Dalam artikel ini, kita akan membincangkan di mana arahan untuk projek bahagian hadapan berbilang halaman Vue.

Mula-mula, mari buat projek asas berbilang halaman Vue. Katakan kita mahu membuat projek yang dipanggil "my-multiple-page-app". Sila jalankan arahan berikut:

vue create my-multiple-page-app

Perintah ini akan mencipta projek dengan pilihan dan konfigurasi lalai Vue. Cara ini berfungsi dengan baik untuk aplikasi halaman tunggal, tetapi untuk aplikasi berbilang halaman kita perlu menukar konfigurasi lalai. Kita perlu menukar beberapa konfigurasi untuk menghasilkan halaman yang berasingan bagi setiap halaman.

Pertama, kita perlu memasang pemalam yang dipanggil "vue-cli-plugin-multi-page". Pemalam ini akan membantu kami membuat aplikasi berbilang halaman. Sila jalankan arahan berikut dalam baris arahan:

vue add multi-page

Arahan ini akan memasang "vue-cli-plugin-multi-page" untuk projek kami. Semasa proses ini, pemalam mencipta folder bernama "halaman" dalam direktori akar projek. Dalam folder ini, folder akan dibuat untuk setiap halaman, dan kemudian fail JavaScript bernama "main.js" dan fail Vue bernama "App.vue" akan dibuat dalam setiap folder halaman.

Fail "main.js" ialah fail masukan untuk setiap halaman. Dalam fail ini, kami akan mentakrifkan entri penghalaan dan pemaparan untuk setiap halaman. Dalam fail "App.vue" kami akan mengatur struktur dan penggayaan halaman.

Seterusnya, kita perlu menukar beberapa konfigurasi supaya alat binaan Vue mengetahui bahawa kita sedang mencipta aplikasi berbilang halaman. Buka fail "vue.config.js" dalam direktori akar dan tambahkan kod berikut:

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

Kod ini memberitahu alat binaan Vue bahawa kami akan membuat tiga halaman: halaman utama, halaman log masuk dan halaman pendaftaran. Setiap halaman mempunyai fail entri dan fail templat HTML. Kami juga menentukan nama fail untuk setiap halaman.

Akhir sekali, jalankan arahan berikut untuk menyusun aplikasi berbilang halaman kami:

npm run build

Arahan ini akan menjana fail yang disusun dalam folder "dist". Di dalam folder "dist" kita akan melihat folder dengan tiga fail HTML bernama "index.html", "login.html" dan "signup.html". Setiap fail HTML dipautkan ke fail JavaScript bernama "chunk-vendors.js" dan "chunk-common.js" dan fail JavaScript bernama "app.js".

Ini semua tentang di mana arahan untuk projek bahagian hadapan berbilang halaman Vue. Vue menyediakan banyak ciri dan API untuk membantu pembangun mempercepatkan pembangunan projek. Menggunakan arahan ini, kami boleh membuat aplikasi berbilang halaman dengan cepat dan membuat perubahan serta mengekalkannya apabila diperlukan.

Atas ialah kandungan terperinci Di manakah arahan untuk projek hujung hadapan berbilang halaman vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!