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

  • 可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。

开始之前，开发者需先下载安装如下工具：
HBuilderX：官方 IDE 下载地址
HBuilderX 是通用的前端开发工具，但为 uni-app 做了特别强化。

  • 除了 HBuilderX 可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

因为习惯使用 vscode 进行开发，我选择 vue-cli 命令行的方式来创建项目，下面是具体操作。

初始化项目

环境安装

1
npm install -g @vue/cli@4.5.15

创建 uni-app

使用 Vue2

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

使用 Vue3/Vite 版

创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

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

创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

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

这里我们选择 vue2默认模板。

至此一个简单的 uni-app 的 demo 就创建完成了。