UniApp 环境安装

UniApp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

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

HBuilderX 开发工具安装与配置

HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称HX。
HX是轻如编辑器、强如IDE的合体版本。

HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。

下载安装：

下载安装后，我们可以设置自己喜欢的主题：

点击工具栏里的文件 -> 新建 -> 项目（快捷键 Ctrl+N）：

选择 uni-app 类型，输入工程名，选择模板，点击创建，即可成功创建。

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

浏览器运行：进入项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，选择 Chrome，也可以其他浏览器，即可体验 uni-app 的 web 版。

运行 App 到手机或模拟器：使用电压足够的 usb 端口连接手机，设置中开启 USB 调试，手机上允许电脑设备调试手机，进入项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验 uni-app。

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

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

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

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

在百度、抖音、QQ、快应用（分联盟和华为）、快手、飞书、360、京东等小程序开发工具里运行：内容同上，不再重复。

注意：

如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
微信小程序工具需要配置允许权限，不然 HBuilder 无法调用微信小程序开发工具的命令行
支付宝/百度/抖音/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。
如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目。

运行的快捷键是 Ctrl+R。

HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行的设备：

除了 HBuilderX 可视化界面，也可以通过 vue-cli 创建 uni-app 项目。

创建以 javascript 开发的工程:

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

创建以 typescript 开发的工程

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

需要全局安装 vue-cli npm install -g @vue/cli

使用正式版（对应 HBuilderX 最新正式版）

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

使用alpha版（对应 HBuilderX 最新 alpha 版）

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

此时，会提示选择项目模板（使用 Vue3/Vite 版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：

更多内容参考：