Vue est-elle adaptée aux applications multipages ?

vue convient aux applications multipages. Vue s'appuie sur Webpack pendant le développement technique, et Webpack intègre toutes les ressources pour former un fichier HTML et un ensemble de fichiers js ; si vous souhaitez utiliser Vue pour implémenter des applications multipages, vous devez reconfigurer ses dépendances. en modifiant la configuration du webpack, l'échafaudage a la capacité de créer des applications multipages.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Nous savons que vue peut développer rapidement des applications Web d'une seule page, et le responsable nous fournit son propre échafaudage d'application vue-cli. Il nous suffit de télécharger l'échafaudage et d'installer les dépendances pour démarrer le prototype de l'application vue.

Cela bénéficie du suivi des dépendances de Webpack, des chargeurs de divers suffixes de ressources et des fonctions puissantes des plug-ins Webpack associés.

Cependant, parfois, nous avons des besoins de développement pour plusieurs pages. Dans ce cas, nous pouvons créer plusieurs applications pour plusieurs pages, comme générer plusieurs répertoires d'applications via vue-cli, mais cela entraînera davantage de code de construction répétitif et le code passe-partout détruira également l’unité de l’application et la rendra difficile à maintenir. Nous pouvons modifier la configuration du webpack basée sur vue-cli pour permettre à l'échafaudage de créer des applications multipages.

vue s'appuie sur webpack lors du développement technique, et webpack intègre toutes les ressources ensemble pour former un fichier html et un ensemble de fichiers js. Si vue est implémenté en tant qu'application multipage, ses dépendances doivent être reconfigurées, c'est-à-dire modifiées. le fichier de configuration de webpack

Ce qui suit détaille principalement le développement d'applications multipages (MPA) de Vue

Les étapes spécifiques de mise en œuvre

1.1.1. 1. Entrez dans le répertoire buildwebpack.base.conf.js, recherchez l'entrée dans le domaine module.exports, puis configurez et ajoutez-y plusieurs entrées :

Faites attention à la modification et à la correspondance de la boîte verte.

  entry: {
    app: './src/main.js',
    one: './src/pages/one.js',
    two: './src/pages/two.js'
  }

2. Apportez des modifications à l'environnement de développement, exécutez dev, ouvrez le fichier buildwebpack.dev.conf.js et recherchez les plugins dans module.exports. Ce qui suit est écrit comme suit :

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      filename: 'one.html',
      template: 'one.html',
      inject: true,
      chunks: ['one']
    }),
    new HtmlWebpackPlugin({
      filename: 'two.html',
      template: 'two.html',
      inject: true,
      chunks: ['two']
    }),

3. Configurez ensuite le build d'exécution, qui est l'environnement de compilation. Ouvrez d'abord le fichier configindex.js et ajoutez ce

    index: path.resolve(__dirname, '../dist/index.html'),
    one: path.resolve(__dirname, '../dist/one.html'),
    two: path.resolve(__dirname, '../dist/two.html'),

4. Ensuite, ouvrez le fichier /build/webpack.prod.conf.js, recherchez HTMLWebpackPlugin dans les plugins, ajoutez

 new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.one,
      template: 'one.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'one']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.two,
      template: 'two.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'two']
    }),

1.2. exemple ici), two.js est similaire à ce code, remplacez simplement "one" par "two".

import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#one',
    render: h => h(one)
})

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: &#39;one&#39;,
        data() {
            return {
                msg: &#39;I am one&#39;
            }
        }
    }
</script>

nbsp;html>


    <meta>
    <meta>
    <title>one-page</title>


    <div></div>

Attention ! J'ai oublié de modifier l'identifiant dans auparavant, et la page était vide sans contenu. Lorsque j'ai ouvert la console, j'ai vu qu'il n'y avait pas de contenu dans la balise div, et l'identifiant était app, j'ai seulement réalisé que tout allait bien. après la modification.

【Recommandations associées : tutoriel vidéo vuejs, développement web front-end】

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!