Table des matières
初始化项目
tsconfig.json报错问题
增强pages.json和manifest.json开发体验
json文件写注释
Projet d'initialisation
Problème de rapport d'erreurs tsconfig.json
Expérience de développement pages.json et manifest.json améliorée
Écrire des commentaires sur les fichiers json
语法提示
颜色块显示
一键创建页面、组件、分包
条件编译注释高亮
API,组件,uni.scss语法提示
API语法提示
组件提示
uni.scss变量提示
运行、发布项目
使用 vue3 创建工程
DCloud插件市场的使用
插件推荐
结语
Maison outils de développement VSCode Comment développer uni-app en VSCode ? (Partage du tutoriel)

Comment développer uni-app en VSCode ? (Partage du tutoriel)

May 13, 2022 pm 08:11 PM
vscode uni-app

Comment développer uni-app en VSCode ? L'article suivant partagera avec vous un tutoriel sur le développement d'uni-app dans VSCode. C'est peut-être le tutoriel le meilleur et le plus détaillé. Venez jeter un oeil !

Comment développer uni-app en VSCode ? (Partage du tutoriel)

Nous utiliserons VSCode pour écrire uni-app. Différent de Hbuilder X, l'utilisation de VSCode crée des projets via un échafaudage. Pourquoi devrais-je utiliser VSCode pour l'écrire ? Peut-être que je ne suis pas encore habitué à Hbuilder. Je n’entrerai pas dans les détails ici. [Apprentissage recommandé : "tutoriel d'introduction au vscodeuni-app,不同于Hbuilder X,用VSCode是通过脚手架来创建项目,为什么我要用VSCode写呢?可能还是不太习惯Hbuilder X等等原因,还有就是不想换开发工具,觉得开发前端一个VSCode就够了,也不用去比较两者谁好谁坏,自己喜欢哪个用哪个,这里就不过多赘述了。【推荐学习:《vscode入门教程》】

自己也用VSCode做了几个uni-app项目了,主要是写小程序,总体体验下来还是非常不错的。

Comment développer uni-app en VSCode ? (Partage du tutoriel)

简述一下这个教程能给VSCode开发 uni-app带来的体验

  • 增强pages.jsonmanifest.json开发体验(语法提示、颜色块、写注释)
  • 一键创建页面、组件、分包
  • 完善的API,组件,uni.scss语法提示
  • 条件编译注释高亮

可以说,VSCode开发uni-app的槽点基本上都解决了,有很多地方我觉得体验还更好。

文章比较长,写的也比较详细,小白也能看懂。

初始化项目

我们使用 vue2 创建工程作为示例,uni-app中Vue2版的组件库和插件也比较多,稳定、问题少,可以先参考下官方文档:工程化

既然是使用vue脚手架,那肯定要全局安装@vue/cli,已安装的可以跳过。

注意:Vue2创建的项目,脚手架版本要用@4的版本,用@5的版本运行项目会报错,这里推荐 @4.5.15

npm install -g @vue/cli

创建项目,后面是你的项目名字。

vue create -p dcloudio/uni-preset-vue uni_vue2_cli

这里我们选择默认模板

Comment développer uni-app en VSCode ? (Partage du tutoriel)

在VSCode打开这个项目,可以看看整个项目项目结构,src下项目结构跟HbuilderX创建的根目录基本一样,说明两种项目转换还是比较方便的。

提示:既然是Vue2项目,有scss文件,那肯定要装vetursass这两个插件吧,不会有人还没有装吧。

Comment développer uni-app en VSCode ? (Partage du tutoriel)

tsconfig.json报错问题

Comment développer uni-app en VSCode ? (Partage du tutoriel)

创建tsconfig.json配置文件时,VSCode会自动检测当前项目当中是否有ts文件,若没有则报错,提示用户需要创建一个ts文件后,再去使用typescript。其实即使报红,但运行项目是没有问题的,但有强迫症的人肯定受不了,不可能一直看着报错吧。

解决方案很简单,就是在项目根目录下,随便建一个ts文件,不用写任何东西,然后在tsconfig.json配置 files 这个就好了。

我们在项目根目录下新建一个puppet.ts,puppet:傀儡的意思,哈哈,这里名字可以自己随便起。

Comment développer uni-app en VSCode ? (Partage du tutoriel)

tsconfig.json

{
  "compilerOptions": {
    "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]
  },
  "files": ["puppet.ts"]
}

增强pages.json和manifest.json开发体验

json文件写注释

我们打开pages.jsonmanifest.json,发现会报红,这是因为在json中是不能写注释的,而在jsonc是可以写注释的。

Comment développer uni-app en VSCode ? (Partage du tutoriel)

解决方案:我们把pages.jsonmanifest.json这两个文件关联到jsonc中,然后就以写注释了。在设置中打开settings.json"]

J'utilise également VSCode J'ai réalisé plusieurs projets uni-app, principalement en écrivant de petits programmes, et l'expérience globale est très bonne. Comment développer uni-app en VSCode ? (Partage du tutoriel)

Comment développer uni-app en VSCode ? (Partage du tutoriel)🎜🎜< strong> Décrivez brièvement l'expérience que ce tutoriel peut apporter au développement VSCode uni-app🎜
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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

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.

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

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)

