échafaudage vue et installation de vue-cli

Cette fois, je vais vous présenter l'installation de vue scaffolding et vue-cli. Quelles sont les précautions à prendre pour l'installation de vue scaffolding et vue-cli ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Il est recommandé d'utiliser cnpm qui est plus rapide que npm et npm reste parfois bloqué. Voici un petit rappel pour savoir s'il faut activer eslint. un outil recommandé aux novices qui débutent. Sinon, si le code écrit n'est pas conforme à ses spécifications, votre compilateur continuera à signaler des erreurs, comme indiqué ci-dessous

Après avoir installé l'échafaudage, cela ressemble à ceci

Entrée du terminal

, puis ouvrez localhost:8080 et vous pouvez voir le projet en cours d'exécution npm run dev

Brève analyse de plusieurs fichiers couramment utilisés, comme indiqué ci-dessous

1.build : principalement utilisé pour configurer des projets de build et des webpacks

2.config : Configuration de développement du projet

3. Package de dépendances téléchargé par npm ou cnpm

4 Votre code source

5. packaging Ce fichier ne sera pas empaqueté

6. Le titre de la page la plus externe est généralement défini ici

7. Stockez les données json du package dépendant npm que vous souhaitez

Environ Après avoir présenté la structure du projet, jetons un œil au code source de sa page !

Commencez avec cet App.vue Ce fichier est uniquement destiné à l'index externe, ce qui signifie que l'index contient toutes les pages, et App.vue contient des pages sauf l'index, c'est-à-dire. est l'imbrication de routes, comme nous le mentionnerons plus tard, les fichiers créés ici sont tous des noms de fichiers.vue Le format HTML de la page est une balise de modèle contenant un p, qui équivaut à un formulaire composant, et le contenu du composant est écrit. dans ce p (Une page ne doit avoir qu'un seul modèle contenant un p, et le contenu est écrit dans ce p, sinon une erreur sera signalée), et cette balise router-view est une sous-page sous la page actuelle, qui peut être compris comme cette vue du routeur est une autre page, contenue dans la page actuelle, quelque peu similaire à la fonction de la balise ifame.

format css, js

Jetons maintenant un œil à la page HelloWorld.vue, où le format de placement de code js, css a été écrit pour vous Oui, écrivez-le simplement dans ce format. Ce qu'il faut rappeler, c'est l'attribut scoped dans la balise style. Si celui-ci n'est pas écrit, le style de ce style affectera toutes les sous-routes de cette page. le style ne s'appliquera qu'au courant La page fonctionne

Après avoir lu la page, jetons un coup d'œil à la configuration de routage comme indiqué ci-dessous

Le chemin de routage est sous le routeur. Lorsque vous l'ouvrez pour la première fois, vous verrez une erreur. En fait, ce n'est pas une erreur de syntaxe, c'est parce que le compilateur compile la syntaxe d'es5 par défaut et que l'échafaudage vue utilise la syntaxe d'es6. . Le compilateur que j'utilise est webStorm et il suffit de le configurer.

Permettez-moi de présenter brièvement la structure des routeurs. Ceci est principalement utilisé pour configurer le routage. Comme mentionné ci-dessus, toutes les sous-routes sont. dans App. Sous vue, all App.vue est la route parent la plus externe. Ce qui est stocké ici dans les routes est le chemin auquel vous souhaitez accéder à la page que vous avez créée. , vous pourrez donc y accéder directement. localhost:8080 apparaîtra avec une page HelloWorld.vue insérée dans App.vue (cela équivaut à une imbrication de routage). Le nom n'est pas pertinent par rapport au nom du composant. vouloir référencer. Celle référencée ici C'est la page HelloWorld.vue, principalement l'import ci-dessus voici une variable, correspondant au chemin du fichier ci-dessus

Maintenant je vais vous apprendre à créer un fichier et. configurer le routage

Créez d'abord un fichier avec le suffixe vue, et écrivez la structure html la plus basique

Configurez ensuite son routage, introduisez d'abord ce fichier en utilisant l'import, puis remplissez Pour accéder au chemin de ce fichier, j'utilise /test. Pour ouvrir cette route, saisissez localhost:8080/#/test Récupérez le fichier importé dans le composant

Saisissez. l'URL et une page avec test.vue imbriquée dans APP.vue apparaîtra

L'imbrication par défaut de l'échafaudage vue est que toutes les pages sont imbriquées dans la page App.vue , je vais maintenant vous apprendre à imbriquer librement vos propres pages. Maintenant, j'imbrique la page de test sous la page HelloWorld.vue

Tout d'abord, ajoutez une balise router-view sous l'interface HelloWorld.vue

Configurez ensuite la sous-route de HelloWorld.vue

De cette façon, localhost:8080/#/test est une APP .vue nested HelloWorld.vue La page de test.vue imbriquée est comme indiqué ci-dessous

De cette façon, une imbrication de routage simple est terminée. Parlons des sauts de routage par exemple. , vous associez une fonction à un bouton. Pour parvenir à cliquer sur le bouton pour accéder à la page de test, vous pouvez utiliser

this.$router.push({path:'/test'})

dans la fonction. Si vous souhaitez revenir à la page précédente, utilisez

this.$router.go(-1)

. Le contenu général est le suivant. S'il y a une explication, veuillez me pardonner si je me trompe ou si je regrette, ou contactez-moi afin que nous puissions communiquer davantage !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

vue effectue le compte à rebours du bouton de code de vérification

Utiliser la base de données globale dans le projet vue

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!