


Dans quel environnement vue doit-il être installé ?
vue nécessite l'installation de l'environnement Node. Le fonctionnement de vue dépend de l'outil de gestion npm du nœud, et le nœud peut être utilisé pour empaqueter et déployer, analyser les composants de fichier unique de vue, analyser chaque module vue, démarrer l'hôte local du serveur de test et gérer des plug-ins tels que vue-router et vue-ressource.
L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.
Quels environnements doivent être préparés et configurés pour le développement du projet Vue ?
Je crois que beaucoup de gens rencontreront des petits et des grands pièges lorsqu'ils commenceront à apprendre le framework Vue et à créer un environnement de développement. Je l'ai construit une fois lorsque j'apprenais Angular, puis je l'ai reconstruit un mois plus tard. à l'époque, il y avait une certaine confusion, alors je voulais faire le tri aujourd'hui ;
vue est maintenant utilisée dans le front-end et est l'un des frameworks les plus couramment utilisés par les ingénieurs front-end. Il présente certaines similitudes avec angulaire, donc. J'ai utilisé angulaire. Mes amis, cela ne devrait pas être trop difficile de réapprendre vue
1 : Téléchargez et installez l'environnement de nœud
Avant de configurer l'environnement de développement vue, vous devez d'abord télécharger node.js
Le fonctionnement de vue dépend de la mise en œuvre de l'outil de gestion npm de Node.
Et il est plus pratique d'utiliser le nœud, de packager et de déployer, d'analyser les composants de fichier unique de vue, d'analyser chaque module de vue, de les assembler, etc., de démarrer le serveur de test localhost et de vous aider à gérer vue-router, vue-resource des plug-ins. Nous utiliserons donc généralement la méthode Vue+node, ce qui est pratique et évite les problèmes.
le nœud peut être téléchargé depuis le site officiel ou le site chinois. Vous pouvez choisir 32 ou 64 selon votre ordinateur Site Web : http://nodejs.cn ;
Deux : Après avoir téléchargé le nœud. l'outil de gestion de documents, vérifiez d'abord si le nœud est installé avec succès. Entrez node -v et appuyez sur Entrée. Le numéro de version du nœud sera affiché
Cela signifie que l'installation est réussie puisque l'utilisation de npm en Chine est très. lent, donc ici, nous vous recommandons d'utiliser le miroir npm de Taobao. Utilisez
L'outil de gestion des commandes cnpm de Taobao pour remplacer l'outil de gestion npm par défaut : $ npm install -g cnpm --registry=https:/. /registry.npm.taobao.org;
Trois : une fois l'image Taobao installée avec succès, nous pouvons utiliser l'échafaudage vue-cli globalement, entrez le commande : cnpm install --global vue-cli Appuyez sur Entrée pour vérifier si l'installation a réussi, entrez vue dans la commande, les informations de vue apparaîtront et l'installation est terminée. est réussi ; : Après avoir construit l'échafaudage, nous devons commencer à construire un nouveau projet. cette fois, je suggère d'essayer de ne pas l'installer sur le lecteur C. Parce que le fichier téléchargé par vue est relativement volumineux, si vous souhaitez le modifier, entrez simplement D: et appuyez sur Entrée pour le modifier directement, .
Ensuite, nous commençons à créer un nouveau projet et entrons la commande :vue init webpack
-project Appuyez sur Entrée. dossier. C'est un projet basé sur webpack. Après l'avoir entré, continuez d'appuyer sur Entrée jusqu'à ce qu'il apparaisse si vous souhaitez l'installer, Nous l'utiliserons dans le projet, donc. entrez simplement y et appuyez sur Entrée
Ce qui suit montrera si la détection de la syntaxe js est nécessaire, nous l'utiliserons temporairement. Sinon, vous pouvez directement saisir non, et pour le reste, vous pouvez directement saisir non , que nous n'utiliserons pas pour le moment Quatre : Le dossier a été téléchargé, vous pouvez maintenant entrer dans le dossier, entrez : cd mon-projet et appuyez sur Entrée, car chaque modèle est interdépendant, nous devons donc maintenant installer les dépendances, Entrez la commande : cnpm install Cinq : Une fois installé, nous devons maintenant tester si le modèle que nous avons téléchargé peut fonctionner normalement. Dans la ligne de commande, entrez : npm exécutez dev et appuyez sur Entrée 8080 est le port par défaut, entrez localhost:8080 directement dans le navigateur pour ouvrir le modèle par défaut ; De cette façon, notre projet vue basic a été installé et exécuté, et nous avons franchi la porte de vue ; saupoudrez de fleurs et c'est terminé Ce qui précède est la méthode de construction d'échafaudage de vue-cli2.0, qui a maintenant ; a été mis à niveau vers 4.0, la méthode de construction du projet est plus simple et plus pratique. Entrez la commande : Puis sélectionnez Configuration, la première valeur par défaut est la configuration par défaut et la seconde est la configuration manuelle. La configuration manuelle dépend des besoins de votre propre projet, configurez les fichiers requis (mais en général, je choisis la configuration par défaut pour plus de commodité, haha). ), puis attendez. Créez le dossier ; Une fois le fichier créé avec succès, entrez directement la commande : npm run serve, et vous pourrez exécuter le projet ! Recommandations associées : "npm install -g @vue/cli pour télécharger l'outil d'échafaudage. Une fois le téléchargement réussi, entrez la commande : vue create
Tutoriel vue.js
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!

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

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

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)

