Maison > outils de développement > VSCode > Comment vscode construit un projet vue

Comment vscode construit un projet vue

王林
Libérer: 2019-12-16 16:54:20
original
16433 Les gens l'ont consulté

Comment vscode construit un projet vue

1. Installez Vscode, nodejs, etc.

2. Installer vue-cli globalement. vue-cli peut nous aider à créer rapidement des projets Vue.

Commande d'installation :

npm install -g vue-cli
Copier après la connexion

Ouvrez le terminal VScode et affichez la zone de saisie de la commande. Cliquez sur Terminal-Nouveau terminal, entrez la commande ci-dessus, appuyez sur Entrée et attendez la fin de l'installation.

Comment vscode construit un projet vue

3. Installez webpack, qui est un outil pour empaqueter js

Commande d'installation :

npm install -g webpack
Copier après la connexion

La méthode d'installation est la même que au-dessus de.

4. Une fois l'installation terminée, vous pouvez commencer à créer le projet vue. Créez d'abord un dossier pour stocker votre projet, ouvrez le dossier correspondant avec vscode et cd dans le dossier correspondant dans le terminal. Par exemple, mon dossier est myvue

Commande de création de projet, saisissez :

vue init webpack myvue
Copier après la connexion

où myvue est le nom du projet, choisissez-le selon vos préférences.

Comment vscode construit un projet vue

Ensuite, certains éléments de configuration apparaîtront, qui peuvent être configurés selon les besoins, ou ils peuvent être définis par défaut et appuyer simplement sur Entrée.

Comment vscode construit un projet vue

Continuez ensuite à attendre que les dépendances soient installées. Une fois terminé, un projet vue de base sera construit. Une fois terminé, vous pouvez voir le répertoire suivant sur le côté gauche de vscode, dont main.js est l'entrée.

Comment vscode construit un projet vue

5. Ensuite, exécutez le projet, d'abord cd dans le dossier du projet, cd myvue, puis entrez la commande suivante

npm run dev
Copier après la connexion

Comment vscode construit un projet vue

Après succès, saisissez :http://localhost:8080 dans le navigateur. Lorsque vous voyez l'écran suivant, c'est réussi.

Comment vscode construit un projet vue

6. Packaging du projet et mise en ligne

Entrez la commande :

npm run build
Copier après la connexion

Une fois terminé, un dossier dist apparaîtra dans le projet. dossier , qui contient le contenu packagé et peut être déployé directement.

Articles et tutoriels connexes recommandés : tutoriel vscode

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal