学习使用uni-app之前，环境首先要配好，开发者需先下载安装工具。
HBuilderX安装
官网下载链接：https://www.dcloud.io/hbuilderx.html
进入官网后点击DOWNLOAD，打开如下界面:
初学者选择标准版即可，下载完成，开始安装，一路点击下一步，直至安装完成。
开发者工具配置
如果没有开发者工具我们就没有办法调试小程序项目（因为Hbuilder没有自己的调试工具，只有内置的浏览器），所以在我们开发之前，必须要安装开发者工具。
下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html
打开上面的地址，进入微信官方文档，点击下载，按照自己的机型，安装合适的版本。
安装完成后，需要对微信开发者工具进行配置。
配置步骤比较简单，打开下载好的微信开发者工具，使用微信扫描二维码登录。
登录之后打开如下界面:
为了uniapp编译的项目能够在开发者工具上运行，在打开的设置框中只需要开启服务端口就可以了，不然无法使用调试及测试显示。
创建uni-app项目
打开HBuilder X,再点击工具栏里的文件 -> 新建 -> 项目。
打开新建项目弹出框，选择单选按钮uni-app，输入项目名称，选择要存储的位置，点击创建 ，即可成功创建。如果创建前选择了模板里面的Hello uni-app， 即可体验官方示例。
以下为uni-app新建项目的目录结构介绍
uni-app项目如果要开发运行，还必须安装一些基本的插件。Uni-app有自己的插件库，在”工具->插件安装”弹出框中找到需要安装的插件直接安装即可。
以上内容是学习使用uni-app开发小程序项目的基础，只有了解了以上内容，才能开始开发项目。下期将为大家更新uni-app项目的调试，运行，发布等的内容。关注我，将为你每周更新移动端小程序相关的知识。
原文：https://www.cnblogs.com/lenbor/p/12549420.html