web-dev-qa-db-fra.com

plusieurs pages dans le CLI Vue.js

Je n'arrive pas à comprendre comment avoir plusieurs pages dans un projet Vue CLI. En ce moment, j'ai ma page d'accueil avec quelques composants et je veux créer une autre page mais je ne sais pas comment faire. Suis-je censé créer plusieurs fichiers HTML où index.html est par défaut? Dans une structure de fichier simple avec un dossier css js img et des fichiers HTML en tant que pages, je sais que créer un autre fichier html signifie créer une autre page. Mais je ne comprends pas comment cela fonctionne avec le projet Vue CLI.

J'ai vu des choses comme vue-router et "pages" dans la documentation de Vue mais je ne les comprends pas très bien. Quelles sont mes alternatives? Y at-il un guide qui explique cela en détail, parce que je n’ai pas pu en trouver, et encore moins détaillé. Je serais très heureux si vous pouviez aider! Je vous remercie!

javascripthtmlvue.jsvue-climulti-page-application
4
Martin Zahariev

Premièrement: lisez toujours la documentation officielle. Avec Vue, vous pouvez également construire un spa: un MPA ce n’est pas un problème. Suivez simplement le guide:

À l’aide de Vue CLI 3, vous pouvez créer un nouveau projet avec vue create youProject et le configurer pour le configurer manuellement. Ensuite, ne choisissez pas l'option SPA. Vue créera un joli projet "start" utilisant une approche MPA. Après cela, il suffit de répéter la configuration sur vue.config.js.

Mis à jour # 1

Il semble que certaines mises à jour sur Vue Cli ont changé la façon de créer une application MPA, donc:

  • Créer une nouvelle application vue create test
  • Choisissez la configuration manuelle

Le passe-passe créé sera un SPA. Mais apportez les modifications suivantes:

  • Créez un dossier sous src nommé pages (facultatif)

  • Dans ce dossier, créez vos propres pages: Accueil, À propos de, etc.

  • Copiez et collez les App.vue et main.js de src dans vos nouveaux dossiers - Home, etc.
  • Formatez le App.vue dans ces dossiers, à votre goût
  • Créez un fichier vue.config.js et définissez comme suit: https://cli.vuejs.org/config/#pages

Ci-dessous, j'ai trois images démontrant ceci:

  • Tout d'abord: une nouvelle application fraîche
  • Deuxièmement: cette même application, avec les modifications que j'ai apportées ci-dessus
  • Troisièmement: les vue.config.js de cette application

 fresh new app  this same app, with the changes I made above  the vue.config.js from this app

Vous n'avez pas besoin de créer le dossier pages, il vous suffit de vous faire une idée.

Lien vers GitHub: Création d'une application MPA

7
PJ.Wanderson

EDIT: Vue possède cette fonction intégrée. Passer au fond pour plus.

Réponse originale:

Il y a deux façons d'interpréter votre question et donc d'y répondre.

La première interprétation est la suivante: "Comment puis-je prendre en charge le routage vers différentes pages au sein de la même application à page unique, par exemple localhost: 8080/about et localhost: 8080/report, etc.?". La réponse à cette question est d'utiliser le routeur. C'est assez simple et fonctionne bien.

La seconde interprétation est la suivante: "mon application est complexe et j’ai plusieurs applications d’une page} _, par exemple une application pour la partie" site Web ", une application permettant aux utilisateurs de se connecter et de travailler, admins, etc. - comment vue peut-il le faire sans créer trois référentiels entièrement séparés? "

La réponse à ce dernier est un référentiel unique avec plusieurs applications d'une page. Cette démo ressemble exactement à ce que vous recherchez:

https://github.com/Plortinus/vue-multiple-pages/

Regardez en particulier: https://github.com/Plortinus/vue-multiple-pages/blob/master/vue.config.js

Réponse mise à jour:

