Maison  >  Article  >  interface Web  >  Comment exécuter Uniapp avec la commande

Comment exécuter Uniapp avec la commande

PHPz
PHPzoriginal
2023-04-20 13:48:093909parcourir

Avec le développement continu de l'Internet mobile, les applications hybrides attirent de plus en plus l'attention. Dans ce contexte, divers nouveaux cadres de développement ont vu le jour. En tant que nouveau framework de développement hybride, Uniapp attire naturellement l'attention des développeurs. Uniapp fournit un moyen de développer rapidement des applications multiplateformes, permettant aux développeurs d'écrire du code une seule fois et de publier des applications sur plusieurs plates-formes, notamment iOS, Android, H5, etc. Si vous n'êtes pas encore familier avec Uniapp, vous pouvez d'abord vous référer à la documentation du site officiel. Cet article explique comment exécuter Uniapp à l'aide de commandes.

Uniapp CLI

Uniapp CLI est l'outil de ligne de commande d'Uniapp. Il fournit une série de commandes pour créer, exécuter et déboguer des applications Uniapp. Grâce à la CLI Uniapp, les développeurs peuvent développer et tester des applications localement, puis les empaqueter pour les distribuer sur différentes plates-formes.

Installer Uniapp CLI

L'utilisation d'Uniapp CLI nécessite d'abord une installation. Uniapp CLI prend en charge l'installation globale et l'installation locale. Normalement, nous recommandons d'utiliser la CLI Uniapp via une installation globale afin de pouvoir développer dans n'importe quel dossier de projet.

La commande d'installation globale est la suivante :

npm install -g @vue/cli

La commande d'installation locale est la suivante :

npm install @vue/cli --save-dev

Il est à noter qu'avant d'utiliser Uniapp CLI, assurez-vous que l'environnement Node.js a été installé.

Créer un projet via Uniapp CLI

Après avoir installé Uniapp CLI, nous pouvons l'utiliser pour créer un nouveau projet Uniapp. Utilisez la commande suivante :

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

Ici, nous utilisons une option prédéfinie, qui est uni-preset-vue. Cela fait référence au modèle Vue prédéfini officiel d'Uniapp. En utilisant cette option prédéfinie, nous pouvons créer rapidement un projet Uniapp basé sur Vue. uni-preset-vue。这是指 Uniapp 官方预设的 Vue 模板。通过使用该预设选项,我们可以快速创建一个基于 Vue 的 Uniapp 项目。

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

运行 Uniapp 项目

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

npm run dev:%PLATFORM%

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

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

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

npm run dev:mp-weixin

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

打包发布 Uniapp 项目

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

npm run build:%PLATFORM%

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

Après avoir entré cette commande, certaines options de configuration apparaîtront. Sélectionnez les options correspondantes pour créer un nouveau projet Uniapp.

Exécuter le projet Uniapp

Après avoir créé le nouveau projet Uniapp, nous pouvons exécuter le projet via la CLI Uniapp. Utilisez la commande suivante :

npm run build:mp-weixin
%PLATFORM% fait référence à la plateforme cible correspondante. Il peut s'agir de l'un des éléments suivants : 🎜
  • mp-weixin : applet WeChat
  • mp-alipay : applet Alipay
  • mp-baidu : applet Baidu
  • mp-toutiao : applet Toutiao
  • h5 : Fonctionnement de la page Web
🎜Par exemple, pour exécuter le projet sur l'applet WeChat, vous pouvez exécuter la commande suivante : 🎜rrreee🎜Cette commande démarrera le serveur de développement, puis exécutera le projet dans le navigateur Ouvrez l'adresse correspondante. Le serveur de développement surveille les modifications apportées aux fichiers, recompile l'application et actualise la page du navigateur. 🎜🎜Emballez et publiez le projet Uniapp🎜🎜Après avoir exécuté le projet Uniapp, nous pouvons empaqueter et publier l'application. Utilisez la commande suivante : 🎜rrreee🎜Identique à la commande run project, ici %PLATFORM% fait référence à la plateforme cible. De même, nous devons définir les paramètres de la plateforme pour compiler et pousser l'application. Par exemple, pour créer une version de production d'une applet WeChat, vous pouvez d'abord la conditionner avec la commande suivante : 🎜rrreee🎜Cette commande regroupera l'application dans une version de production de l'applet WeChat et enregistrera le code généré et les fichiers de ressources dans le fichier cible Serré. Nous pouvons télécharger ce dossier sur la plateforme de développement de programmes WeChat Mini pour publier l'application. 🎜🎜Résumé🎜🎜Avec la CLI Uniapp, nous pouvons utiliser des commandes pour exécuter et créer des applications Uniapp. Grâce à l'introduction ci-dessus, j'espère que les lecteurs pourront comprendre l'utilisation de base d'Uniapp CLI et être capables d'utiliser avec succès cet outil pour développer, tester et publier des applications Uniapp. 🎜

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:
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