Maison interface Web Voir.js Comment résoudre le problème de l'absence d'invite de code dans Vue3

Comment résoudre le problème de l'absence d'invite de code dans Vue3

May 14, 2023 pm 07:07 PM
vue3

Tout d'abord, nous avons indiqué très clairement qu'après l'installation du plug-in volar, la complétion des fragments de balises HTML n'est plus disponible, c'est-à-dire que lors de l'écriture des balises HTML dans le modèle, il n'y aura plus de complétion de code, c'est-à-dire c'est-à-dire, saisissez "div", qui est "div" , au lieu de "

". Afin de résoudre ce problème, nous devons effectuer quelques configurations sur Vscode sans supprimer le plug-in volar.

Comment résoudre le problème de labsence dinvite de code dans Vue3

Ouvrez les paramètres et entrez dans l'interface suivante :

Comment résoudre le problème de labsence dinvite de code dans Vue3

Sélectionnez l'éditeur de texte-> Texte->, cliquez sur le premier à droite, ajoutez un élément, saisissez : "*.vue", valeur Entrez : "html", cliquez sur Enregistrer et revenez au fichier vue. Si vous entrez une balise HTML, vous constaterez que le code peut être automatiquement complété et qu'il se ferme automatiquement.

Mais certains problèmes sont également survenus en ce moment. Je ne sais pas si vous y avez été exposé. Sinon, vous pouvez les ignorer.

Premièrement : l'extrait de code personnalisé n'est pas valide. Lorsque nous créons habituellement un nouveau composant Vue3, nous devons initialiser le modèle

  <template>
 
</template>
 
<script setup lang=&#39;ts&#39;>
import {ref,reactive} from &#39;vue&#39;
 
</script>
 
<style lang=&#39;less&#39; scoped> 
 
</style>
Copier après la connexion

Bien que le code soit très simple, il est assez fastidieux à écrire à chaque fois qu'un nouveau composant est créé, Nous allons donc créer des extraits de code personnalisés. Dans l'extrait de code utilisateur, cliquez sur vue.json pour créer votre propre extrait de code

Comment résoudre le problème de labsence dinvite de code dans Vue3

Comment créer votre propre extrait de code ne sera pas expliqué en détail ici. tutoriels associés, et c'est très simple.

Une fois l'extrait de code créé, il vous suffit de saisir des mots-clés pour créer l'extrait complet, ce qui est très pratique.

Mais après la configuration ci-dessus, mon extrait de code a échoué. Une solution pour le moment consiste à créer mon propre extrait de code global.

Comment résoudre le problème de labsence dinvite de code dans Vue3

Cliquez sur "Nouveau fichier d'extrait de code global", puis entrez le nom du fichier, puis vous pourrez personnaliser l'extrait de code de la même manière que vous définissez l'extrait de code dans un fichier .json existant.

Une fois la configuration terminée, créez un nouveau fichier .vue, entrez le mot d'invite de code personnalisé, par exemple, le mien est vue3, appuyez sur Entrée et l'extrait de code sera généré.

Comment résoudre le problème de labsence dinvite de code dans Vue3

Comment résoudre le problème de labsence dinvite de code dans Vue3

Le deuxième problème est qu'après la configuration supérieure, les icônes des fichiers .vue ont été remplacées par les icônes des fichiers HTML. Ne paniquez pas si cela ne vous dérange pas. En fait, vous pouvez l'ignorer, mais afin de le distinguer, il est recommandé de télécharger un nouveau plug-in d'icône

Comment résoudre le problème de labsence dinvite de code dans Vue3

Parce que j'ai déjà installé le plug-in scode-icon, l'icône changera après la configuration est terminé. À ce stade, nous pouvons en réinstaller un, par exemple, j'ai installé vue Theme

Comment résoudre le problème de labsence dinvite de code dans Vue3

Comment résoudre le problème de labsence dinvite de code dans Vue3

.

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

vue3+vite : Comment résoudre l'erreur lors de l'utilisation de require pour importer dynamiquement des images dans src vue3+vite : Comment résoudre l'erreur lors de l'utilisation de require pour importer dynamiquement des images dans src May 21, 2023 pm 03:16 PM

vue3+vite:src utilise require pour importer dynamiquement des images et des rapports d'erreurs et des solutions. vue3+vite importe dynamiquement plusieurs images. Si vue3 est développé à l'aide de TypeScript, il y aura un message d'erreur indiquant que requireisnotdefined ne peut pas être utilisé comme imgUrl. :require(' .../assets/test.png') est importé car TypeScript ne prend pas en charge require, donc l'importation est utilisée. Voici comment le résoudre : utilisez waitimport.

Comment utiliser tinymce dans le projet vue3 Comment utiliser tinymce dans le projet vue3 May 19, 2023 pm 08:40 PM

