Comment utiliser Vue pour le développement d'applications multipages ?

Vue est un framework front-end très populaire qui peut nous aider à créer des applications d'une seule page hautes performances et maintenables. Cependant, nous devons parfois créer des applications multipages, ce qui nécessite l'utilisation du modèle de développement d'applications multipages de Vue. Cet article explique comment utiliser Vue pour le développement d'applications multipages.

1. La différence entre les applications multipages et les applications monopages

Dans une application monopage, tout le contenu est généré dynamiquement via JavaScript , et il n'y a qu'un seul fichier HTML. Lorsque l'utilisateur interagit avec l'application, seuls les composants et les itinéraires doivent être mis à jour sans recharger l'intégralité de l'application.

Dans une application multipage, chaque page possède son propre fichier HTML. Chaque fois qu'une page est ouverte, le navigateur chargera un nouveau fichier HTML. Cela signifie que les applications multipages ont plus de contenu à charger, mais elles sont mieux adaptées aux situations où le référencement est requis ou où une optimisation plus poussée d'une seule page est requise.

2. Utilisez Vue CLI pour créer des applications multipages

Nous pouvons utiliser Vue CLI pour créer des applications multipages. Vue CLI est un outil d'échafaudage officiellement pris en charge qui fournit un environnement de développement et un processus de construction standardisés. Voici un exemple simple :

Tout d'abord, installez Vue CLI.

npm install -g @vue/cli

Ensuite, créez une application multipage.

vue create my-app --preset multi-page

Cela créera un nouveau projet appelé "my-app" et utilisera le préréglage multipage de Vue CLI. Ce préréglage générera automatiquement un répertoire "src/pages" contenant deux exemples de pages.

3. Configuration des applications multi-pages

Ensuite, nous devons configurer Vue CLI pour prendre en charge les applications multi-pages. Ouvrez le fichier "vue.config.js" et ajoutez le contenu suivant au fichier :

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'
    }
  }
}

Ici nous définissons deux pages : index et about, correspondant aux "src/pages/index" et aux fichiers d'entrée et les fichiers modèles dans le répertoire "src/pages/about". Chaque page doit définir un fichier d'entrée et un fichier modèle. Le fichier d'entrée est le point d'entrée principal du programme et le fichier modèle définit la structure et le style de la page.

4. Création de composants de page

Maintenant, nous devons créer les composants pour chaque page. Dans l'exemple d'application, nous pouvons créer ces composants dans les répertoires "src/pages/index/components" et "src/pages/about/components". Par exemple, vous pouvez créer un composant « En-tête » et un composant « Pied de page » et les utiliser dans chaque page. Voici un exemple simple :

<template>
  <div>
    <Header />
    <h1>{{ 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. Construire et exécuter l'application

Maintenant, nous avons terminé la configuration et la création des composants du multi-page application. Ensuite, nous devons créer et exécuter l’application. Exécutez la commande suivante pour créer l'application :

npm run build

Cela générera un fichier "index.html" et un fichier "about.html" dans le répertoire "dist". Afin de démarrer un serveur de développement et d'afficher l'application, exécutez la commande suivante :

npm run serve

Cela démarrera un serveur de développement et ouvrira le navigateur pour afficher l'application multipage. Vous pouvez accéder à l'application en utilisant l'URL suivante :

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

6. Summary

Utiliser Vue pour le développement d'applications multipages nous permet de gérer et d'optimiser chaque page plus efficacement . L'utilisation de Vue CLI peut nous aider à créer rapidement l'architecture de base d'une application multipage. En configurant le fichier « vue.config.js » et en créant des composants de page, vous pouvez créer une application riche en fonctionnalités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!