---

1. 前言

在前面的小节中，我们已经对 uni-app 做了简单的介绍，相信大家都对 uni-app 有了一定的了解。

本小节带领大家创建第一个 uni-app 项目。

创建 uni-app 项目有两种方式：第一种是通过官方的开发者工具 HBuilder 来创建，第二种是通过 vue-cli 命令行创建。

2. 使用 HBuilderX 与使用 cli 创建项目的主要区别

使用 cli 创建项目，编译器是安装在单独的项目下面的，升级时需要手动命令升级，只对这一个项目生效。

使用 HBuilderX 创建项目，编译器是装在 HBuilderX 的插件目录下面了，HBuilderX 版本更新，编译器就会一起更新升级，对所有项目生效。日常开发建议大家直接使用 HBuilder 创建项目就可以了。

3. HBuilder创建项目

HBuilderX 是 uni-app 官方推出的开发者工具，里面内置了开发环境，不需要额外配置 nodejs 环境，可以帮我们省去很多麻烦。

3.1 下载工具
先来点开官方网址下载 HBuilderX 开发者工具，建议下载App开发版。

HBuilderX：官方IDE下载地址

3.2 创建 uni-app 项目
接下来，我们通过刚刚下载的 HBuilderX 开发者工具创建一个 uni-app 项目，要跟着一起操作哦。点击工具栏中的文件->新建->项目：

会出现一个弹窗，接下来我们需要选择 uni-app 类型，输入项目名称，修改项目路径，选择合适的模板，点击创建，项目就创建成功啦。

选择模板的时候，有几个模板选项。分别是：

默认模板：不会内置常用组件，想要自己安装组件可以使用该模板。
uni-ui 项目：内置很多常用的组件，日常开发推荐使用该模板。
Hello uni-app：安装了官方的组件和 API 示例，初次体验的话可以使用该模板。
3.3 在项目中添加 HelloWorld
打开 pages/index/index.vue 文件，将