tinymce est un plug-in d'éditeur de texte riche entièrement fonctionnel, mais l'introduction de tinymce dans vue n'est pas aussi fluide que les autres plug-ins de texte riche de Vue. tinymce lui-même ne convient pas à Vue, et @tinymce/tinymce-vue doit être introduit, et Il s'agit d'un plug-in de texte riche étranger et n'a pas passé la version chinoise. Vous devez télécharger le package de traduction depuis son site officiel (vous devrez peut-être contourner le pare-feu). 1. Installez les dépendances associées npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Téléchargez le package chinois 3. Introduisez le skin et le package chinois Créez un nouveau dossier tinymce dans le dossier public du projet et téléchargez le.

Comment Vue3 analyse le démarque et implémente la mise en évidence du code Comment Vue3 analyse le démarque et implémente la mise en évidence du code May 20, 2023 pm 04:16 PM

Pour implémenter le front-end du blog avec Vue, vous devez implémenter l'analyse markdown. S'il y a du code, vous devez implémenter la mise en évidence du code. Il existe de nombreuses bibliothèques d'analyse de démarques pour Vue, telles que markdown-it, vue-markdown-loader, Markdown, vue-markdown, etc. Ces bibliothèques sont toutes très similaires. Marked est utilisé ici et highlight.js est utilisé comme bibliothèque de mise en évidence du code. Les étapes d'implémentation spécifiques sont les suivantes : 1. Installez les bibliothèques dépendantes. Ouvrez la fenêtre de commande sous le projet vue et entrez la commande suivante npminstallmarked-save//marked pour convertir le markdown en htmlnpmins.

Comment actualiser le contenu partiel de la page dans Vue3 Comment actualiser le contenu partiel de la page dans Vue3 May 26, 2023 pm 05:31 PM

Pour réaliser un rafraîchissement partiel de la page, il suffit d'implémenter le re-rendu du composant local (dom). Dans Vue, le moyen le plus simple d'obtenir cet effet est d'utiliser la directive v-if. Dans Vue2, en plus d'utiliser l'instruction v-if pour restituer le dom local, nous pouvons également créer un nouveau composant vierge. Lorsque nous devons actualiser la page locale, accéder à cette page de composant vierge, puis y revenir. la garde beforeRouteEnter dans la page d’origine vierge. Comme le montre la figure ci-dessous, comment cliquer sur le bouton d'actualisation dans Vue3.X pour recharger le DOM dans la zone rouge et afficher l'état de chargement correspondant. Puisque la garde dans le composant dans la syntaxe scriptsetup dans Vue3.X n'a ​​que o

Comment résoudre le problème selon lequel une fois le projet vue3 empaqueté et publié sur le serveur, la page d'accès s'affiche vide Comment résoudre le problème selon lequel une fois le projet vue3 empaqueté et publié sur le serveur, la page d'accès s'affiche vide May 17, 2023 am 08:19 AM

Une fois le projet vue3 empaqueté et publié sur le serveur, la page d'accès affiche un 1 vide. Le publicPath dans le fichier vue.config.js est traité comme suit : const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

Comment utiliser les composants réutilisables Vue3 Comment utiliser les composants réutilisables Vue3 May 20, 2023 pm 07:25 PM

Préface Que ce soit vue ou réagir, lorsque nous rencontrons plusieurs codes répétés, nous réfléchirons à comment réutiliser ces codes, au lieu de remplir un fichier avec un tas de codes redondants. En fait, Vue et React peuvent être réutilisés en extrayant des composants, mais si vous rencontrez quelques petits fragments de code et que vous ne souhaitez pas extraire un autre fichier, en comparaison, React peut être utilisé dans le même Déclarez le widget correspondant dans le fichier. , ou implémentez-le via la fonction de rendu, telle que : constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Comment sélectionner un avatar et le recadrer dans Vue3 Comment sélectionner un avatar et le recadrer dans Vue3 May 29, 2023 am 10:22 AM

L'effet final est d'installer le composant VueCropper filaddvue-cropper@next. La valeur d'installation ci-dessus est pour Vue3 ou si vous souhaitez utiliser d'autres méthodes de référence, veuillez visiter son adresse officielle npm : tutoriel officiel. Il est également très simple de le référencer et de l'utiliser dans un composant. Il suffit d'introduire le composant correspondant et son fichier de style. Je ne le référence pas globalement ici, mais j'introduis uniquement import{userInfoByRequest}from'../js/api. ' dans mon fichier de composant import{VueCropper}from'vue-cropper&.

Comment utiliser vue3+ts+axios+pinia pour obtenir un rafraîchissement insensé Comment utiliser vue3+ts+axios+pinia pour obtenir un rafraîchissement insensé May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia réalise un rafraîchissement insensé 1. Téléchargez d'abord aiXos et pinianpmipinia dans le projet--savenpminstallaxios--save2 Encapsuler la requête axios-----Télécharger js-cookienpmiJS-cookie-s//Introduire aixosimporttype{AxiosRequestConfig , AxiosResponse}de"axios";importaxiosfrom'axios';import{ElMess

See all articles