01uni-app 基础教程 环境配置【uniapp 专题 1】_uniapp 调试和正式环境配置

• HBuilderX：官方IDE下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载之后解压缩运行exe文件

选择新建项目

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

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

2.cli 脚手架

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

环境安装

全局安装vue-cli

npm install -g @vue/cli

创建uni-app

• 使用正式版（对应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版

• 创建以 javascript 开发的工程（如命令行创建失败，请直接访问

gitee

下载模板）

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

• 创建以 typescript 开发的工程（如命令行创建失败，请直接访问

gitee

下载模板）

npx degit dcl