So konfigurieren Sie mehrseitige Projekte in Vue.js-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

So konfigurieren Sie mehrseitige Projekte in Vue.js

小云云

Mar 10, 2018 pm 03:33 PM

javascript vue.js 配置

Verwenden Sie zunächst den folgenden Befehl, um ein neues Vue.js-Projekt zu erstellen

vue init webpack vue-3

Nach dem Login kopieren

Nachdem Sie das Projekt mit VsCode geöffnet haben, geben Sie das Projekt in der Befehlszeile ein, installieren Sie die relevanten abhängigen Bibliotheken und Führen Sie dann das Projekt aus und führen Sie den folgenden Befehl aus:

cd vue-3npm installnpm run dev

Nach dem Login kopieren

Wenn alles normal ist, geben Sie http://localhost:8080 in den Browser ein und eine Seite mit einem großen V-Symbol sollte erscheinen.

Nach Abschluss der oben genannten Vorbereitungen werden wir als nächstes die Konfiguration des mehrseitigen Projekts implementieren. Die erwarteten Effekte sind wie folgt:

Geben Sie http:// ein Der Browser localhost:8080/admin springt zu der Seite mit der Meldung Dies ist der Administrator-Login .

Wir erstellen das Seiten-/Anmeldeverzeichnis im src-Verzeichnis des Projekts
und erstellen dann drei neue Ordner unter dem Anmeldeverzeichnis: admin.html admin.js Admin.vue

Dann schreiben wir den entsprechenden Seitenanzeigecode , wobei der Code in
admin.html wie folgt lautet

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

Nach dem Login kopieren

Der Code in Admin.vue lautet wie folgt

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

Nach dem Login kopieren

Der Code in admin.js lautet wie folgt

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

Nach dem Login kopieren

Nachdem der Code für die oben gezeigte Seite fertiggestellt ist, beginnen Sie mit der Konfigurationsarbeit

Öffnen Sie zunächst das build-Verzeichnis
und fügen Sie eine neue Eintragsdatei zum <🎜 hinzu > Konfigurationsattribut der webpack.base.conf.js-Datei: entry

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },

Nach dem Login kopieren

Umleitung im

unter webpack.dev.conf.js der devServer-Datei hinzufügen: rewrites

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },

Nach dem Login kopieren

Konfigurieren Sie auch eine mehr <🎜 im

-Konfigurationselement in der Datei >Plug-in, das zum Generieren der Eintragsseite von admin.html plugins verwendet wird und gleichzeitig HtmlWebpackPlugin hinzugefügt wird, um den Alias der Eintragsdatei anzugeben entsprechend dem vorherigen
. chunksentry

Dann suchen wir das Verzeichnis

  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),

Nach dem Login kopieren

, öffnen die Datei

darin und fügen den folgenden Code unter dem Attribut config hinzu: index.jsbuild

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

Nach dem Login kopieren

Vollständig Um die Arbeit zu konfigurieren, führen Sie

erneut in der Befehlszeile aus. Geben Sie nach dem Start des Projekts http://localhost:8080/admin in den Browser ein und es wird erfolgreich zu der Seite gesprungen, die wir gerade geschrieben haben .

npm run devVerwenden Sie zunächst den folgenden Befehl, um ein neues Vue.js-Projekt zu erstellen

vue init webpack vue-3

Nach dem Login kopieren

Wenn alles normal ist, geben Sie http://localhost:8080 in den Browser ein und eine Seite mit einem großen V-Symbol sollte erscheinen.

cd vue-3npm installnpm run dev

Nach dem Login kopieren

Nach Abschluss der oben genannten Vorbereitungen werden wir als nächstes die Konfiguration des mehrseitigen Projekts implementieren. Die erwarteten Effekte sind wie folgt:

Geben Sie http:// ein Der Browser localhost:8080/admin springt zu der Seite mit der Meldung

Dies ist der Administrator-Login

. Wir erstellen das Seiten-/Anmeldeverzeichnis im src-Verzeichnis des Projekts

und erstellen dann drei neue Ordner unter dem Anmeldeverzeichnis:

admin.html admin.js Admin.vueDann schreiben wir den entsprechenden Seitenanzeigecode , wobei der Code in

admin.html wie folgt lautet

Der Code in Admin.vue lautet wie folgt

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

Nach dem Login kopieren

Der Code in admin.js lautet wie folgt

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

Nach dem Login kopieren

Nachdem der Code für die oben gezeigte Seite fertiggestellt ist, beginnen Sie mit der Konfigurationsarbeit

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

