Heim >Web-Frontend >js-Tutorial >Von vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren

Von vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren

亚连Original: 2018-05-30 10:30:432093Durchsuche

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: &#39;lottery&#39;,
		data() {
			return {
			}
		},
		mounted: function() {
			
			this.$router.replace({
					path:&#39;/rule&#39;
			});
		},
	}
</script>
<style lang="less">
	body{
		margin:0;
		padding:0;
	}
</style>

Regel: path.resolve(__dirname, '../dist/rule.php') bedeutet, dass es nach der Kompilierung in der dist-Datei abgelegt wird Der Dateiname von „rule.html“ lautet „rule.php“

Build/webpack.base.conf.js ändern

Konfigurationseintrag

import Vue from &#39;vue&#39;
import Rule from &#39;./Rule.vue&#39;
import router from &#39;./router&#39;
import $ from &#39;jquery&#39;
//import vConsole from &#39;vconsole&#39;
import fastclick from &#39;fastclick&#39;
Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.config.productionTip = false;
 
/* eslint-disable no-new */
new Vue({
 el: &#39;#rule&#39;,
 router,
 template: &#39;<Rule/>&#39;,
 components: { Rule },
})

build/webpack.dev.conf .js ändern

Plugins hinzufügen

build: {
  // Template for index.html
  index: path.resolve(__dirname, &#39;../dist/index.php&#39;),
  rule: path.resolve(__dirname, &#39;../dist/rule.php&#39;),
  ……
 }

Build/webpack.prod.conf.js ändern

Hinzufügen

entry: {
  app: &#39;./src/main.js&#39;,  
  rule: &#39;./src/rule.js&#39;
 },

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: &#39;rule.html&#39;, 
   template: &#39;rule.html&#39;, 
   inject: true, 
   chunks:[&#39;rule&#39;] 
  }),

Das Obige habe ich für Sie zusammengestellt Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Methoden zum Abrufen von Dom-Elementen basierend auf vue1 und vue2

nodejs+mongodb aggregierte Kaskadenabfrageoperation Beispiel

JS 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!

Stellungnahme：

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

Vorheriger Artikel：Beispiel einer einfachen NodeJS-Methode für den Zugriff auf und den Betrieb einer MySQL-DatenbankNächster Artikel：Beispiel einer einfachen NodeJS-Methode für den Zugriff auf und den Betrieb einer MySQL-Datenbank

In Verbindung stehende Artikel

Mehr sehen