So implementieren Sie die mehrseitige Entwicklung in vue2.0

In diesem Artikel werden hauptsächlich Beispiele für die Entwicklung mehrerer Seiten in vue2.0 vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Wenn wir normalerweise Vue zum Entwickeln verwenden, haben wir immer das Gefühl, dass Vue speziell für Einzelseitenanwendungen entwickelt wurde, aber das ist nicht der Fall. Da Vue während der technischen Entwicklung stark auf Webpack angewiesen ist und Webpack alle Ressourcen auf einer einzigen Seite integriert. Aber Vue kann nicht nur eine einzelne Seite erstellen, sondern auch mehrere Seiten. Wenn Sie mehrere Seiten erstellen möchten, müssen Sie sich darauf verlassen, das heißt, das Webpack muss neu konfiguriert werden. In diesem Artikel wird ausführlich auf die Konfiguration von Webpack eingegangen.

Es gibt zwei Möglichkeiten, Vue zu entwickeln. Eine besteht darin, die Datei vue.js direkt in das Skript-Tag einzuführen. Ich persönlich bin der Meinung, dass es komfortabler ist, kleine Multi-Dateien zu erstellen. Sobald Sie eine größere Seite erstellt haben, ist das Projekt immer noch untrennbar mit dem Webpack verbunden. Eine andere Methode ist die technische Entwicklung basierend auf Webpack und Vue-Cli. Die Schritte werden unten detailliert beschrieben.
Lassen Sie mich zunächst sagen, dass Sie, wenn Sie Vue für die technische Entwicklung verwenden, zuerst node.js haben und dann npm herunterladen müssen. Allerdings verfügen neue Versionen von node im Allgemeinen über npm, sodass Sie dies nicht tun müssen. Anweisungen werden in der Befehlszeile eingegeben. Der erste Schritt besteht darin, ein Vue-Projekt zu generieren:

Der vom Blogger selbst angegebene Dateiname lautet test. Geben Sie anschließend ein Vue-Projekt ein wird generiert, aber dieses Vue-Projekt ist noch nicht verfügbar. Für einige verwandte Abhängigkeiten müssen Sie zu diesem Zeitpunkt den Ordner aufrufen und den Befehl eingeben:

vue init webpack test

Wenn die Netzwerkgeschwindigkeit nicht gut ist, verwenden Sie cnpm install. Der Effekt wird derselbe sein. Nach ein paar Minuten ist die gesamte Abhängigkeit heruntergeladen. Geben Sie dann den Befehl

npm install

ein. Wenn ein Fehler gemeldet wird und die Webseite nicht geöffnet werden kann, gibt es nur einen Grund: Das heißt, der Port ist zu diesem Zeitpunkt belegt. Ändern Sie einfach den Port im Verzeichnis /config/index.js.

Wenn ein Vue-Projekt alle Konfigurationen abgeschlossen hat, liegt der nächste Schritt in unserem Fokus. Zuerst erstellen wir ein paar neue HTML-Dateien. Als Blogger habe ich eine neue one.html und two.html erstellt Entsprechende VUE-Dateien und JS-Dateien, das Dateiverzeichnis lautet wie folgt:

Nachdem wir fertig sind, geben wir das Verzeichnis buildwebpack.base.conf.js ein, suchen den Eintrag in der Domäne module.exports und konfigurieren den Zusatz dort Mehrere Einträge:

npm run dev

Beachten Sie, dass die Variablennamen im violetten Teil gut benannt sein müssen, da sie später verwendet werden, um ein Vergessen zu verhindern.

Der nächste Schritt besteht darin, die Entwicklungsumgebung zu ändern, dev auszuführen, die Datei buildwebpack.dev.conf.js zu öffnen und die Plugins in module.exports zu finden. Das Folgende lautet wie folgt:

entry: {
 app: './src/main.js',
 one: './src/js/one.js',
 two: './src/js/two.js'
},

In Chunks Die App verweist auf den entsprechenden Variablennamen im Eintrag von webpack.base.conf.js. Die Funktion von Chunks besteht darin, dass jeder Eintrag bei jeder Kompilierung und Ausführung einem Eintrag entspricht. Wenn er nicht geschrieben wird, werden die Ressourcen aller Seiten eingeführt.

Danach konfigurieren Sie den Run Build, der die Kompilierungsumgebung darstellt. Öffnen Sie zuerst die Datei configindex.js und fügen Sie dies dem Build hinzu:

plugins: [
 new webpack.DefinePlugin({
  'process.env': config.dev.env
 }),
 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  chunks: ['app']
 }),
 new HtmlWebpackPlugin({
  filename: 'one.html',
  template: 'one.html',
  inject: true,
  chunks: ['one']
 }),
 new HtmlWebpackPlugin({
  filename: 'two.html',
  template: 'two.html',
  inject: true,
  chunks: ['two']
 }),
 new FriendlyErrorsPlugin()
]

Öffnen Sie dann die Datei /build/webpack.prod/conf.js, suchen Sie das HTMLWebpackPlugin in den Plugins und fügen Sie dann den folgenden Code hinzu:

index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),

Der Dateiname bezieht sich auf den Build in configindex.js. Jede Seite muss mit einem Chunk konfiguriert werden, sonst werden die Ressourcen aller Seiten geladen.

Dann kann die one.js-Datei so geschrieben werden:

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'index.html'
  : config.build.index,
 template: 'index.html',
 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: 'dependency',
 chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
 filename: config.build.one,
 template: 'one.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'one']
}),
 new HtmlWebpackPlugin({
   filename: config.build.two,
   template: 'two.html',
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
   },
   chunksSortMode: 'dependency',
   chunks: ['manifest', 'vendor', 'two']
 }),

Two ist auf ähnliche Weise geschrieben, also werde ich es nicht aufschreiben

Dann schreibe In App.vue sieht es so aus:

import Vue from 'vue'
import one from './one.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#one',
 render: h => h(one)
})
one.vue写法如下：
<template>
 <p id="one">
  {{msg}}
 </p>
</template>

<script>
export default {
 name: &#39;one&#39;,
 data () {
  return {
   msg: &#39;I am one&#39;
  }
 }
}
</script>

Auf diese Weise springen Sie beim Öffnen der Seite durch Klicken auf den einen Link oben zu one.html und durch Klicken auf zwei auf two.html. Auf diese Weise sind Sie fertig.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So kompilieren, verpacken und anzeigen Sie Indexdateien in Vue

So verwenden Sie die Jade-Vorlage in Vue

Vorlage an Komponente in Angular übergeben

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die mehrseitige Entwicklung in vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!