Illustration du tutoriel d'installation de npm dans vue.js

Cet article présente principalement le schéma du didacticiel d'installation de npm dans vue.js. Maintenant, je le partage avec tout le monde. Les amis qui en ont besoin peuvent s'y référer

Clarifiez d'abord la relation entre nodejs et npm :

Node.js est un environnement d'exécution pour JavaScript et une encapsulation du moteur Google V8. 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 aide à démarrer rapidement un projet vue, c'est-à-dire qu'il vous donne 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 pour 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 (je n'ai pas vu npm-cache car je ne l'ai jamais utilisé auparavant. Le répertoire cache est généré), nous essayons de déplacer ces 2 répertoires vers D:nodejs. Créez d'abord 2 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, payons attention à nouveau à l'entrepôt local de npm et entrez la commande npm list -global

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

Entrez

La commande npm config list affiche toutes les informations de configuration. Nous nous concentrons sur un fichier de configuration C:UsersAdministrator.npmrc

Utilisez un éditeur de texte pour le modifier et vous pourrez le voir. la configuration à l'instant Informations

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

<.>

Vérifiez si la station miroir fonctionne. Commande 2 Npm info vue pour voir si vous pouvez obtenir des informations sur la vue

Notez qu'à ce stade, le répertoire du module par défaut D:nodejsnode_modules sera remplacé par le répertoire D:nodejsnode_globalnode_modules Si vous exécutez directement des commandes telles que npm install, une erreur sera signalée. 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, installer les dépendances

Exécutez npm install pour installer les dépendances

npm run dev

L'interface de réussite vous invite à ouvrir l'adresse http://localhost:8080

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

<.>

Recommandations associées :

Comment résoudre l'échec de l'installation de npm

Modules communs de npm

L'installation npm d'Electron a échoué en raison d'un délai d'attente lent du réseau

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!