Kann vscode Uni-App verwenden?

vscode kann Uni-App verwenden, die spezifische Methode: 1. Installieren Sie das Vue-Syntax-Eingabeaufforderungs-Plug-in 2. Führen Sie den Befehl „npm i @dcloudio/uni-helper-json“ aus, um die Komponentensyntax-Eingabeaufforderung zu installieren . Laden Sie HBuilderX herunter und importieren Sie es. Der Uni-App-Code reicht aus.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Visual Studio Code Version 1.45.1.0, DELL G3-Computer.

uni-app ist ein Framework, das die Vue-Syntax zum Entwickeln kleiner Programme, Apps und H5 verwendet. Das offiziell empfohlene Entwicklungstool ist HBuilderX, das eine gute Entwicklungserfahrung bietet.

Da HBuilderX jedoch keine Linux-Version hat und viele Frontends bereits an vscode gewöhnt waren, möchten sie den Editor nicht wechseln. Die direkte Verwendung von vscode zur Entwicklung einer Uni-App ist nicht sehr gut.

Tatsächlich können Uni-App und vscode auch gut zusammenpassen. Als nächstes zeige ich Ihnen die korrekte Öffnungshaltung von uni-app in vscode.

CLI-Projekt

Vue-cli 3.x global installieren (überspringen Sie diesen Schritt, wenn bereits installiert)

npm install -g @vue/cli

Uni-App-Projekt über CLI erstellen

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

Zu diesem Zeitpunkt werden Sie aufgefordert, ein auszuwählen Projektvorlage. Für erste Erfahrungen wird empfohlen, die Projektvorlage hello uni-app auszuwählen, wie unten gezeigt: 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%

Öffnen Sie das Projekt in vscodeInstallieren Sie das Vue-Syntax-Prompt-Plug-in veturTipps zur Komponentensyntax installierenHinweise zur Komponentensyntax sind das Highlight von Uni-App, das nur wenige andere Frameworks bieten können.

npm init -y

HBuilderX importieren Der integrierte CodeblockFühren Sie das Projekt aus

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

CLI-Projekt ist im Lieferumfang enthalten Uni-App-Syntax-Eingabeaufforderungen und 5+App-Syntax-Eingabeaufforderungen standardmäßig
	Laden Sie Uni-App-Codeblock von Github herunter und stellen Sie ihn ein Es befindet sich im Verzeichnis .vscode im Projektverzeichnis und kann dieselben Codeblöcke wie HBuilderX enthalten.
Veröffentlichen Das Projekt: zahlen	Alipay-Miniprogramm

mp-baidu🎜🎜Baidu-Applet🎜🎜🎜🎜mp-weixin🎜🎜WeChat-Applet🎜🎜🎜🎜mp-toutiao🎜🎜Toutiao. applet🎜🎜🎜 🎜mp-qq🎜🎜 qq-Applet🎜🎜 🎜 🎜

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教程》】

Das obige ist der detaillierte Inhalt vonKann vscode Uni-App verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!