Sujets chauds

Tutoriel PHP
1535
276
Comment modifier le terminal par défaut dans les paramètres VScode? Comment modifier le terminal par défaut dans les paramètres VScode? Jul 05, 2025 am 12:35 AM

Il existe trois façons de modifier le terminal par défaut dans VSCODE: Définition via une interface graphique, modification des paramètres.json et commutation temporaire. Tout d'abord, ouvrez l'interface des paramètres et recherchez "TerminalAntegratedShell" et sélectionnez le chemin du terminal du système correspondant; Deuxièmement, les utilisateurs avancés peuvent modifier les paramètres.json pour ajouter "terminal.integrated.shell.windows" ou "terminal.integrated.shell.osx" champs et échapper correctement au chemin; Enfin, vous pouvez saisir "Terminal: Sélectionner dans le panneau de commande

Correction de 'chronométré en attendant que le débogueur s'attache' dans VSCODE Correction de 'chronométré en attendant que le débogueur s'attache' dans VSCODE Jul 08, 2025 am 01:26 AM

Lorsque le problème "Timedoutwaitingforthedebuggertoattach" se produit, c'est généralement parce que la connexion n'est pas établie correctement dans le processus de débogage. 1. Vérifiez si la configuration Launch.json est correcte, assurez-vous que le type de demande est lancé ou attaché et qu'il n'y a pas d'erreur d'orthographe; 2. Confirmez si le débogueur attend que le débogueur se connecte et ajoute debugpy.wait_for_attach () et d'autres mécanismes; 3. Vérifiez si le port est occupé ou restreint du pare-feu, et remplacez le port ou fermez le processus occupé si nécessaire; 4. Confirmez que les autorisations de mappage et d'accès du port sont correctement configurées dans un environnement à distance ou à conteneur; 5. Mettez à jour les versions VScode, Plug-In et Debug Library pour résoudre le potentiel

Comment définir des variables d'environnement pour le débogage dans les paramètres VScode? Comment définir des variables d'environnement pour le débogage dans les paramètres VScode? Jul 10, 2025 pm 01:14 PM

Pour définir les variables d'environnement de débogage dans VSCODE, vous devez utiliser la configuration du tableau "Environment" dans le fichier lancé.json. Les étapes spécifiques sont les suivantes: 1. Ajoutez un tableau "Environment" à la configuration de débogage de Launch.json, et définissez des variables dans les paires de valeurs clés, telles que API_ENDPOINT et DEBUG_MODE; 2. Vous pouvez charger des variables via des fichiers .env pour améliorer l'efficacité de la gestion et utiliser EnvFile pour spécifier les chemins de fichier dans lancers.json; 3. Si vous avez besoin de remplacer le système ou les variables terminales, vous pouvez les redéfinir directement dans Launch.json; 4. Notez que

Comment déboguer dans un conteneur Docker avec VScode? Comment déboguer dans un conteneur Docker avec VScode? Jul 10, 2025 pm 12:40 PM

