[Vue] Utilisez vue-cli pour créer un routage pour les projets SPA et un routage imbriqué

1. Construction du projet SPA

1. Préparation préliminaire

Notre préparation préliminaire consiste à mettre en place Node.js et à tester :
node -v
npm -v

2. Utilisez Vue-cli pour créer des projets de spa

2.1. Qu'est-ce que Vue-cli ?

Vue CLI est un outil d'échafaudage officiel basé sur Vue.js, utilisé pour générer automatiquement des modèles de projet vue.js + webpack. Il peut aider les développeurs à créer rapidement l'infrastructure des projets Vue.js et fournit une série d'outils de développement et d'options de configuration. Vue CLI propose deux méthodes : une interface de ligne de commande et une interface graphique, que les développeurs peuvent choisir d'utiliser selon leurs propres préférences. À l'aide de Vue CLI, vous pouvez facilement effectuer des tâches de développement courantes telles que l'initialisation du projet, la gestion des dépendances, le développement et le débogage, la construction et l'empaquetage, etc., simplifiant ainsi le processus de développement des applications Vue.js et améliorant l'efficacité du développement.

La commande de création est la suivante :
 vue init webpack xxx
xxx crée un nom pour le projet pour lui-même

Vous devez d'abord installer certains environnements nécessaires tels que vue, vue-cli, webpack, node, etc.

2.2. Installer vue-cli

Win + R CMD Entrez dans la fenêtre de commande et entrez la commande npm install -g vue-cli

Tapez npm install webpack -g

Après une installation réussie, les fichiers suivants apparaîtront :

vue

vue.cmd

vue-init

vue-init.cmd

liste de vues

vue-list.cmd

Une fois l'installation terminée, ouvrez la fenêtre de commande et entrez vue -V (notez le "V" majuscule ici). Si le numéro de version correspondant apparaît, l'installation est réussie.

2.3. Utilisez l'échafaudage vue-cli pour construire le projet

Créer le squelette du projet :

Trouvez un chemin pour mettre ce squelette

Entrez dans le répertoire CMD pour accéder à la fenêtre de commande

vue init webpack xxx : xxx est le nom de votre projet. Le nom du projet ne peut pas utiliser de lettres chinoises ou majuscules , puis le mode " questions et réponses " apparaîtra sur le terminal.

La fenêtre de ligne de commande cmd affiche des caractères chinois tronqués , ce qui est dû à une incompatibilité de codage de caractères dans la fenêtre de ligne de commande cmd .

        Modifiez le codage des caractères de la fenêtre cmd en UTF-8 et exécutez dans la ligne de commande : chcp 65001

        Revenir au chinois : chcp 936
        Ces deux commandes ne prennent effet que dans la fenêtre en cours, et l'encodage précédent sera restauré après redémarrage.

Mode "Une question et une réponse"

Nom du projet : Nom du projet, la valeur par défaut est le nom spa1 lors de la saisie, appuyez simplement sur Entrée

Description du projet : Description du projet, appuyez simplement sur Entrée

Auteur : auteur, remplissez-le avec désinvolture ou appuyez directement sur Entrée

Vue build : question à choix multiples, choisissez généralement la première

Exécutez et compilez, c'est officiellement recommandé, alors choisissez-le.

En exécution uniquement, s'il existe déjà une recommandation, sélectionnez la première.

Installer vue-router : si vue-router est requis

Sélectionnez Y à utiliser, afin que le projet généré contienne les fichiers de configuration de routage pertinents.

Utilisez ESLint pour lint votre code : indiquez s'il faut utiliser ESLint pour limiter les erreurs et le style de votre code.

Si vous êtes novice, remplissez généralement N, mais il est généralement utilisé dans des projets réels, afin que plusieurs développeurs puissent obtenir une syntaxe cohérente.

Configurer les tests unitaires : s'il faut installer des tests unitaires ; N

Configurer les tests e2e avec Nightwatch ? : s'il faut installer les tests e2e ; N

Devrions-nous exécuter « npm install » pour vous après la création du projet ? (recommandé) (Utilisez les touches fléchées)

Le premier élément « Oui, utiliser NPM » indique s'il faut utiliser npm install pour installer les dépendances.

Sélectionnez tout et appuyez sur Entrée pour générer le projet. Le contenu suivant apparaît pour indiquer que la création du projet est terminée. Nous pouvons simplement attendre.

Après avoir exécuté la commande ci-dessus, nous devons modifier le chemin actuel vers le dossier SPA

cd gq_spa : Changez le chemin d'accès au dossier gq_spa

npm install : Installer tous les modules npm requis par le projet

Démarrer et accéder au projet

Tapez npm run dev

En attente de démarrage

Copiez l'adresse ci-dessus http://localhost:8080/ et entrez dans le navigateur pour visiter

Enfin, utilisez notre logiciel de programmation pour ajouter

2.4. Description de la structure du projet Vue

