Comment configurer des projets multipages dans Vue.js-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment configurer des projets multipages dans Vue.js

小云云

Mar 10, 2018 pm 03:33 PM

javascript vue.js 配置

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

vue init webpack vue-3

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

Le code dans Admin.vue est le suivant

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

cd vue-3npm installnpm run dev

Copier après la connexion

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>

Copier après la connexion

Le code dans Admin.vue est le suivant

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Configurer également une plus <🎜 dans l'élément de configuration 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
    }),

Copier après la connexion

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

Copier après la connexion

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 de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7460

Tutoriel CakePHP

1376

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

La combinaison parfaite de PyCharm et PyTorch : étapes détaillées d'installation et de configuration Feb 21, 2024 pm 12:00 PM

PyCharm est un puissant environnement de développement intégré (IDE) et PyTorch est un framework open source populaire dans le domaine de l'apprentissage profond. Dans le domaine de l'apprentissage automatique et de l'apprentissage profond, l'utilisation de PyCharm et PyTorch pour le développement peut améliorer considérablement l'efficacité du développement et la qualité du code. Cet article présentera en détail comment installer et configurer PyTorch dans PyCharm, et joindra des exemples de code spécifiques pour aider les lecteurs à mieux utiliser les puissantes fonctions de ces deux éléments. Étape 1 : Installer PyCharm et Python

Le principe de fonctionnement et la méthode de configuration de GDM dans le système Linux Mar 01, 2024 pm 06:36 PM

Titre : Le principe de fonctionnement et la méthode de configuration de GDM dans les systèmes Linux Dans les systèmes d'exploitation Linux, GDM (GNOMEDisplayManager) est un gestionnaire d'affichage commun utilisé pour contrôler la connexion à l'interface utilisateur graphique (GUI) et la gestion des sessions utilisateur. Cet article présentera le principe de fonctionnement et la méthode de configuration de GDM, ainsi que des exemples de code spécifiques. 1. Principe de fonctionnement de GDM GDM est le gestionnaire d'affichage de l'environnement de bureau GNOME. Il est chargé de démarrer le serveur X et de fournir l'interface de connexion à l'utilisateur.

Comprendre Linux Bashrc : fonctions, configuration et utilisation Mar 20, 2024 pm 03:30 PM

Comprendre Linux Bashrc : fonction, configuration et utilisation Dans les systèmes Linux, Bashrc (BourneAgainShellruncommands) est un fichier de configuration très important, qui contient diverses commandes et paramètres qui sont automatiquement exécutés au démarrage du système. Le fichier Bashrc se trouve généralement dans le répertoire personnel de l'utilisateur et est un fichier caché. Sa fonction est de personnaliser l'environnement Bashshell pour l'utilisateur. 1. Environnement de configuration des fonctions Bashrc

Comment configurer un groupe de travail dans le système Win11 Feb 22, 2024 pm 09:50 PM

Comment configurer un groupe de travail dans Win11 Un groupe de travail est un moyen de connecter plusieurs ordinateurs dans un réseau local, ce qui permet de partager des fichiers, des imprimantes et d'autres ressources entre les ordinateurs. Dans le système Win11, configurer un groupe de travail est très simple, suivez simplement les étapes ci-dessous. Étape 1 : Ouvrez l'application « Paramètres ». Cliquez d'abord sur le bouton « Démarrer » du système Win11, puis sélectionnez l'application « Paramètres » dans le menu contextuel. Vous pouvez également utiliser le raccourci « Win+I » pour ouvrir « Paramètres ». Étape 2 : Sélectionnez « Système » Dans l'application Paramètres, vous verrez plusieurs options. Veuillez cliquer sur l'option "Système" pour accéder à la page des paramètres système. Étape 3 : Sélectionnez « À propos » Dans la page des paramètres « Système », vous verrez plusieurs sous-options. Cliquez s'il vous plait

Interprétation des paramètres de configuration de MyBatis Generator et bonnes pratiques Feb 23, 2024 am 09:51 AM

MyBatisGenerator est un outil de génération de code officiellement fourni par MyBatis, qui peut aider les développeurs à générer rapidement des JavaBeans, des interfaces Mapper et des fichiers de mappage XML conformes à la structure des tables de base de données. Dans le processus d'utilisation de MyBatisGenerator pour la génération de code, la définition des paramètres de configuration est cruciale. Cet article commencera du point de vue des paramètres de configuration et explorera en profondeur les fonctions de MyBatisGenerator.

Comment configurer et installer FTPS sur le système Linux Mar 20, 2024 pm 02:03 PM

Titre : Comment configurer et installer FTPS dans le système Linux, des exemples de code spécifiques sont requis. Dans le système Linux, FTPS est un protocole de transfert de fichiers sécurisé. Par rapport à FTP, FTPS crypte les données transmises via le protocole TLS/SSL, ce qui améliore la sécurité des données. transmission. Dans cet article, nous présenterons comment configurer et installer FTPS dans un système Linux et fournirons des exemples de code spécifiques. Étape 1 : Installer vsftpd Ouvrez le terminal et entrez la commande suivante pour installer vsftpd : sudo

Tutoriel d'installation et de configuration de Flask : un outil pour créer facilement des applications Web Python Feb 20, 2024 pm 11:12 PM

Tutoriel d'installation et de configuration de Flask : Un outil pour créer facilement des applications Web Python, des exemples de code spécifiques sont nécessaires Introduction : Avec la popularité croissante de Python, le développement Web est devenu l'une des compétences nécessaires pour les programmeurs Python. Pour réaliser du développement web en Python, nous devons choisir un framework web adapté. Parmi les nombreux frameworks Web Python, Flask est un framework simple, facile à utiliser et flexible qui est privilégié par les développeurs. Cet article présentera l'installation du framework Flask,

Où puis-je vérifier la configuration de mon ordinateur win11 ? Comment trouver les informations de configuration de l'ordinateur win11 Mar 06, 2024 am 10:10 AM

Lorsque nous utilisons le système Win11, nous avons parfois besoin de vérifier la configuration de notre ordinateur, mais de nombreux utilisateurs se demandent également où vérifier la configuration de l'ordinateur Win11 ? En fait, la méthode est très simple. Les utilisateurs peuvent ouvrir directement les informations système sous les paramètres, puis afficher les informations de configuration de l'ordinateur. Laissez ce site présenter soigneusement aux utilisateurs comment trouver les informations de configuration de l'ordinateur Win11. Comment trouver les informations de configuration de l'ordinateur Win11. Méthode 1 : 1. Cliquez sur Démarrer et ouvrez les paramètres de l'ordinateur. 3. Vous pouvez afficher les informations de configuration de l'ordinateur sur cette page. 2. Dans la fenêtre d'invite de commande, saisissez systeminfo et appuyez sur Entrée pour afficher la configuration de l'ordinateur.

See all articles