La clé du débogage du code avec VScode dans les conteneurs Docker est de configurer l'environnement de développement et les méthodes de connexion. 1. Préparez un miroir avec des outils de développement, installez les dépendances nécessaires telles que Debugpy ou Node, et utilisez l'image officielle DevContainers pour simplifier la configuration; 2. Montez le code source et activez le plug-in à distance, créez des dossiers et des fichiers de configuration .DevContainer, et réalisez le développement dans les conteste; 3. Configurez le débogueur, ajoutez des paramètres de débogage pour la langue correspondante dans lancers.json et activez le port d'écoute dans le code; 4. Résoudre des problèmes communs, tels que l'exposition du port de débogage, garantissant que l'hôte est de 0,0,0,0 et utilisez la post-création

Comment définir des points d'arrêt conditionnels dans VSCODE? Comment définir des points d'arrêt conditionnels dans VSCODE? Jul 01, 2025 am 12:30 AM

Pour définir des points d'arrêt conditionnels, définissez d'abord les points d'arrêt normaux et modifiez leurs conditions; Utilisez des points de journal pour éviter de faire une pause des programmes; Faites attention à différentes différences de soutien dans différentes langues. Tout d'abord, cliquez sur le numéro de ligne dans VScode pour définir un point d'arrêt normal, ou appuyez sur F9; puis cliquez avec le bouton droit sur le point d'arrêt pour sélectionner "Modifier le point d'arrêt" ou "Ajouter une condition"; Entrez ensuite une expression de condition telle que i === 10 ou nom d'utilisateur === «TesUser»; Si vous avez besoin de produire des informations sans pause, vous pouvez convertir le point d'arrêt en point de journal et entrer un message tel que ValueOfx: {x}; Veuillez noter que différentes langues prennent en charge différentes conditions pour les points d'arrêt, et certains environnements peuvent avoir des restrictions d'accès variables et la complexité de l'expression affecte les performances de débogage.

VScode BreakPoint ne fonctionne pas VScode BreakPoint ne fonctionne pas Jul 10, 2025 am 11:35 AM

Les points d'arrêt ne prennent pas effet généralement par des erreurs de configuration de débogage ou de paramètres d'environnement. Tout d'abord, vous devez confirmer si le mode de débogage est démarré via les boutons F5 ou de débogage, plutôt que le fonctionnement normal; Deuxièmement, vérifiez si le type et la demande dans Launch.json sont correctement configurés, tels que Node.js doivent être "Type": "Node"; Assurez-vous ensuite que le code source correspond au fichier d'exécution, activez SourceMap et configurez correctement RuntimeArgs; Vous devez également dépanner des facteurs tels que les conflits d'extension, les problèmes de cartographie de chemin, que la position de point d'arrêt soit raisonnable, que le code soit compressé et optimisé, les restrictions du navigateur, etc.; Enfin, vous pouvez utiliser l'insertion de la déclaration de débogueur pour aider à déterminer le problème.

Comment configurer plus joli dans VSCODE? Comment configurer plus joli dans VSCODE? Jul 18, 2025 am 02:20 AM

Les étapes de configuration plus jolies incluent l'installation de plug-ins, la définition des outils de mise en forme par défaut, la création de fichiers de configuration, l'activation de la mise en forme automatique de l'enregistrement et d'autres précautions. Tout d'abord, installez le plug-in plus joli de VScode et définissez-le comme l'outil de formatage par défaut; Deuxièmement, créez le fichier .prettierrc dans le répertoire racine du projet pour définir les règles de format; Ensuite, activez "FormatOnSave" dans les paramètres VScode; Enfin, faites attention à l'installation plus joli locale, garantissant que le fichier de configuration est correct et le dépannage des problèmes d'interférence du plug-in.

Quelle est la différence entre VScode et Visual Studio Quelle est la différence entre VScode et Visual Studio Jul 30, 2025 am 02:38 AM

Vscodeisalightweight, cross-plateformcodeeditorwithide-likefeaturesViaExtensions, idéalforwebandopen-source-développement; 2.VisualStudioisafull, windows-onlyideatedEdForcomplex.net, c, et entendPriseApplications; 3.VscodePerformSfasteronlower-endma-endma

See all articles