Le processus détaillé de création d'un projet vue avec webstorm pour les débutants

Le contenu de cet article concerne le processus détaillé de création d'un projet Vue avec webstorm pour les novices. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Cet article s'adresse uniquement aux novices.

Tout d’abord, vous devez comprendre quelques termes (concepts).

Node.js :

Node.js est un environnement d'exécution JavaScript basé sur le moteur Chrome V8.
Node.js utilise un modèle d'E/S non bloquant et piloté par les événements, ce qui le rend léger et efficace.

Le gestionnaire de packages de Node.js, npm, est le plus grand écosystème de bibliothèques open source au monde.

npm :

npm signifie Node Package Manager. Il s'agit d'un gestionnaire de packages basé sur Node.js. C'est également le gestionnaire de packages le plus populaire de toute la communauté Node.js et prend en charge le gestionnaire de packages. la plupart des modules tiers (similaire à Maven en Java).

L'intention initiale de npm : faciliter le partage et la réutilisation du code pour les développeurs JavaScript.

Scénarios d'utilisation de npm :

• Autoriser les utilisateurs à obtenir des packages tiers et à les utiliser.

• Permet aux utilisateurs de publier et de partager leurs propres packages ou programmes en ligne de commande.

Requête de version npm : npm -v

Webpack

WebPack peut être considéré comme un packager de modules : ce qu'il fait, c'est analyser la structure de votre projet, recherchez des modules JavaScript et d'autres langages d'extension que les navigateurs ne peuvent pas exécuter directement (Scss, TypeScript, etc.), puis convertissez-les et emballez-les dans un format approprié pour une utilisation par le navigateur.

Entrons dans le vif du sujet

Tout d'abord, maintenant webstorm, node.js

Faites attention à la version du nœud Seuls les nœuds prenant en charge le mode harmonie prendront en charge es6. Créez le nom du projet basé sur le webpack. Ce n'est qu'alors qu'aucune erreur ne sera signalée. La dernière version est recommandée.

1. Après avoir téléchargé le package d'installation, cliquez simplement pour installer. L'interface pour une installation de test réussie est la suivante :

2. Installez l'image Taobao (similaire à l'image de l'entrepôt central maven d'Alibaba Cloud)

Le temps d'installation est un peu long

Commande d'installation : npm install -g cnpm --registry=https://registry.npm.taobao.org

Commande de vérification : cnpm -v

3. Installez webpack

Utilisez npm pour installer webpack L'instruction de ligne de commande est npm install webpack -g. Cela prend un peu plus de temps. L'interface pour une installation de test réussie est la suivante :

4. L'étape suivante consiste à installer vue-cli globalement. Cela prend un peu plus de temps

L'instruction d'installation est : npm install --global vue-cli

Commande de vérification : vue -V (V doit être en majuscule)

5. Commençons par utiliser WebStorm

Un point important est que si vous souhaitez utiliser WebStorm pour créer un projet, vous devez installer git. L'installation est très simple, il suffit de le télécharger et de l'installer depuis le site officiel, sinon il risque de ne pas être installé

Le rouge est la nouvelle commande, le vert est l'adresse node.js (cela prendra un certain temps après l'installation) Recherche automatique), le bleu est l'adresse du package vue.js, le jaune est le module d'emballage utilisé pour l'emballage

Remplissez le nom du projet, notez que le nom du projet ne peut pas contenir de majuscules.

Continuez simplement à cliquer sur Suivant, structure du projet

Sélectionnez package.json, faites un clic droit et sélectionnez afficher les scripts npm

Sélectionnez dev et double-cliquez pour tester. Après une ouverture réussie, le port par défaut apparaîtra. Aimez la publication et ouvrez-la dans le navigateur. Si la page suivante apparaît, c'est réussi. Un tel projet vue est créé avec succès

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!