Où sont les commandes pour les projets front-end multipages vue ?

Vue est un framework JavaScript populaire largement utilisé pour développer des applications Web frontales. Vue possède une architecture programmable et extensible, ce qui en fait l'un des meilleurs choix parmi les développeurs. Vue fournit également de nombreuses fonctionnalités et API pour aider les développeurs à accélérer le développement de leurs projets.

Dans Vue, vous pouvez choisir comment développer une application monopage (SPA) ou une application multipage (MPA). Pour SPA, vous n'avez besoin que d'un seul fichier d'entrée et d'un fichier de route pour implémenter l'application, mais pour MPA, vous avez besoin de plusieurs fichiers d'entrée et de plusieurs fichiers de route pour créer l'intégralité de l'application. Dans cet article, nous verrons où se trouvent les commandes pour les projets frontaux multipages Vue.

Tout d’abord, créons un projet multipage Vue de base. Disons que nous voulons créer un projet appelé « mon-application-multipage-page ». Veuillez exécuter la commande suivante :

vue create my-multiple-page-app

Cette commande créera un projet avec les options et la configuration par défaut de Vue. Cette méthode fonctionne bien pour les applications à page unique, mais pour les applications multipages, nous devons modifier la configuration par défaut. Nous devons modifier certaines configurations pour générer une page distincte pour chaque page.

Tout d'abord, nous devons installer un plugin appelé "vue-cli-plugin-multi-page". Ce plugin nous aidera à créer des applications multipages. Veuillez exécuter la commande suivante dans la ligne de commande :

vue add multi-page

Cette commande installera "vue-cli-plugin-multi-page" pour notre projet. Au cours de ce processus, le plugin crée un dossier nommé « pages » dans le répertoire racine du projet. Dans ce dossier, un dossier sera créé pour chaque page, puis un fichier JavaScript nommé « main.js » et un fichier Vue nommé « App.vue » seront créés dans chaque dossier de page.

Le fichier "main.js" est le fichier d'entrée de chaque page. Dans ce fichier, nous définirons les entrées de routage et de rendu pour chaque page. Dans le fichier "App.vue", nous organiserons la structure et le style de la page.

Ensuite, nous devons modifier certaines configurations pour que l'outil de build Vue sache que nous créons une application multipage. Ouvrez le fichier "vue.config.js" dans le répertoire racine et ajoutez le code suivant :

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

Ce code indique à l'outil de build Vue que nous allons créer trois pages : page d'accueil, page de connexion et page d'inscription. Chaque page possède un fichier d'entrée et un fichier modèle HTML. Nous définissons également un nom de fichier pour chaque page.

Enfin, exécutez la commande suivante pour compiler notre application multipage :

npm run build

Cette commande générera les fichiers compilés dans le dossier « dist ». Dans le dossier « dist », nous verrons un dossier contenant trois fichiers HTML nommés « index.html », « login.html » et « signup.html ». Chaque fichier HTML est lié à des fichiers JavaScript nommés « chunk-vendors.js » et « chunk-common.js » et à un fichier JavaScript nommé « app.js ».

Il s'agit de savoir où se trouvent les commandes pour les projets frontaux multipages Vue. Vue fournit de nombreuses fonctionnalités et API pour aider les développeurs à accélérer le développement de projets. À l'aide de ces commandes, nous pouvons créer rapidement une application multipage, y apporter des modifications et la maintenir en cas de besoin.

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!