Heim > Web-Frontend > uni-app > Hauptteil

So führen Sie uniapp mit dem Befehl aus

PHPz
Freigeben: 2023-04-20 14:06:23
Original
3981 Leute haben es durchsucht

Mit der kontinuierlichen Weiterentwicklung des mobilen Internets ziehen Hybridanwendungen immer mehr Aufmerksamkeit auf sich. Vor diesem Hintergrund sind verschiedene neue Entwicklungsframeworks entstanden. Als neues Hybrid-Entwicklungsframework zieht Uniapp natürlich die Aufmerksamkeit der Entwickler auf sich. Uniapp bietet eine Möglichkeit, schnell plattformübergreifende Anwendungen zu entwickeln, sodass Entwickler einmal Code schreiben und Anwendungen auf mehreren Plattformen veröffentlichen können, einschließlich iOS, Android, H5 usw. Wenn Sie Uniapp noch nicht kennen, können Sie sich zunächst die offizielle Website-Dokumentation ansehen. In diesem Artikel wird erläutert, wie Sie Uniapp mithilfe von Befehlen ausführen.

Uniapp CLI

Uniapp CLI ist das Befehlszeilentool für Uniapp. Es bietet eine Reihe von Befehlen zum Erstellen, Ausführen und Debuggen von Uniapp-Anwendungen. Über die Uniapp-CLI können Entwickler Anwendungen lokal entwickeln und testen und sie dann für die Verteilung auf verschiedenen Plattformen verpacken.

Uniapp CLI installieren

Für die Verwendung von Uniapp CLI ist zunächst eine Installation erforderlich. Uniapp CLI unterstützt die globale Installation und die lokale Installation. Normalerweise empfehlen wir die Verwendung der Uniapp-CLI über eine globale Installation, damit wir in jedem Projektordner entwickeln können.

Der globale Installationsbefehl lautet wie folgt:

npm install -g @vue/cli
Nach dem Login kopieren

Der lokale Installationsbefehl lautet wie folgt:

npm install @vue/cli --save-dev
Nach dem Login kopieren

Beachten Sie dies vor der Verwendung von Uniapp CLI, stellen Sie sicher, dass die Node.js-Umgebung installiert ist.

Projekt über Uniapp CLI erstellen

Nach der Installation von Uniapp CLI können wir damit ein neues Uniapp-Projekt erstellen. Verwenden Sie den folgenden Befehl:

vue create -p dcloudio/uni-preset-vue my-project
Nach dem Login kopieren

Hier verwenden wir eine voreingestellte Option, nämlich uni-preset-vue. Dies bezieht sich auf die offizielle voreingestellte Vue-Vorlage von Uniapp. Mithilfe dieser voreingestellten Option können wir schnell ein Vue-basiertes Uniapp-Projekt erstellen. uni-preset-vue。这是指 Uniapp 官方预设的 Vue 模板。通过使用该预设选项,我们可以快速创建一个基于 Vue 的 Uniapp 项目。

在输入该命令后,会出现一些配置选项,选择对应好的选项即可建立新的 Uniapp 项目。

运行 Uniapp 项目

建立好新的 Uniapp 项目后,我们就可以通过 Uniapp CLI 运行该项目了。使用以下命令:

npm run dev:%PLATFORM%
Nach dem Login kopieren

其中 %PLATFORM% 指的是对应的目标平台。这可以是以下任意一个:

  • mp-weixin: 微信小程序
  • mp-alipay: 支付宝小程序
  • mp-baidu: 百度小程序
  • mp-toutiao: 头条小程序
  • h5: 网页运行

例如,要在微信小程序上运行该项目,可执行以下命令:

npm run dev:mp-weixin
Nach dem Login kopieren

该命令会启动开发服务器,然后在浏览器中打开对应地址。开发服务器会监视文件变化,并重新编译应用程序及刷新浏览器页面。

打包发布 Uniapp 项目

运行完 Uniapp 项目后,我们就可以打包并发布该应用了。使用以下命令:

npm run build:%PLATFORM%
Nach dem Login kopieren

和运行项目命令一样,这里 %PLATFORM%

Nach Eingabe dieses Befehls werden einige Konfigurationsoptionen angezeigt. Wählen Sie die entsprechenden Optionen aus, um ein neues Uniapp-Projekt zu erstellen.

Führen Sie das Uniapp-Projekt aus

Nachdem wir das neue Uniapp-Projekt erstellt haben, können wir das Projekt über die Uniapp-CLI ausführen. Verwenden Sie den folgenden Befehl:

npm run build:mp-weixin
Nach dem Login kopieren
wobei sich %PLATFORM% auf die entsprechende Zielplattform bezieht. Dies kann einer der folgenden sein: #🎜🎜#
  • mp-weixin: WeChat-Applet
  • mp-alipay: Alipay Miniprogramm
  • mp-baidu: Baidu Miniprogramm
  • mp-toutiao: Toutiao Miniprogramm
  • h5: Webseitenbetrieb
#🎜🎜#Um beispielsweise das Projekt auf dem WeChat-Applet auszuführen, können Sie den folgenden Befehl ausführen: #🎜🎜#rrreee# 🎜🎜# Dieser Befehl startet den Entwicklungsserver und öffnet dann die entsprechende Adresse im Browser. Der Entwicklungsserver überwacht Dateiänderungen, kompiliert die Anwendung neu und aktualisiert die Browserseite. #🎜🎜##🎜🎜#Packen und veröffentlichen Sie das Uniapp-Projekt#🎜🎜##🎜🎜#Nachdem wir das Uniapp-Projekt ausgeführt haben, können wir die Anwendung packen und veröffentlichen. Verwenden Sie den folgenden Befehl: #🎜🎜#rrreee#🎜🎜# Identisch mit dem Befehl „Projekt ausführen“, hier bezieht sich %PLATFORM% auf die Zielplattform. Ebenso müssen wir die Plattformparameter festlegen, um die Anwendung zu kompilieren und zu pushen. Um beispielsweise eine Produktionsversion eines WeChat-Applets zu erstellen, können Sie es zunächst mit dem folgenden Befehl packen: #🎜🎜#rrreee#🎜🎜#Dieser Befehl packt die Anwendung in eine Produktionsversion des WeChat-Applets und kombiniert diese Generierter Code und Ressourcendateien werden im Zielordner gespeichert. Wir können diesen Ordner auf die WeChat Mini Program Developer Platform hochladen, um die Anwendung zu veröffentlichen. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#Mit der Uniapp-CLI können wir Befehle verwenden, um Uniapp-Anwendungen auszuführen und zu erstellen. Ich hoffe, dass die Leser durch die obige Einführung die grundlegende Verwendung von Uniapp CLI verstehen und dieses Tool erfolgreich zum Entwickeln, Testen und Veröffentlichen von Uniapp-Anwendungen verwenden können. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo führen Sie uniapp mit dem Befehl aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage