wake-up-neo.com

mehrere Seiten in Vue.js CLI

Ich habe Probleme, herauszufinden, wie mehrere Seiten in einem Vue CLI-Projekt erstellt werden sollen. Im Moment habe ich meine Homepage mit ein paar Komponenten und ich möchte eine andere Seite erstellen, aber ich weiß nicht, wie ich das machen soll. Soll ich mehrere HTML-Dateien erstellen, in denen die index.html standardmäßig ist? In einer einfachen Dateistruktur mit css js img-Ordner und HTML-Dateien als Seiten weiß ich, dass das Erstellen einer weiteren HTML-Datei das Erstellen einer anderen Seite bedeutet. Ich verstehe nicht, wie das mit dem CLI-Projekt von Vue funktioniert.

Ich habe Dinge wie Vue-Router und "Seiten" in der Vue-Dokumentation gesehen, aber ich verstehe sie nicht sehr gut. Was sind meine Alternativen? Gibt es einen Leitfaden, der das ausführlich erklärt, weil ich keinen finden konnte, geschweige denn detailliert. Würde mich sehr freuen wenn ihr helfen könntet! Vielen Dank!

4
Martin Zahariev

Erstens: Lesen Sie immer die offizielle Dokumentation. Mit Vue können Sie auch ein SPA erstellen: Ein MPA ist damit kein Problem. Folgen Sie einfach der Anleitung:

Mit Vue CLI 3 können Sie ein neues Projekt mit vue create youProject erstellen und manuell konfigurieren. Wählen Sie dann nicht die SPA-Option. Vue erstellt ein Nice-Startprojekt mit einem MPA -Ansatz. Danach wiederholen Sie einfach die Konfiguration in vue.config.js.


Aktualisierte Nr. 1

Es scheint, dass einige Updates zu Vue Cli die Art und Weise geändert haben, eine MPA -App zu erstellen, also:

  • Erstellen Sie eine neue Anwendung vue create test
  • Wählen Sie Manuelle Konfiguration

Die erstellte Heizplatte wird eine SPA-Platte sein. Nehmen Sie diese Änderungen jedoch vor:

  • Erstellen Sie einen Ordner unter src mit dem Namen pages (optional)

  • Erstellen Sie in diesem Ordner Ihre eigenen Seiten: Startseite, Info usw.

  • Kopieren Sie die App.vue und main.js von src in Ihre neuen Ordner - Home usw.
  • Formatieren Sie den App.vue nach Ihren Wünschen in diese Ordner
  • Erstellen Sie eine vue.config.js und legen Sie Folgendes fest: https://cli.vuejs.org/config/#pages

Unten habe ich drei Bilder, die dies demonstrieren:

  • Erstens: eine frische neue App
  • Zweitens: dieselbe App mit den oben vorgenommenen Änderungen
  • Drittens: die vue.config.js aus dieser App

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

Sie müssen den Ordner pages nicht erstellen.

Link zu GitHub: Erstellen einer MPA App

7
PJ.Wanderson

EDIT: Vue hat dies eingebaut. Springe nach unten für mehr.

Ursprüngliche Antwort:

Es gibt zwei Möglichkeiten, Ihre Frage zu interpretieren und daher zu beantworten.

Die erste Interpretation lautet: "Wie kann ich das Routing zu verschiedenen Seiten innerhalb derselben Single-Page-App unterstützen, z. B. localhost: 8080/about und localhost: 8080/report usw.?". Die Antwort darauf ist die Verwendung des Routers. Es ist ziemlich einfach und funktioniert gut.

Die zweite Interpretation lautet: "Meine App ist komplex und ich habe mehrere einseitige Anwendungen, z. B. eine App für den" Website "-Teil, eine App für Konsumenten, die sich anmelden und arbeiten muss, eine App für Admins usw. - wie kann vue dies tun, ohne drei separate Repositories zu erstellen? "

Die Antwort auf letzteres ist ein einzelnes Repository mit mehreren einseitigen Apps. Diese Demo sieht genau so aus, wie Sie es wollen:

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

Schauen Sie sich insbesondere an: https://github.com/Plortinus/vue-multiple-pages/blob/master/vue.config.js

Aktualisierte Antwort:

Es stellt sich heraus, dass vuejs die Idee hat, mehrere Seiten der obersten Ebene zu integrieren. Ich meine, es macht Sinn - es wird wirklich üblich sein, obwohl viele falsche Antworten über "Nein, es ist für einseitige Apps" sagen!

Sie möchten die pages-Option in der vue.config.js-Datei:

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

Wenn sich diese Datei nicht im Stammverzeichnis befindet, erstellen Sie sie und Vuejs erkennt sie.

Es gibt einen langen und einen kurzen Weg, um jede Seite zu definieren. Ich habe die Kurzform hier verwendet:

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

Sie müssen Ihre Arbeit nicht unter "Seiten" stellen. Es könnte "/src/apps/index/index.ts" oder was auch immer sein.

Nachdem Sie den Code verschoben und einige Importe geändert haben:

import HelloWorld from './components/HelloWorld'

zu

import HelloWorld from '@/components/HelloWorld'

Die App funktioniert - aber die "Experiment" -App in meinem Repo musste folgendermaßen geladen werden:

http://localhost:8080/experiment.html

Ziemlich hässlich und noch schlimmer, weil er den Router verwendet, was zu folgenden URLs führte:

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

Pfui.

Zum Glück hat diese Stackoverflow-Antwort es gelöst. Aktualisieren Sie die vue.config.js-Datei, um die devServer-Optionen einzuschließen (stellen Sie sicher, dass sich diese auf der obersten Ebene des exportierten Objekts befindet:

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

Ändern Sie dann auch die router.ts-Datei, um den zusätzlichen Pfad anzufügen (in meinem Fall "experiment /":

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

Dann lassen sich URLs gut auflösen, z. B .: http: // localhost: 8080/experiment/about

6
Andrew E

Dies mag für die Frage nicht relevant sein, aber bitte beachten Sie, vielleicht kann meine Antwort jemandem helfenIch benutze webpack + vue, und ich habe herausgefunden, wie man mehrere Seitenanwendungen erstellt. Hier meine 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'
                ]
            }
        ]
    }
};

Und hier ist meine Verzeichnisstruktur:

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

Und Sie können Seiten springen:

<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