Tutoriel super détaillé sur la création d'un environnement de développement Vue sur VS Code

Ce tutoriel ultra-détaillé sur la construction d'un environnement de développement vue sur Visual Studio Code vous apprendra étape par étape !

Tout d'abord, il existe plusieurs étapes pour créer un environnement de développement vue sur Visual Studio Code :

1. Téléchargez et installez node.js

2. Installez npm

3. Installez cnpm

4. Installer un échafaudage vue/cli

5. Créer un projet vue

 6. Exécutez le projet vue

 1. Téléchargez et installez node.js

Adresse : téléchargement du site officiel de node.js

Ouvrez Visual Studio Code et ouvrez le terminal comme indiqué ci-dessous :

Entrez la ligne de commande suivante dans le terminal

Vérifiez si node.js est installé avec succès

node -v

2. Installez npm

Vérifiez si npm est installé avec succès

npm -v

 

Remarque : Étant donné que le package npm est disponible sur node.js, il n'est pas nécessaire de le télécharger ici.

3. Installez cnpm

Installer cnpm en utilisant la ligne de commande

npm install -g cnpm --registry=https://registry.npmmirror.com

 Remarque : Il peut y avoir des problèmes ici. PowerShell est utilisé pour contrôler les conditions de chargement des fichiers de configuration et d'exécution des scripts. Afin d'empêcher l'exécution de scripts malveillants, vous pouvez rencontrer des problèmes qui ne peuvent pas exécuter de scripts ;

Solution : il peut être résolu en modifiant la politique d'exécution de PowerShell ;

Étapes : appuyez sur la touche Win pour rechercher Power Shell et l'exécuter en tant qu'administrateur, entrez le code suivant Entrez dans la zone de saisie et tapez Y pour modifier la stratégie d'exécution ;

étapes détaillées :

(1) Cliquez avec le bouton droit sur Démarrer et sélectionnez Administrateur Windows PowerShell.

(2) Entrez le code suivant et tapez Y pour modifier la stratégie d'exécution ;

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine

 Vérifiez si la modification a réussi

 Get-ExecutionPolicy -List

 Si les mots suivants apparaissent, la modification de la stratégie d'exécution a réussi

 

 

 ~~~ Installez cnpm en utilisant la ligne de commande ~~~

npm install -g cnpm --registry=https://registry.npmmirror.com

Vérifiez si cnpm est installé avec succès

cnpm -v

 4. Installer un échafaudage vue/cli

Entrez l'instruction suivante sur le panneau de bornes pour exécuter

cnpm install -g @vue/cli

Effet: 

 

 

Entrez ensuite la déclaration suivante pour vérifier si l'échafaudage est installé avec succès ;

vue -V

5. Créer un projet vue

vue create vue-01

 Appuyez sur Entrée en continu pour créer un projet, et vous pouvez également appuyer sur les touches haut et bas du clavier pour configurer le projet.

 Remarque : vue-01 est le nom du projet.

6. Exécutez le projet vue

 saisir le projet

cd vue-01

 exécuter le projet

npm run serve

 Lorsque le style illustré dans la figure apparaît sur le terminal, cela signifie que le projet s'exécute avec succès ;

 

 À ce stade, maintenez la touche Ctrl du clavier enfoncée avec le bouton gauche de la souris pour ouvrir le projet dans le navigateur ;