vscode peut-il utiliser uni-app ?

vscode peut utiliser uni-app, la méthode spécifique : 1. Installez le plug-in d'invite de syntaxe vue vetur ; 2. Exécutez la commande "npm i @dcloudio/uni-helper-json" pour installer l'invite de syntaxe du composant 3 ; . Téléchargez et importez HBuilderX Le code uni-app suffit.

L'environnement d'exploitation de ce tutoriel : système Windows 7, Visual Studio Code version 1.45.1.0, ordinateur DELL G3.

uni-app est un framework qui utilise la syntaxe vue pour développer de petits programmes, des applications et H5. L'outil de développement officiellement recommandé est HBuilderX, qui offre une bonne expérience de développement.

Cependant, comme HBuilderX n'a ​​pas de version Linux et que de nombreux frontaux ont déjà été habitués au vscode, ils ne veulent pas changer d'éditeur. En utilisant directement vscode pour développer uni-app, l'expérience n'est pas très bonne.

En fait, uni-app et vscode peuvent aussi bien aller ensemble. Ensuite, je vais vous montrer la posture d'ouverture correcte d'uni-app dans vscode.

Projet CLI

Installez vue-cli 3.x globalement (ignorez cette étape si déjà installé)

npm install -g @vue/cli

Créez un projet uni-app via CLI

vue create -p dcloudio/uni-preset-vue my-project

À ce stade, vous serez invité à sélectionner un modèle de projet, pour une première expérience, il est recommandé de choisir le modèle de projet hello uni-app, comme indiqué ci-dessous : hello uni-app 项目模板，如下所示：

在vscode中打开项目

安装vue语法提示插件vetur

CLI 工程默认带了uni-app语法提示和5+App语法提示

安装组件语法提示

组件语法提示是uni-app的亮点，其他框架很少能提供。

npm i @dcloudio/uni-helper-json

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM%

Ouvrez le projet dans vscodeInstallez le plug-in d'invite de syntaxe vue vetur< img src="https://img.php.cn/ upload/image/992/113/845/1632906313589880.png" title="1632906313589880.png" alt="vscode peut-il utiliser uni-app ?"/>Installer des conseils sur la syntaxe des composantsLes conseils sur la syntaxe des composants sont le point culminant d'uni-app, que peu d'autres frameworks peuvent fournir.

npm init -y

Importer HBuilderX Le bloc de code intégréExécuter le projet

npm i @types/uni-app @types/html5plus -D

rrreee

Le projet CLI est livré avec Invites de syntaxe Uni-App et invites de syntaxe 5+App par défaut
	Téléchargez le bloc de code uni-app depuis github et mettez il dans le répertoire .vscode du répertoire du projet peut avoir les mêmes blocs de code que HBuilderX.
< img src="https://img.php.cn/upload/image/257/712/547/163290636112771vscode peut-il utiliser uni-app ?" title="163290636112771vscode peut-il utiliser uni-app ?" alt="vscode peut-il utiliser uni-app ?"/>
Publier le projet	%PLATFORM% Les valeurs possibles sont les suivantes :

🎜value🎜🎜Platform🎜🎜🎜🎜🎜🎜h5🎜🎜H5🎜🎜🎜🎜mp-alipay 🎜 Mini programme Alipay 🎜mp-qq🎜🎜 applet qq🎜🎜 🎜 🎜

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装

初始化npm（如已初始化跳过此步骤）

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件，vscode一样可以使用。

• 如果这些插件有npm使用方式（如uni-ui），可以用npm
• 如果作者没提供npm方式，那么下载zip包解压也是可以用的

【相关推荐：《uniapp教程》、《vscode教程》】

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!