So entwickeln Sie mehrere Seiten in vue2.0

Dieses Mal zeige ich Ihnen, wie Sie mehrere Seiten mit vue2.0 entwickeln. Was sind die Vorsichtsmaßnahmen für die Entwicklung mehrerer Seiten mit vue2.0? .

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 einfacher ist, kleine Mehrseiten zu erstellen Bei einem größeren Projekt geht es immer noch nicht ohne Webpack. 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 und dann npm haben müssen. Im Allgemeinen verfügen neue Versionen von node jedoch über npm, sodass Sie dies nicht tun müssen. Ich muss es nicht tun. Anweisungen werden in der Befehlszeile eingegeben. Der erste Schritt besteht darin, ein Vue-Projekt mit dem Befehl zu generieren:

vue init webpack test

Der vom Blogger selbst deklarierte Dateiname lautet test. Geben Sie nach dem Herunterladen ein Vue-Projekt ein. Zu diesem Zeitpunkt müssen Sie jedoch den Ordner eingeben und den folgenden Befehl eingeben: 🎜 >

npm install

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

npm run dev

Wenn ein Fehler gemeldet wird und die Webseite nicht geöffnet werden kann, gibt es nur einen Grund: Der Port ist zu diesem Zeitpunkt belegt. Sie müssen den Port in /config/index ändern. js-Verzeichnis.

Wenn ein Vue-Projekt alle Konfigurationen abgeschlossen hat, ist der nächste Schritt unser Fokus. Zuerst erstellen wir ein paar neue HTML-Dateien und zwei.html-Dateien sowie die entsprechenden Vue-Dateien Dateien, das Dateiverzeichnis lautet wie folgt:

Anschließend betreten wir das Verzeichnis buildwebpack.base.conf.js, suchen den Eintrag in der Domäne

module.exports und konfigurieren und fügen dort mehrere Einträge hinzu:

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

Beachten Sie, dass der

Variablenname im violetten Teil übernommen werden muss, da er später verwendet wird, um ein Vergessen zu verhindern.

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

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()
]

Die App in Chunks 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.

Konfigurieren Sie dann den Run Build, der die Kompilierungsumgebung darstellt. Öffnen Sie zunächst die Datei configindex.js und fügen Sie diese dem Build hinzu:

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

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

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

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:

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: 'one',
 data () {
  return {
   msg: 'I am one'
  }
 }
}
</script>

Die Schreibmethode von zwei ist ähnlich, daher werde ich sie nicht aufschreiben,

Dann schreiben Sie dies in App.vue:

<template>
 <p id="app">
  <a href="one.html" rel="external nofollow" >one</a><br>
  <a href="two.html" rel="external nofollow" >two</a><br>
  {{msg}}
 </p>
</template>

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vervollständigung der E-Mail-Adresse im JS-Eingabeaufforderungstextfeld 

So erhalten Sie JSON vom Server mithilfe von $.ajax( ) Methodendaten

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie mehrere Seiten in vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!