Heim  >  Artikel  >  Web-Frontend  >  So konfigurieren Sie mehrseitige Projekte in Vue.js

So konfigurieren Sie mehrseitige Projekte in Vue.js

小云云
小云云Original
2018-03-10 15:33:422397Durchsuche

Verwenden Sie zunächst den folgenden Befehl, um ein neues Vue.js-Projekt zu erstellen

vue init webpack vue-3

Nachdem Sie das Projekt mit VsCode geöffnet haben, geben Sie das Projekt in der Befehlszeile ein, installieren Sie die relevanten abhängigen Bibliotheken und Führen Sie dann das Projekt aus und führen Sie den folgenden Befehl aus:

cd vue-3npm installnpm run dev

Wenn alles normal ist, geben Sie http://localhost:8080 in den Browser ein und eine Seite mit einem großen V-Symbol sollte erscheinen.


Nach Abschluss der oben genannten Vorbereitungen werden wir als nächstes die Konfiguration des mehrseitigen Projekts implementieren. Die erwarteten Effekte sind wie folgt:

Geben Sie http:// ein Der Browser localhost:8080/admin springt zu der Seite mit der Meldung Dies ist der Administrator-Login .

Wir erstellen das Seiten-/Anmeldeverzeichnis im src-Verzeichnis des Projekts
und erstellen dann drei neue Ordner unter dem Anmeldeverzeichnis: admin.html admin.js Admin.vue

Dann schreiben wir den entsprechenden Seitenanzeigecode , wobei der Code in
admin.html wie folgt lautet

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

Der Code in Admin.vue lautet wie folgt

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

Der Code in admin.js lautet wie folgt

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

Nachdem der Code für die oben gezeigte Seite fertiggestellt ist, beginnen Sie mit der Konfigurationsarbeit

Öffnen Sie zunächst das build-Verzeichnis
und fügen Sie eine neue Eintragsdatei zum Konfigurationsattribut der webpack.base.conf.js-Datei: entry

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },
Umleitung im

unter webpack.dev.conf.js der devServer-Datei hinzufügen: rewrites

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },
Konfigurieren Sie auch eine mehr -Konfigurationselement in der Datei >Plug-in, das zum Generieren der Eintragsseite von admin.html plugins verwendet wird und gleichzeitig HtmlWebpackPlugin hinzugefügt wird, um den Alias ​​der Eintragsdatei anzugeben entsprechend dem vorherigen
. chunksentryDann suchen wir das Verzeichnis
  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),
, öffnen die Datei

darin und fügen den folgenden Code unter dem Attribut config hinzu: index.jsbuild

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),
Vollständig Um die Arbeit zu konfigurieren, führen Sie
erneut in der Befehlszeile aus. Geben Sie nach dem Start des Projekts http://localhost:8080/admin in den Browser ein und es wird erfolgreich zu der Seite gesprungen, die wir gerade geschrieben haben .

npm run devVerwenden Sie zunächst den folgenden Befehl, um ein neues Vue.js-Projekt zu erstellen

Nachdem Sie das Projekt mit VsCode geöffnet haben, geben Sie das Projekt in der Befehlszeile ein, installieren Sie die relevanten abhängigen Bibliotheken und Führen Sie dann das Projekt aus und führen Sie den folgenden Befehl aus:
vue init webpack vue-3

Wenn alles normal ist, geben Sie http://localhost:8080 in den Browser ein und eine Seite mit einem großen V-Symbol sollte erscheinen.
cd vue-3npm installnpm run dev

Nach Abschluss der oben genannten Vorbereitungen werden wir als nächstes die Konfiguration des mehrseitigen Projekts implementieren. Die erwarteten Effekte sind wie folgt:

Geben Sie http:// ein Der Browser localhost:8080/admin springt zu der Seite mit der Meldung

Dies ist der Administrator-Login

. Wir erstellen das Seiten-/Anmeldeverzeichnis im src-Verzeichnis des Projekts

und erstellen dann drei neue Ordner unter dem Anmeldeverzeichnis:


admin.html admin.js Admin.vueDann schreiben wir den entsprechenden Seitenanzeigecode , wobei der Code in

admin.html wie folgt lautet


Der Code in Admin.vue lautet wie folgt
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

Der Code in admin.js lautet wie folgt
<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

Nachdem der Code für die oben gezeigte Seite fertiggestellt ist, beginnen Sie mit der Konfigurationsarbeit
import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

Öffnen Sie zunächst das

-Verzeichnis

und fügen Sie eine neue Eintragsdatei zum Konfigurationsattribut der build-Datei:
webpack.base.conf.jsentryUmleitung im

unter
module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },
der

-Datei hinzufügen: webpack.dev.conf.jsdevServerrewritesKonfigurieren Sie auch eine mehr -Konfigurationselement in der Datei >Plug-in, das zum Generieren der Eintragsseite von admin.html

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },
verwendet wird und gleichzeitig

hinzugefügt wird, um den Alias ​​der Eintragsdatei anzugeben entsprechend dem vorherigen plugins. HtmlWebpackPlugin
chunksDann suchen wir das Verzeichnis entry, öffnen die Datei

darin und fügen den folgenden Code unter dem Attribut
  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),
hinzu:

configindex.jsbuild Vollständig Um die Arbeit zu konfigurieren, führen Sie

erneut in der Befehlszeile aus. Geben Sie nach dem Start des Projekts http://localhost:8080/admin in den Browser ein und es wird erfolgreich zu der Seite gesprungen, die wir gerade geschrieben haben .
  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

Verwandte Empfehlungen:

npm run dev

Ein einfaches Beispiel für die Entwicklung einer mehrseitigen Anwendung mit vue-cli

Vue-cli erstellt eine einzelne Seite in mehrere Seiten Beispielcode für die Methode

So verwandeln Sie Vue-cli in einen Verlaufsmodus, der mehrere Seiten unterstützt

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie mehrseitige Projekte in Vue.js. 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