dossier build : Ce dossier est principalement destiné à certaines configurations de webpack
1. webpack.base.conf.js : la configuration de base du webpack, l'environnement de développement et l'environnement de production en dépendent tous
2. webpack.dev.conf.js : configuration de l'environnement de développement du webpack
3. webpack.prod.conf.js : configuration de l'environnement de production du webpack
4. build.js : script de construction de l'environnement de production
5. vue-loader.conf.js : Ce fichier est le fichier de configuration pour le traitement des fichiers .vue
dossier de configuration
1. dev.env.js : configurer l'environnement de développement
2. prod.env.js : configurer l'environnement de production
3. index.js : Ce fichier configure le serveur proxy, par exemple : modification du numéro de port
Dossier node_modules : le dossier qui stocke le package d'installation npm généré selon la configuration package.json lors de l'installation de npm.
dossier src : répertoire du code source (le dossier le plus couramment utilisé en développement)
1. atouts : styles et images partagés
2. composants : où est stocké le code métier, qui est divisé en composants. Une page est un composant, et une page contient également de nombreux composants.
3. routeur : définir le routage
4. App.vue : interface de saisie de fichier vue
5. main.js : Créez une instance de vue correspondant à App.vue, qui est également le fichier d'entrée et correspond à la configuration d'entrée dans webpack.base.config.js
Dossier statique : Les fichiers stockés ne seront pas traités par webpack et peuvent être référencés directement. Par exemple, si vous souhaitez référencer un fichier swf, vous pouvez configurer le chargeur dans webpack pour traiter les fichiers avec le nom de suffixe swf. Vous pouvez également directement placez le fichier swf dans ce dossier pour référence.
package.json : Ce fichier comporte deux parties utiles : la configuration des commandes dans les scripts et les dépendances et les devDependencies, qui correspondent respectivement aux packages de dépendances téléchargés globalement et localement.

3. Qu'est-ce qu'un fichier Vue ?

Le fichier vue est un type de fichier personnalisé qui décrit un composant Vue en utilisant une syntaxe de type HTML . Chaque fichier .vue contient trois types de blocs de langage de niveau supérieur : <template>, <script> et <style> . Ces trois parties représentent respectivement html, js et css .

2. Le projet SPA utilise le routage

Nos étapes précédentes :

Assurez-vous d'introduire la dépendance js de Vue.vue-router

Vous devez d'abord définir les composants (c'est-à-dire afficher différents effets de page)

Besoin de mettre différents composants dans un conteneur (collection de routage)

Assembler une collection de routes dans un routeur

Montez la route dans l'instance Vue

Définir le point d'ancrage

Saut

Étapes maintenant :

1. Dépendance

Assurez-vous que nous avons des dépendances suspendues. Dans notre main.js , la route a également été montée, alors ne vous inquiétez pas.

2. Définir les composants

Dans le dossier des composants , créez un nouveau fichier vue dont vous avez besoin

3. Définir le conteneur

Il n'y a et ne peut y avoir qu'un seul nœud racine dans <template> dans le fichier vue.

<script>
</script>

<template>
  <div class="index">
    这是网站的首页部分
  </div>
</template>

<style scoped>

</style>

<script>
</script>

<template>
  <div class="home">
    这是网站的介绍
  </div>
</template>

<style scoped>

</style>

4. Assembler dans un routeur

<script>
export default {
  name: 'Index',
  data() {
    return {
      msg: '欢迎来到网站的首页'
    }
  }
}
</script>

<template>
  <div class="index">
    这是网站的首页部分
  </div>
</template>

<style scoped>

</style>

<script>
export default {
  name: 'home',
  data() {
    return {
      msg: '欢迎来到网站的介绍部分'
    }
  }
}
</script>

<template>
  <div class="home">
    这是网站的介绍
  </div>
</template>

<style scoped>

</style>

5. Définir les relations de routage

Définir la relation de routage dans le fichier index.js dans le dossier du routeur

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '@/components/Index'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/Home',
      name: 'Home',
      component: Home
    }, {
      path: '/Index',
      name: 'Index',
      component: Index
    }
  ]
})

Définir votre propre relation écrite

6. Définir les points d'ancrage

Définir le point d'ancrage dans App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png"><br>
    <router-link to="/Index">首页</router-link>
    <router-link to="/Home">介绍</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

7. Testez

3. Les projets SPA utilisent le routage imbriqué

1. Effet d'affichage final

2. Étapes

2.1. Définir les points d'ancrage

Sélectionnez l'ancre de définition de page que vous devez définir

2.2. Assembler et définir les conteneurs

Définissez le conteneur et assemblez le contenu requis en quelques étapes simples

2.3. Définir les relations

Ajoutez votre propre relation

Nous ne pouvons pas l'ajouter directement plus tard. Nous devons utiliser le tableau children pour l'ajouter à la page spécifiée, sinon nous ne pourrons pas afficher l'effet dont nous avons besoin.

2.4. Tests

Enfin, nous montrerons un de nos effets.

C'est tout pour le partage, merci à tous d'avoir lu.

Tout le monde est invité à discuter dans la zone de commentaires ! ! !