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.
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!