Nach dem Login kopieren

Öffnen Sie zunächst das

-Verzeichnis

und fügen Sie eine neue Eintragsdatei zum <🎜 hinzu > Konfigurationsattribut der build-Datei:
webpack.base.conf.jsentryUmleitung im

unter

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },

Nach dem Login kopieren

der

-Datei hinzufügen: webpack.dev.conf.jsdevServerrewritesKonfigurieren Sie auch eine mehr <🎜 im

-Konfigurationselement in der Datei >Plug-in, das zum Generieren der Eintragsseite von admin.html

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },

Nach dem Login kopieren

verwendet wird und gleichzeitig

hinzugefügt wird, um den Alias der Eintragsdatei anzugeben entsprechend dem vorherigen plugins. HtmlWebpackPlugin
chunksDann suchen wir das Verzeichnis entry, öffnen die Datei

darin und fügen den folgenden Code unter dem Attribut

  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),

Nach dem Login kopieren

hinzu:

configindex.jsbuild Vollständig Um die Arbeit zu konfigurieren, führen Sie

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

Nach dem Login kopieren

Verwandte Empfehlungen:

npm run dev

Ein einfaches Beispiel für die Entwicklung einer mehrseitigen Anwendung mit vue-cli

Vue-cli erstellt eine einzelne Seite in mehrere Seiten Beispielcode für die Methode

So verwandeln Sie Vue-cli in einen Verlaufsmodus, der mehrere Seiten unterstützt

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie mehrseitige Projekte in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

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

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Repo: Wie man Teamkollegen wiederbelebt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

3 Wochen vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

3 Wochen vor By DDD

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

Wo ist der Login-Zugang für Gmail-E-Mail?

7333

Java-Tutorial

1627

CakePHP-Tutorial

1351

Laravel-Tutorial

1262

PHP-Tutorial

1209

Related knowledge

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

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

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

Interpretation und Best Practices der MyBatis Generator-Konfigurationsparameter Feb 23, 2024 am 09:51 AM

MyBatisGenerator ist ein offiziell von MyBatis bereitgestelltes Codegenerierungstool, mit dem Entwickler schnell JavaBeans, Mapper-Schnittstellen und XML-Zuordnungsdateien generieren können, die der Datenbanktabellenstruktur entsprechen. Bei der Verwendung von MyBatisGenerator zur Codegenerierung ist die Einstellung der Konfigurationsparameter von entscheidender Bedeutung. Dieser Artikel beginnt aus der Perspektive der Konfigurationsparameter und untersucht eingehend die Funktionen von MyBatisGenerator.

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

Flask-Installations- und Konfigurations-Tutorial: ein Tool zum einfachen Erstellen von Python-Webanwendungen Feb 20, 2024 pm 11:12 PM

Tutorial zur Installation und Konfiguration von Flask: Ein Tool zum einfachen Erstellen von Python-Webanwendungen. Es sind spezifische Codebeispiele erforderlich. Einführung: Mit der zunehmenden Beliebtheit von Python ist die Webentwicklung zu einer der notwendigen Fähigkeiten für Python-Programmierer geworden. Um eine Webentwicklung in Python durchzuführen, müssen wir ein geeignetes Webframework auswählen. Unter den vielen Python-Web-Frameworks ist Flask ein einfaches, benutzerfreundliches und flexibles Framework, das von Entwicklern bevorzugt wird. In diesem Artikel wird die Installation des Flask-Frameworks vorgestellt.

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

Reibungsloser Build: So konfigurieren Sie die Maven-Image-Adresse richtig Feb 20, 2024 pm 08:48 PM

Reibungsloser Build: So konfigurieren Sie die Maven-Image-Adresse richtig. Wenn Sie Maven zum Erstellen eines Projekts verwenden, ist es sehr wichtig, die richtige Image-Adresse zu konfigurieren. Durch die richtige Konfiguration der Spiegeladresse kann der Projektaufbau beschleunigt und Probleme wie Netzwerkverzögerungen vermieden werden. In diesem Artikel wird erläutert, wie die Maven-Spiegeladresse korrekt konfiguriert wird, und es werden spezifische Codebeispiele aufgeführt. Warum müssen Sie die Maven-Image-Adresse konfigurieren? Maven ist ein Projektmanagement-Tool, das automatisch Projekte erstellen, Abhängigkeiten verwalten, Berichte erstellen usw. kann. Normalerweise beim Erstellen eines Projekts in Maven

See all articles