简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment configurer des projets multipages dans Vue.js

Comment configurer des projets multipages dans Vue.js

小云云
小云云original
2018-03-10 15:33:422380parcourir

Utilisez d'abord la commande suivante pour créer un nouveau projet Vue.js 

vue init webpack vue-3

Après avoir ouvert le projet à l'aide de VsCode, entrez le projet sur la ligne de commande, installez les bibliothèques dépendantes appropriées et puis exécutez le projet et exécutez la commande suivante 

cd vue-3npm installnpm run dev

Quand tout est normal, saisissez http://localhost:8080 dans le navigateur et une page avec une grande icône V devrait apparaître.

Après avoir terminé les préparatifs ci-dessus, nous mettrons ensuite en œuvre la configuration du projet multipage. Les effets que nous espérons obtenir sont les suivants :

Entrez http:// dans. le navigateur localhost:8080/admin passera à la page affichant Ceci est la connexion de l'administrateur .

On crée le répertoire page/login dans le répertoire src du projet
puis on crée trois nouveaux dossiers sous le répertoire login : admin.html admin.js Admin.vue

Ensuite on écrit le code d'affichage de la page correspondant , où Le code dans
admin.html est le suivant

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

Le code dans Admin.vue est le suivant

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

Le code dans admin.js est le suivant 

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

Une fois le code de la page ci-dessus terminé, démarrez le travail de configuration

Ouvrez d'abord le build répertoire
et ajoutez un nouveau fichier d'entrée au webpack.base.conf.js attribut de configuration du fichier entry : 

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

Ajouter une redirection vers webpack.dev.conf.js sous devServer dans le fichier 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;) },
      ],
    },

Configurez également un autre plugins dans l'élément de configuration HtmlWebpackPlugin du fichier >Plug-in, permet de générer la page d'entrée de admin.html
et d'ajouter chunks en même temps, permet de préciser l'alias du fichier d'entrée correspondant au précédent entry. 

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

Ensuite, nous trouvons le répertoire config, ouvrons le fichier index.js à l'intérieur et ajoutons le code suivant sous l'attribut build 

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

Terminé tout ce qui précède Pour configurer le travail, réexécutez npm run dev sur la ligne de commande. Une fois le projet démarré, tapez http://localhost:8080/admin dans le navigateur, et il passera avec succès à la page que nous venons d'écrire. .

Utilisez d'abord la commande suivante pour créer un nouveau projet Vue.js 

vue init webpack vue-3

Après avoir ouvert le projet à l'aide de VsCode, entrez le projet sur la ligne de commande, installez les bibliothèques dépendantes appropriées et puis exécutez le projet et exécutez la commande suivante 

cd vue-3npm installnpm run dev

Quand tout est normal, saisissez http://localhost:8080 dans le navigateur et une page avec une grande icône V devrait apparaître.

Après avoir terminé les préparatifs ci-dessus, nous mettrons ensuite en œuvre la configuration du projet multipage. Les effets que nous espérons obtenir sont les suivants :

Entrez http:// dans. le navigateur localhost:8080/admin passera à la page affichant Ceci est la connexion de l'administrateur .

On crée le répertoire page/login dans le répertoire src du projet
puis on crée trois nouveaux dossiers sous le répertoire login : admin.html admin.js Admin.vue

Ensuite on écrit le code d'affichage de la page correspondant , où Le code dans
admin.html est le suivant

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

Le code dans Admin.vue est le suivant

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

Le code dans admin.js est le suivant 

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

Une fois le code de la page ci-dessus terminé, démarrez le travail de configuration

Ouvrez d'abord le build répertoire
et ajoutez un nouveau fichier d'entrée au webpack.base.conf.js attribut de configuration du fichier entry : 

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

Ajouter une redirection dans le webpack.dev.conf.js sous le devServer du fichier 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;) },
      ],
    },

Configurer également une plus plugins du fichier >Plug-in, utilisé pour générer la page d'entrée de admin.html HtmlWebpackPlugin et ajouter
en même temps, utilisé pour spécifier l'alias du fichier d'entrée correspondant au précédent chunks. entry

  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
    }),
Ensuite, nous trouvons le répertoire

, ouvrons le fichier config à l'intérieur et ajoutons le code suivant sous l'attribut index.js build

  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;),
Terminé tout ce qui précède Pour configurer le travail, réexécutez

sur la ligne de commande. Une fois le projet démarré, tapez http://localhost:8080/admin dans le navigateur, et il passera avec succès à la page que nous venons d'écrire. . npm run dev

Recommandations associées :

Un exemple simple de développement d'une application multipage avec vue-cli

Vue-cli crée un seul page en plusieurs pages Exemple de code de méthode

Comment transformer Vue-cli en un mode historique prenant en charge plusieurs pages

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment écrire un simulateur avec JSArticle suivant：Comment écrire un simulateur avec JS

Articles Liés

Voir plus