Explication détaillée des cas d'utilisation de vue dans webstorm

Cette fois, je vais vous apporter une explication détaillée des cas d'utilisation de vue dans webstorm. Quelles sont les précautions lors de l'utilisation de vue dans webstorm. Voici des cas pratiques, jetons un coup d'œil.

Prémisse

La documentation officielle de Vue recommande aux novices de ne pas utiliser vue-cli en premier, mais d'introduire directement vue d'une manière similaire à JQuery pour apprendre. Comme j'ai déjà traité du cli d'Angular auparavant, je vais commencer directement par le cli.

Supposons que nous ayons déjà installé le nœud et npm.

Installez vue-cli globalement

Exécutez la commande dans le terminal :

npm install --global vue-cli

Installez vue-cli globalement. Utilisez ensuite vue-cli pour créer notre projet :

vue init webpack my-project

De cette façon, nous aurons un projet complet, et il y aura un exemple de composant dedans, exécutez :

npm run dev

puis vous pouvez voir l'état d'exécution du projet en visitant http://localhost:8081/ dans le navigateur.

Essayer avec webstorm

Quand j'ai ouvert le projet vue dans webstorm, j'avais presque envie d'abandonner vue, je ne supportais vraiment pas de le regarder, mais je dois quand même poursuivre mon esprit d'exploration constant. Si vous rencontrez un problème, résolvez-le !

Fichiers de type .vue

Nous devons d'abord commencer par le type de fichier. Dans la version actuelle, il n'y a pas de type de fichier .vue, il ne peut donc pas être reconnu. . Il ne peut pas être mis en évidence, et même s'il est reconnu, ce sera compliqué. Après vérification, certains ont dit qu'il serait préférable d'ajouter *.vue au type de fichier, mais si je l'ajoutais, cela deviendrait encore plus déroutant.

Après une longue recherche sur Google, j'ai trouvé cet article, qui provient du site officiel de webstorm https://www.jetbrains.com/help/webstorm/vue-js .html. Webstorm prend déjà en charge Vue, mais je ne trouve pas du tout cette option dans mon webstorm local. Pourquoi ?

Après avoir recherché, j'ai découvert que la version de webstorm est la version 2018 et que mon webstorm est la 2017.2. Je dois donc mettre à jour vers la dernière version.

Oui, sauvegardez les paramètres du Webstorm, puis téléchargez la dernière version du Webstorm et la mise à jour. Au fait, j'ai trouvé un code d'activation : http://hb5.s.osidea.cc:1017 (il fait chaud et peut être utilisé pour des tests personnels).

Effectivement, après l'installation, j'ai trouvé la marque vue, et effectivement la nouvelle version la prend en charge.

Mais j'ai constaté que le fichier .vue n'a toujours pas de surbrillance. Il semble que je doive encore ajouter le support des fichiers (je ne sais pas si je l'ai supprimé lors de l'opération précédente) :

préférences > types de fichiers

Déroulez-le Sélectionnez les modèles vue.js, cliquez puis cliquez sur le signe plus dans les modèles enregistrés ci-dessous, puis entrez *.vue, puis cliquez sur OK, cliquez sur Appliquer, et vous pourrez alors voir une barre de progression sous webstorm, allez-y. Une fois plein, la mise en surbrillance du .vue sera normale.

valeur par défaut d'exportation inutilisée

Il y a une valeur par défaut d'exportation dans le js dans le composant vue Il y a un rappel gris ci-dessus Lorsque vous déplacez la souris vers le haut, vous le ferez. recherchez l'invite d'exportation inutilisée par défaut. En effet, il n'y a pas d'utilisation spécifique de cette exportation, il s'agit d'une indication de syntaxe pour JavaScript. Nous pouvons le configurer dans la configuration d'inspection configurer de l'EDI.

Le moyen le plus rapide est de cliquer sur la petite tête dans le coin inférieur droit 》configurer l'inspection. Dans l'interface contextuelle, sélectionnez : JavaScript 》 Général. Option de suppression : symbole global inutilisé. Cliquez ensuite sur OK et vous pouvez voir que le rappel gris disparaît.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes JS pour obtenir les paramètres d'URL et envoyer le format JSON POST

Page d'actualisation JS résumé de la méthode

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!