Créer un nouvel environnement frontal de projet et les configurations associées avant de démarrer le projet

**

Créer un nouvel environnement frontal de projet et les configurations associées avant de démarrer le projet

**


avant-propos

提示:这里可以添加本文要记录的大概内容:

Construire l'environnement frontal d'un nouveau projet
La figure suivante montre l'éditeur utilisé par le frontal lors du développement
insérez la description de l'image ici


提示:以下是本篇文章正文内容,下面案例可供参考

1. Langage de programmation et framework

Deux étapes

1. Ouvrir VS

2. Importer le projet

3. Configurez l'adresse et le port de requête

Remarque : Parfois, localhost peut ne pas être facile à utiliser lors de la configuration, nous ferions donc mieux de configurer 127.0.0.1 pour qu'il pointe vers notre ordinateur.
Le code est le suivant (exemple) :
insérez la description de l'image ici

4. Démarrer le projet

Méthode 1 :
utiliser node.js pour démarrer le projet
Méthode 2 :
utiliser npm pour démarrer le projet

Remarque : Nous devons porter une attention particulière à la version de node.js et npm sur notre ordinateur.

* Si vous rencontrez la situation illustrée dans l'image ci-dessous, nous devons la résoudre patiemment. (Pour cet enregistrement, après la désinstallation du nœud, la réinstallation de l'outil de nœud et le téléchargement à nouveau fonctionneront)
`
Comme indiqué sur la figure :
insérez la description de l'image ici

5. Vérifiez le fichier journal des erreurs

insérez la description de l'image ici

insérez la description de l'image ici

6. Exécutez la commande pour installer les dépendances associées et les packages jar

insérez la description de l'image ici

7. Une attention particulière doit être accordée à :

La commande pour mettre à jour npm vers la dernière version doit être exécutée avec précaution :
** style audacieux
**
Étant donné que la version de node correspond à la version de npm, si seule la version de npm est mise à jour vers la version la plus élevée, mais que la version de node n'est pas mise à jour, alors rendra le nœud inutilisable.
L'erreur qui se produit est illustrée dans la figure ci-dessous :
insérez la description de l'image ici

8. Et même si vous exécutez cmd directement en tant qu'administrateur dans le répertoire du projet, une erreur sera signalée

insérez la description de l'image ici
Le message d'erreur est illustré dans la figure ci-dessous :
insérez la description de l'image ici
Bien sûr, si une telle erreur se produit après l'exécution de cmd, nous devons également déterminer si le chemin dans la configuration du système informatique est configuré avec le chemin où se trouve le nœud ou si le chemin est configuré correctement. (Remarque : Écrivez d'abord un point-virgule, puis chargez le chemin configuré jusqu'à la fin de la configuration du chemin)

insérez la description de l'image ici

9. Supprimez le fichier package-lock.json

Si vous rencontrez la situation illustrée dans la figure ci-dessous, nous pouvons d'abord supprimer le fichier package-lock.json du projet, puis relancer l'installation pour télécharger les packages et fichiers dépendants associés. Une fois l'affichage réussi, exécutez npm run dev ou npm run serve pour voir Vérifiez si le prochain projet peut démarrer normalement.

Comme le montre la figure ci-dessous, le projet peut enfin démarrer avec succès.
insérez la description de l'image ici
Remarque :
La commande de démarrage après le retéléchargement du nœud
insérez la description de l'image ici
Si vous souhaitez utiliser une commande simple pour appeler le programme de démarrage lorsque vous démarrez le projet quotidiennement, vous devez effectuer les configurations appropriées dans le fichier à l'avance.

10. Configuration (personnalisée) Commencez à utiliser la commande

La commande de démarrage consiste à rechercher le fichier package.json après avoir ouvert le projet avec le code visuel et à le configurer dans ce fichier. La
configuration générale par défaut est illustrée dans la figure ci-dessous :
insérez la description de l'image ici
La méthode de configuration est illustrée dans la figure ci-dessous :
insérez la description de l'image ici
Après avoir personnalisé le configuration, comme indiqué ci-dessus, lorsque nous démarrons le projet Vous pouvez entrer directement npm run dev pour appeler la commande de démarrage.
Cela nous permet de démarrer le projet sans entrer de commandes compliquées à chaque fois que nous l'utilisons dans notre vie quotidienne.

11. Démarrer le projet

Trouver le répertoire où se trouve le code frontal du projet
insérez la description de l'image ici

12. Démarrez le projet et exécutez la commande : npm run server

Comme le montre la figure ci-dessous, le projet a été démarré avec succès ~~~
insérez la description de l'image ici

3. Résumé

Astuce : Voici un résumé de l'article :
Re-téléchargez l'outil de nœud :

Exécutez les commandes suivantes après l'installation :
1. nvm install v12.16.0

2. Liste nvm. Afficher la version actuelle du nœud

3. Il s'agit d'un outil de gestion de version de nœud

4. Vous téléchargez quelques versions supplémentaires, puis utilisez des commandes pour basculer entre elles.

5、nvm utiliser v12.16.0

6. Si l'erreur suivante se produit lors de l'exécution de la commande de démarrage lors du démarrage d'un nouveau projet :
'vue-cli-service' n'est pas reconnu comme une commande interne ou externe, la
solution à ce problème est la suivante :

1. Méthode 1 : exécutez la commande npm cache clean --force && npm install directement dans le répertoire racine du projet.

2. Méthode 2 : Supprimez le dossier node_modules, puis exécutez la commande npm install.

Je suppose que tu aimes

Origine blog.csdn.net/YHLSunshine/article/details/129218377
conseillé
Classement