Comment installer npm dans vue.js

Cette fois, je vais vous montrer comment installer npm dans vue.js. Quelles sont les précautions lors de l'installation de npm dans vue.js. Voici des cas pratiques, jetons un coup d'œil.

Clarifiez d'abord la relation entre nodejs et npm :

node.js est un environnement d'exécution pour javascript, qui est une implémentation de Google Moteur V8 d'emballage. Il s'agit d'un interpréteur JavaScript côté serveur.

Relation d'inclusion, nodejs contient npm. Par exemple, si vous installez nodejs, vous trouverez le numéro de version de npm lorsque vous ouvrez cmd et entrez npm -v, indiquant que npm a été installé.

Citant le résumé du master :

En fait, npm est le gestionnaire de packages de nodejs. Lorsque nous développons sur Node.js, nous utiliserons beaucoup de codes javascript qui ont été écrits par d'autres. Si à chaque fois que nous avons besoin du code de quelqu'un d'autre, nous devons le rechercher par son nom, télécharger le code source, le décompresser, puis le décompresser. utilisez-le, ce sera très gênant. Ainsi, le gestionnaire de paquets npm est apparu. Tout le monde télécharge le code source qu'il a écrit sur le site officiel de npm. Si vous souhaitez en utiliser un ou plusieurs, vous pouvez l'installer directement via npm, quel que soit l'emplacement du code source. Et si nous voulons utiliser le module A et que le module A dépend du module B et que le module B dépend des modules C et D, npm téléchargera et gérera tous les packages dépendants en fonction des relations de dépendance. Imaginez à quel point ce serait difficile si nous devions faire tout ce travail nous-mêmes !

node -v Affichez la version node, qui inclut le npm Gestionnaire de packages pour installer les packages dépendants.

npm install -g typescript

1. Avant de l'utiliser, comprenons d'abord à quoi servent les trois choses.

npm : Gestionnaire de packages pour Nodejs. webpack : son objectif principal est de préparer toutes les ressources statiques qui doivent être publiées par le navigateur via la syntaxe CommonJS, telles que les ressources de fusion et de packaging. vue-cli : modèle de projet Vue généré par l'utilisateur. (Vous aider

démarrer rapidement un projet vue, ce qui signifie vous donner un ensemble de structures vue, y compris des bibliothèques de dépendances de base, qui peuvent être installées avec simplement npm install) Démarrer :

Comme le montre l'image, téléchargez la version 8.9.3 LTS (recommandé pour la plupart des utilisateurs)

Double-cliquez pour installer

Vous pouvez utiliser le chemin par défaut. Dans cet exemple, modifiez-le en d:nodejs

Cliquez sur Suivant

Cliquez sur Terminer

Ouvrez CMD et vérifiez si c'est normal

En regardant les deux autres répertoires, l'entrepôt local de npm s'exécute dans le répertoire utilisateur du lecteur c du disque système (la raison de je ne vois pas npm-cache Il n'a pas été utilisé auparavant (il est généré dès que le répertoire cache est utilisé). Nous essayons de déplacer ces deux répertoires vers D:nodejs. Créez d'abord deux répertoires

.

comme indiqué ci-dessous, puis exécutez les 2 commandes suivantes npm config set prefix "D:nodejsnode_global" npm config set cache "D:nodejsnode_cache"

Comme indiqué ci-dessus, faisons à nouveau attention à l'entrepôt local de npm. Entrez la commande npm list -global

Entrez la commande npm config set Registry=http://. Registry.npm .taobao.org Configurez la station miroir

Entrez la commande

npm config list pour afficher toutes les informations de configuration. Nous nous concentrons sur un fichier de configuration . C:UsersAdministrator.npmrc

Utilisez l'éditeur de texte pour le modifier, vous pouvez voir les informations de configuration tout à l'heure

Vérifiez si la station miroir est OK. Commande 1 npm config get Registry

Vérifiez si la station miroir est OK. est OK. Commandez 2 Npm info vue pour voir s'il peut être obtenu des informations de vue

Notez qu'à ce moment, le module par défaut Le répertoire D:nodejsnode_modules sera remplacé par le répertoire D:nodejsnode_globalnode_modules si vous exécutez directement npm install et d'autres commandes signaleront une erreur. Nous devons faire 1 chose : 1. Ajouter la variable d'environnement NODE_PATH. Le contenu est : D:nodejsnode_globalnode_modules

(notez que vous devez rouvrir CMD pour que cette opération soit effectuée. la variable d'environnement ci-dessus prend effet) 1. Testez la commande vue.js d'installation de NPM : npm install vue -g Le -g ici fait référence à l'installation dans le répertoire global global

2. Testez la commande vue-router d'installation de NPM : npm install vue-router -g

Exécutez npm install vue-cli -g pour installer vue scaffolding

Édition de l'environnement Modifier le chemin

Ajoutez D:nodejsnode_global à la variable d'environnement path Pour les versions inférieures à win10, PATH sera affiché horizontalement lors de son ajout. à la fin, faites attention à ne pas avoir de point-virgule [;]

Rouvrez CMD et testez si vue fonctionne correctement

Notez que l'outil vue-cli a des modèles intégrés, notamment webpack et webpack-simple, le premier est un projet plus complexe et professionnel, et sa configuration n'est pas entièrement placée dans webpack.config.js dans le répertoire racine.

Initialisation, installation des dépendances

Exécutez npm install pour installer les dépendances

npm run dev

Interface de réussite, invite à ouvrir l'adresse http://localhost:8080

Ouvrir automatiquement le navigateur http://localhost:8080/#/

npm run build génère des fichiers statiques, ouvrez le fichier index.html nouvellement généré dans le dossier dist La description du répertoire de la vue01 nouvellement créée sous nmp :

.

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 :

Comment résoudre le problème du code d'état 302 dans axios

Image d'opération JS en noir et blanc

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!