Projet créé par vue-cli, configurez la méthode d'implémentation multipage-js tutoriel-php.cn

Projet créé par vue-cli, configurez la méthode d'implémentation multipage

亚连

Libérer： 2018-05-30 10:30:43

original

2074 Les gens l'ont consulté

Maintenant, je vais partager avec vous un projet créé par vue-cli et comment configurer plusieurs pages. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

L'outil de ligne de commande vue-cli officiellement fourni par vue peut rapidement créer une application d'une seule page. L'entrée de page par défaut est index.html Donc, si nous avons besoin de plusieurs pages, comment la configurer n'est en fait pas compliquée

Supposons que la page à créer soit une règle. Ce qui suit prend la règle comme exemple. 🎜>

Créer une nouvelle page html

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

Copier après la connexion

Créer les fichiers d'entrée Rule.vue et Rule. js, calqué sur App.vue et main.js

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

Copier après la connexion

rule.js

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 },
})

Copier après la connexion

Modifiez config/index.js

build pour ajouter l'adresse de la règle, c'est-à-dire l'adresse et le nom de la règle. html généré après la compilation

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

Copier après la connexion

rule: path.resolve(__dirname, '../dist/rule.php') signifie qu'après la compilation, il est placé dans le fichier dist. Le nom du fichier compilé de Rule.html est Rule

Modify build/webpack.base.conf.js

Configure Entry<. 🎜>

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

Copier après la connexion

Modifier build/webpack.dev.conf.js

Ajouter des plugins

new HtmlWebpackPlugin({ 
   filename: &#39;rule.html&#39;, 
   template: &#39;rule.html&#39;, 
   inject: true, 
   chunks:[&#39;rule&#39;] 
  }),

Copier après la connexion

Modifier le build /webpack.prod.conf.js

Ajouter des plugins

new HtmlWebpackPlugin({
   filename: config.build.rule,
   template: &#39;rule.html&#39;,
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
   },
   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
   chunksSortMode: &#39;dependency&#39;,
   chunks: [&#39;manifest&#39;,&#39;vendor&#39;,&#39;rule&#39;]
  }),

Copier après la connexion

Tout ce qui précède

Lorsque l'adresse d'arrière-plan accède à votre page nouvellement créée, puisque l'itinéraire par défaut configuré maintenant est public, vous pouvez configurez vous-même plusieurs fichiers de routage et référencez-les séparément.

Vous pouvez parcourir dans Rule.vue pour accéder à l'itinéraire spécifié afin d'obtenir le contrôle de la page

mounted: function() {
			
	this.$router.replace({
		path:&#39;/rule&#39;
	});
},

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Projet créé par vue-cli, configurez la méthode d'implémentation multipage