Explication détaillée de l'utilisation de la syntaxe Vue dans Webstorm

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

Comme le dit le proverbe, si vous voulez attaquer le jade, vous devez d'abord affûter votre arme. J'utilise toujours Angular pour le développement au travail, mais progressivement, il y aura des affaires avec Vue, je dois donc apprendre Vue. J'ai commencé à jouer avec vue aujourd'hui. J'ai utilisé webstorm pour développer le front-end Après avoir créé un projet avec vue-cli, il était impossible de l'ouvrir avec webstorm. Il n'y avait pas de message d'erreur, mais beaucoup de divers . modifications L'appareil prévient, mais je n'ai d'autre choix que d'améliorer la prise en charge de vue par l'IDE.

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 installé node 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 j'ai supprimé lors de l'opération précédente) :

éditeur de préférences > >

Déroulez vers le bas pour sélectionner 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 pouvez voir qu'il y a un

progression sous webstorm Une fois la barre

pleine, 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 :

Partage de cas d'utilisation associé régulier avec JS

Explication détaillée de l'implémentation de la programmation asynchrone du nœud Async/Await

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!