2025-10-07 09:46:03来源：isapphub 编辑：佚名
一、准备工作
在开始创建 uni-app 项目之前，确保已安装 hbuilderx。hbuilderx 是一款强大的开发工具，对 uni-app 开发提供了良好的支持。你可以从官方网站下载并安装适合你操作系统的版本。
二、打开 hbuilderx
安装完成后，打开 hbuilderx 开发工具。
三、创建新项目
1. 在 hbuilderx 的欢迎界面或菜单栏中，选择“新建项目”。
2. 在弹出的“新建项目”窗口中，选择“uni-app 项目”模板。
3. 填写项目基本信息
- 项目名称：为你的项目取一个合适的名字，例如“my_uni_app”。
- 项目路径：选择项目要保存的本地文件夹路径，建议不要包含中文和特殊字符。
- 应用类型：根据需求选择，如“5+app”“微信小程序”“支付宝小程序”等，这里以“5+app”为例。
4. 选择模板引擎
- uni-app 提供了多种模板引擎供选择，如 vue、nvue 等。一般来说，vue 模板较为常用，适合大多数开发者。
5. 点击“创建”按钮
完成上述设置后，点击“创建”按钮，hbuilderx 会自动生成 uni-app 项目的初始结构。
四、项目结构介绍
创建成功后，你可以看到项目的目录结构。主要目录包括：
- pages：存放页面文件，每个页面对应一个文件夹。
- static：用于存放静态资源，如图片、样式文件等。
- components：放置组件文件，方便复用。
- app.vue：应用的主组件，相当于项目的入口。
- main.js：项目的入口 javascript 文件，用于初始化应用。
五、开始开发
1. 进入项目目录后，你可以在 pages 目录下创建新的页面文件。例如，右键点击 pages 文件夹，选择“新建文件”，命名为“index.vue”，这将创建一个新的页面。
2. 在编辑器中编写页面代码。例如，在 index.vue 中添加以下简单代码：
```html
```
3. 运行项目
点击工具栏上的“运行”按钮，选择你要运行的目标平台，如浏览器或手机模拟器。hbuilderx 会自动编译并运行项目，你可以在相应的平台上看到你的 uni-app 应用效果。
通过以上步骤，你就可以使用 hbuilderx 创建并开始开发 uni-app 项目了。随着不断学习和实践，你将能够开发出功能丰富、体验良好的跨平台应用。