Il s'avère que vuejs a l'idée de plusieurs pages de premier niveau intégrées. Je veux dire, cela a du sens - ça va être très courant, malgré ce que beaucoup de réponses incorrectes disent à propos de "non, c'est pour les applications à page unique"!

Vous voulez l'option pages dans le fichier vue.config.js:

https://cli.vuejs.org/config/#pages

Si votre projet n'a pas ce fichier dans le répertoire racine, créez-le et vuejs le détectera.

Il existe un moyen long et court de définir chaque page. J'ai utilisé la forme courte ici:

module.exports = {
  pages: {
    index: 'src/pages/index/main.ts',
    experiment: 'src/pages/experiment/main.ts'
  }
}

Vous n'êtes pas obligé de mettre votre travail sous "pages". Ce pourrait être "/src/apps/index/index.ts" ou autre chose.

Après avoir déplacé le code et modifié certaines importations de:

import HelloWorld from './components/HelloWorld'

à

import HelloWorld from '@/components/HelloWorld'

L'application fonctionne - mais l'application "expérimenter" de mon dépôt devait être chargée de la manière suivante:

http://localhost:8080/experiment.html

Assez moche, et pire encore, parce qu’il utilise le routeur qui a abouti à des URL du type:

http://localhost:8080/experiment.html/about

Pouah.

Heureusement, cette réponse de stackoverflow l'a résolu. Mettez à jour le fichier vue.config.js pour inclure les options devServer (assurez-vous qu'il s'agit du niveau supérieur de l'objet exporté:

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /\/index/, to: '/index.html' },
      { from: /\/experiment/, to: '/experiment.html' }
    ]
  }
}

Puis modifiez également le fichier router.ts pour ajouter le chemin supplémentaire (dans mon cas, "expérimentez /":

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL + 'experiment/',
  ...

Ensuite, les URL se résolvent bien, par exemple: http: // localhost: 8080/experiment/about

6
Andrew E

Cela peut ne pas être pertinent pour la question, mais gardez-moi, peut-être que ma réponse pourrait aider quelqu'un .j'utilise webpack + vue et j'ai compris comment créer des applications à plusieurs pages. Voici mon webpack.config.js:

const path = require('path');
const fs = require('fs')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    entry: {
        app: './src/app.js',
        mgmt: ['./src/modules/mgmt/mgmt.js'],
        login: './src/modules/login/login.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        // publicPath: '/ahezime/',
        filename: (chunkData) => {
            console.log('chuckData.chunk.name => ', chunkData.chunk.name)
            return chunkData.chunk.name === 'app' ? './[name].bundle.js' : './[name]/[name].bundle.js';
        }
    },
    optimization: {
        minimizer: [
            new TerserPlugin(),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new CleanWebpackPlugin(['dist']),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title: 'app',
            template: './src/app.html',
            // inject: false,
            chunks: ['app'],
            filename: './index.html'
        }),
        new HtmlWebpackPlugin({
            title: 'mgmt',
            template: './src/modules/mgmt/mgmt.html',
            // inject: false,
            chunks: ['mgmt'],
            filename: './mgmt/index.html'
        }),
        new HtmlWebpackPlugin({
            title: 'login',
            template: './src/modules/login/login.html',
            // inject: false,
            chunks: ['login'],
            filename: './login/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            }
        ],
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.scss?$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

Et voici ma structure de répertoire:

https://i.stack.imgur.com/uFvKx.png

Et vous pouvez sauter des pages:

<template>
    <div>
        <h1>App</h1>
        <div>
            <a href="./login">Please click me, and let take you into the login page!!!</a>
        </div>
        <span>Before computed: {{ message }} </span>
        <br>
        <span>Afer computed: {{ computedMessage() }} </span>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'Hello World!'
            }
        },
        computed: {
            reversedMessage: function() {
                return this.message.split('').reverse().join('')
            }
        },
        methods: {
            computedMessage: function() {
                return this.message.split('').reverse().join('')
            }
        }
    }
</script>
0
Ray's Life Thinking