Sujets chauds

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Vous pouvez ajouter une fonction au bouton VUE en liant le bouton dans le modèle HTML à une méthode. Définissez la logique de la fonction de méthode et d'écriture dans l'instance Vue.

L'option Watch dans Vue.js permet aux développeurs d'écouter des modifications de données spécifiques. Lorsque les données changent, regardez déclenche une fonction de rappel pour effectuer des vues de mise à jour ou d'autres tâches. Ses options de configuration incluent immédiatement, qui spécifie s'il faut exécuter un rappel immédiatement, et profond, ce qui spécifie s'il faut écouter récursivement les modifications des objets ou des tableaux.

Le développement multi-pages VUE est un moyen de créer des applications à l'aide du cadre Vue.js, où l'application est divisée en pages distinctes: Maintenance du code: La division de l'application en plusieurs pages peut rendre le code plus facile à gérer et à maintenir. Modularité: chaque page peut être utilisée comme module séparé pour une réutilisation et un remplacement faciles. Routage simple: la navigation entre les pages peut être gérée par une configuration de routage simple. Optimisation du référencement: chaque page a sa propre URL, ce qui aide le référencement.

Il existe trois façons de se référer aux fichiers JS dans Vue.js: spécifiez directement le chemin à l'aide du & lt; script & gt; étiqueter;; importation dynamique à l'aide du crochet de cycle de vie monté (); et l'importation via la bibliothèque de gestion de l'État Vuex.

Vue.js dispose de quatre méthodes pour revenir à la page précédente: $ router.go (-1) $ router.back () utilise & lt; router-link to = & quot; / & quot; Composant Window.History.back (), et la sélection de la méthode dépend de la scène.

Il existe deux façons de sauter des éléments div dans Vue: Utilisez le routeur Vue et ajoutez le composant routeur-link. Ajoutez l'écouteur de l'événement @Click et appelez ceci. $ Router.push () pour sauter.

Il existe trois méthodes courantes pour que Vue.js traverse les tableaux et les objets: la directive V-FOR est utilisée pour traverser chaque élément et les modèles de rendu; La directive V-Bind peut être utilisée avec V-FOR pour définir dynamiquement les valeurs d'attribut pour chaque élément; et la méthode .map peut convertir les éléments du tableau en nouveaux tableaux.
