Table des matières
Quels environnements doivent être préparés et configurés pour le développement du projet Vue ?
Maison interface Web Questions et réponses frontales Dans quel environnement vue doit-il être installé ?

Dans quel environnement vue doit-il être installé ?

Sep 29, 2021 pm 04:39 PM
vue

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.

Dans quel environnement vue doit-il être installé ?

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

my

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

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

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

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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 !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Comment utiliser Bootstrap en Vue Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

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.

Comment ajouter des fonctions aux boutons pour Vue Comment ajouter des fonctions aux boutons pour Vue Apr 08, 2025 am 08:51 AM

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.

Comment utiliser Watch in Vue Comment utiliser Watch in Vue Apr 07, 2025 pm 11:36 PM

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.

Que signifie le développement de plusieurs pages Vue? Que signifie le développement de plusieurs pages Vue? Apr 07, 2025 pm 11:57 PM

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.

Comment référencer le fichier JS avec Vue.js Comment référencer le fichier JS avec Vue.js Apr 07, 2025 pm 11:27 PM

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.

Comment revenir à la page précédente par Vue Comment revenir à la page précédente par Vue Apr 07, 2025 pm 11:30 PM

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.

Comment sauter à la div de Vue Comment sauter à la div de Vue Apr 08, 2025 am 09:18 AM

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.

Comment utiliser Vue Traversal Comment utiliser Vue Traversal Apr 07, 2025 pm 11:48 PM

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.

See all articles