Heim > Artikel > Web-Frontend > Von vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren
Von vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren
- 亚连Original
- 2018-05-30 10:30:432038Durchsuche
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>
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
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 },
})
build/webpack.dev.conf .js ändern
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']
}),
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 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!