uni-app 支持通过可视化界面和 vue-cli 命令行快速创建项目。

可视化方法相对简单，内置了相关环境，开箱即用，无需配置。

在开始之前，您需要下载并安装以下工具：

它是一个通用的前端开发工具，但专门针对 uni-app 进行了增强。

创建 uni-app

单击工具栏中的 -> New -> 项目文件（快捷键 Ctrl+N）。

选择 uni-app 类型，输入项目名称，选择模板，单击【创建】，创建成功。

uni-app 自带的模板包括默认的空项目模板、uni-app 官方组件和 API 示例，一个重要的模板是 uni ui 项目模板，推荐用于日常开发，内置了大量常用组件。

开发人员还可以使用 CLI 创建项目，另请参阅文档。

不同的是，创建的项目的根目录是源码，可以直接编辑。uni-app 的编译器在 plug-in 目录下，随升级一起升级。

如果开发者对 Node 模式的项目不熟悉，对可视化方式感到困惑，可以参考文档

运行 uni-app

浏览器运行：进入 -，点击工具栏的 Run -> Run to -> 选择浏览器，即可体验 Uni-App 的网页版。

将 App 运行到手机或模拟器上：将手机连接电压足够大的 USB 端口，在设置中打开 USB 调试，允许电脑设备在手机上调试手机，输入 -，点击工具栏中的 Run -> 将 App 运行到手机或模拟器上，即可在设备中体验 uni-app。

在微信开发者工具中运行：进入-项目，点击工具栏的运行->，即可运行到小程序模拟器->微信开发者工具，即可在微信开发者工具中体验uni-app。

注意：如果是第一次使用，需要配置好小程序 IDE 的相关路径，才能成功运行。如下图所示，您需要在输入框中输入微信开发者工具的安装路径。

注意：服务端口需要在微信开发者工具的 设置 - > 安全 中打开。

在支付宝小程序开发者工具中运行：前往-项目，点击工具栏的运行->，即可运行到小程序模拟器->支付宝小程序开发者工具，即可在支付宝小程序开发者工具中体验Uni-App。

运行在百度、抖音、QQ、快算（子联盟和华为）、快手、飞书、360、 等小程序开发工具中：内容同上，不再赘述。

技巧

要运行的快捷键是 Ctrl+R。

还有一个快速运行菜单，可让您按编号快速选择要运行的设备：

调试详见 uni-app 调试

发布 uni-app 打包为 App

在工具栏中，点击 发布，选择 APP- ，如下图所示

此时将显示以下界面，单击 。

云打包支持安全打包，保护用户隐私，不上传代码和证书，通过差异化打包实现安全打包。看：

打包云还支持 CLI 模式，可以通过 CLI 模式（不是 Uni-App 的 CLI）调用，方便持续集成。看：

如果您仍想使用或执行离线打包，请在 菜单中找到本地打包菜单，生成离线打包资源，然后参考离线打包文档。打包

App 时注意，如果涉及第三方 SDK，需要在 .json 中申请并配置，否则无法使用相关功能。

要打包 iOS 应用程序，您需要申请证书。

发布为 Web 站点在 .json 的可视化界面中，配置以下内容（在网站根目录下发布时，无法配置应用的基本路径），发布网站的路径为 ，例如：

在工具栏中，点击 ，选择 -H5 ，如下图，点击生成 H5 相关资源文件，并保存在目录下。

注意

发布为小程序发布为微信小程序：申请微信小程序，参考：。在中间和顶部菜单中，点击“发布”=>“小程序-微信”，输入小程序名称，点击发布

如果是手动下发的，点击发布按钮后，会在项目的 /dist//mp- 目录下生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码正常运行，点击“上传”按钮，然后按照“提交审核”=>“发布”小程序标准流程，一步一步来，详细检查：

如果在发布界面勾选了自动上传到微信平台，则不再需要打开微信工具进行手动操作，直接上传到微信服务器进行审核。

发布为百度小程序：入驻小程序并申请百度小程序，参考：百度小程序教程。点击中>顶部菜单中的“发布”=“小程序-百度”，输入小程序名称，点击发布，即可生成//dist//mp-格式的百度小程序项目代码。

在百度小程序开发者工具中，导入生成的百度小程序项目，待测试项目代码正常运行后，点击“上传”按钮上传代码，然后在百度小程序管理中心选择已创建的应用，点击前往发布，选择对应的版本，然后提交审核。 作为支付宝小程序发布：进入支付宝小程序，参考：支付宝小程序教程。点击中>顶部菜单中的“” = “小程序-支付宝”，生成支付宝小程序项目代码，地址为 //dist//mp-。

在支付宝小程序开发者工具中，导入生成的支付宝小程序项目，待测试项目代码正常运行后，点击“上传”按钮上传代码，并在其中，选择你刚刚提交的版本并点击提交审核，详见支付宝小程序文档。 发布为抖音小程序：进入抖音小程序，参考：抖音小程序教程。点击顶部菜单中的 “” = > “小程序 - 抖音” ，生成 //dist//mp- 格式的抖音小程序工程代码。

在抖音小程序开发者工具中，导入生成的抖音小程序项目，待测试项目代码正常运行后，点击“上传”按钮上传代码，在抖音小程序后台，选择刚刚提交的版本并点击提交审核，详见抖音小程序文档。 360 小程序发布：入驻 360 小程序，参考：点击中>顶部菜单中的 “发布” =“小程序-360“ 即可生成 //dist//mp-360 的 360 小程序工程代码。

在 360 浏览器中，导入生成的 360 小程序项目

注意

发布为快速应用程序（）：输入快速应用程序（），参考：快速应用程序（）教程。在中间顶部的菜单中，点击 “” => “ App ” 以生成 //dist//- 的 App （） 项目代码。

在快应用联盟工具中，导入生成的快应用联盟项目，测试项目代码是否正常运行，点击“构建”打包正式版本，上传到快应用联盟后台发布为快应用（） - 华为：加入华为快应用，详见 华为快应用教程。在中间和顶部菜单中，单击 = > - ，生成 //dist//- 的 工程代码。

在 开发者工具中，导入生成的 App 工程，测试工程代码是否正常运行，单击“构建”打包正式版本，并上传到 App 后台。 发布为 QQ、快手、飞书、京东小程序：

内容同上，不再赘述。

发布的快捷键是 Ctrl+u。您也可以下拉 快速发布 菜单，然后按数字键进行选择。