Web-Frontend
js-Tutorial
Von vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren
Von vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren
Jetzt werde ich ein von vue-cli erstelltes Projekt und die Konfiguration mehrerer Seiten mit Ihnen teilen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.
Das offiziell von vue bereitgestellte Befehlszeilentool vue-cli kann schnell eine einseitige Anwendung erstellen. Der Standardseiteneintrag ist index.html. Wenn wir also mehrere Seiten benötigen, ist die Konfiguration eigentlich nicht kompliziert.
Angenommen, die zu erstellende Seite dient als Beispiel 🎜>
Erstellen Sie eine neue HTML-Seite
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <title></title> </head> <body> <span style="color:#000000;"><p id="rule"></p></span> <!-- built files will be auto injected --> </body> </html>
Erstellen Sie die Eintragsdateien Rule.vue und Rule.js, modelliert nach App.vue und main
config/index.js ändern
Erstellen und fügen Sie die Regeladresse hinzu, bei der es sich um die Adresse und den Namen der nach der Kompilierung generierten Rule.html handelt
<template>
<p id="rule">
<router-view></router-view>
</p>
</template>
<script>
export default {
name: 'lottery',
data() {
return {
}
},
mounted: function() {
this.$router.replace({
path:'/rule'
});
},
}
</script>
<style lang="less">
body{
margin:0;
padding:0;
}
</style>Build/webpack.base.conf.js ändern
Konfigurationseintragimport Vue from 'vue'
import Rule from './Rule.vue'
import router from './router'
import $ from 'jquery'
//import vConsole from 'vconsole'
import fastclick from 'fastclick'
Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#rule',
router,
template: '<Rule/>',
components: { Rule },
})Plugins hinzufügen
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.php'),
rule: path.resolve(__dirname, '../dist/rule.php'),
……
}Build/webpack.prod.conf.js ändern
Hinzufügen
entry: {
app: './src/main.js',
rule: './src/rule.js'
},alles das Obige
wenn die Hintergrundadresse zu springt Nachdem Sie eine neue Seite erstellt haben, können Sie mehrere Routing-Dateien selbst konfigurieren und separat darauf verweisen, da die jetzt konfigurierte Standardroute öffentlich ist.Sie können zur angegebenen Route in Rule.vue springen, um die Seitenkontrolle zu erreichen
new HtmlWebpackPlugin({
filename: 'rule.html',
template: 'rule.html',
inject: true,
chunks:['rule']
}),Verwandte Artikel:
Methoden zum Abrufen von Dom-Elementen basierend auf vue1 und vue2
nodejs+mongodb aggregierte Kaskadenabfrageoperation BeispielJS implementiert die Methode, aus einem Link einen QR-Code zu generieren und ihn in ein Bild umzuwandeln
Das obige ist der detaillierte Inhalt vonVon vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1391
52
So richten Sie die Git-Konfiguration in PyCharm ein
Feb 20, 2024 am 09:47 AM
Titel: So konfigurieren Sie Git in PyCharm richtig. In der modernen Softwareentwicklung ist das Versionskontrollsystem ein sehr wichtiges Werkzeug, und Git als eines der beliebtesten Versionskontrollsysteme bietet Entwicklern leistungsstarke Funktionen und flexible Vorgänge. Als leistungsstarke integrierte Python-Entwicklungsumgebung bietet PyCharm Git-Unterstützung, sodass Entwickler Codeversionen bequemer verwalten können. In diesem Artikel erfahren Sie, wie Sie Git in PyCharm richtig konfigurieren, um eine bessere Entwicklung während des Entwicklungsprozesses zu ermöglichen.
Die perfekte Kombination aus PyCharm und PyTorch: detaillierte Installations- und Konfigurationsschritte
Feb 21, 2024 pm 12:00 PM
PyCharm ist eine leistungsstarke integrierte Entwicklungsumgebung (IDE) und PyTorch ist ein beliebtes Open-Source-Framework im Bereich Deep Learning. Im Bereich maschinelles Lernen und Deep Learning kann die Verwendung von PyCharm und PyTorch für die Entwicklung die Entwicklungseffizienz und Codequalität erheblich verbessern. In diesem Artikel wird detailliert beschrieben, wie PyTorch in PyCharm installiert und konfiguriert wird, und es werden spezifische Codebeispiele angehängt, um den Lesern zu helfen, die leistungsstarken Funktionen dieser beiden besser zu nutzen. Schritt 1: Installieren Sie PyCharm und Python
Das Funktionsprinzip und die Konfigurationsmethode von GDM im Linux-System
Mar 01, 2024 pm 06:36 PM
Titel: Das Funktionsprinzip und die Konfigurationsmethode von GDM in Linux-Systemen. In Linux-Betriebssystemen ist GDM (GNOMEDisplayManager) ein gängiger Anzeigemanager, der zur Steuerung der grafischen Benutzeroberfläche (GUI)-Anmeldung und Benutzersitzungsverwaltung verwendet wird. In diesem Artikel werden das Funktionsprinzip und die Konfigurationsmethode von GDM vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Funktionsprinzip von GDM GDM ist der Display-Manager in der GNOME-Desktop-Umgebung. Er ist für den Start des X-Servers und die Bereitstellung der Anmeldeschnittstelle verantwortlich
Verstehen Sie Linux Bashrc: Funktionen, Konfiguration und Verwendung
Mar 20, 2024 pm 03:30 PM
Grundlegendes zu Linux Bashrc: Funktion, Konfiguration und Verwendung In Linux-Systemen ist Bashrc (BourneAgainShellruncommands) eine sehr wichtige Konfigurationsdatei, die verschiedene Befehle und Einstellungen enthält, die beim Systemstart automatisch ausgeführt werden. Die Bashrc-Datei befindet sich normalerweise im Home-Verzeichnis des Benutzers und ist eine versteckte Datei. Ihre Funktion besteht darin, die Bashshell-Umgebung für den Benutzer anzupassen. 1. Bashrc-Funktionseinstellungsumgebung
So konfigurieren Sie eine Arbeitsgruppe im Win11-System
Feb 22, 2024 pm 09:50 PM
So konfigurieren Sie eine Arbeitsgruppe in Win11. Eine Arbeitsgruppe ist eine Möglichkeit, mehrere Computer in einem lokalen Netzwerk zu verbinden, wodurch Dateien, Drucker und andere Ressourcen von Computern gemeinsam genutzt werden können. Im Win11-System ist die Konfiguration einer Arbeitsgruppe sehr einfach. Befolgen Sie einfach die folgenden Schritte. Schritt 1: Öffnen Sie die Anwendung „Einstellungen“. Klicken Sie zunächst auf die Schaltfläche „Start“ des Win11-Systems und wählen Sie dann die Anwendung „Einstellungen“ im Popup-Menü aus. Sie können auch die Tastenkombination „Win+I“ verwenden, um „Einstellungen“ zu öffnen. Schritt 2: Wählen Sie „System“. In der App „Einstellungen“ sehen Sie mehrere Optionen. Klicken Sie bitte auf die Option „System“, um die Seite mit den Systemeinstellungen aufzurufen. Schritt 3: Wählen Sie „Info“. Auf der Einstellungsseite „System“ sehen Sie mehrere Unteroptionen. bitte klicken
Vermeiden Sie häufige Fehler bei der Konfiguration der Maven-Umgebung: Lösen Sie Konfigurationsprobleme
Feb 19, 2024 pm 04:56 PM
Maven ist ein Java-Projektmanagement- und Build-Tool, das häufig bei der Entwicklung von Java-Projekten verwendet wird. Bei der Verwendung von Maven zum Erstellen von Projekten treten häufig häufige Probleme bei der Umgebungskonfiguration auf. In diesem Artikel werden diese häufig gestellten Fragen beantwortet und spezifische Codebeispiele bereitgestellt, um den Lesern dabei zu helfen, häufige Konfigurationsfehler zu vermeiden. 1. Maven-Umgebungsvariablen sind falsch konfiguriert. Problembeschreibung: Wenn die Umgebungsvariablen bei Verwendung von Maven falsch konfiguriert sind, funktioniert Maven möglicherweise nicht richtig. Lösung: Stellen Sie sicher
Einfaches und leicht verständliches Git-Tutorial zur PyCharm-Konfiguration
Feb 20, 2024 am 08:28 AM
PyCharm ist eine häufig verwendete integrierte Entwicklungsumgebung (IDE). In der täglichen Entwicklung ist die Verwendung von Git zur Codeverwaltung unerlässlich. In diesem Artikel wird anhand konkreter Codebeispiele erläutert, wie Sie Git in PyCharm konfigurieren und Git für die Codeverwaltung verwenden. Schritt 1: Git installieren Stellen Sie zunächst sicher, dass Git auf Ihrem Computer installiert ist. Wenn es nicht installiert ist, können Sie zur [offiziellen Git-Website](https://git-scm.com/) gehen, um die neueste Version von Git herunterzuladen und zu installieren
So konfigurieren und installieren Sie FTPS im Linux-System
Mar 20, 2024 pm 02:03 PM
Titel: So konfigurieren und installieren Sie FTPS im Linux-System. Im Linux-System ist FTPS ein sicheres Dateiübertragungsprotokoll. Im Vergleich zu FTP verschlüsselt FTPS die übertragenen Daten über das TLS/SSL-Protokoll, was die Datensicherheit verbessert Übertragung. In diesem Artikel stellen wir die Konfiguration und Installation von FTPS in einem Linux-System vor und stellen spezifische Codebeispiele bereit. Schritt 1: vsftpd installieren Öffnen Sie das Terminal und geben Sie den folgenden Befehl ein, um vsftpd zu installieren: sudo
