新手实训：使用HBuilderX开发工具创建模板项目并运行

【实训说明】

本实训主要帮助读者熟悉HBuilderX开发工具的使用方法和操作流程，学会快速创建uni-app项目。创建项目并运行的主要流程如下。

（1）下载并安装HBuilderX开发工具。

（2）创建uni-app模板项目。

（3）运行创建的uni-app项目。

实现方法

使用HBuilderX开发工具创建模板项目并运行是初学者在开发项目过程中必须学习的操作，该操作比较简单，步骤如下。

步骤01 从官网下载HBuilderX开发工具，如图1-26所示。

步骤02 开发工具安装完成后，计算机桌面上会出现一个绿色图标，双击图标即可启动HBuilderX开发工具。

步骤03 启动开发工具后，选择【文件】→【新建】→【项目】选项，进行项目创建，如图1-27所示。

步骤04 在弹出的【新建项目】对话框中进行项目的配置。这里选择【uni-app】项目，在下方的文本框中输入项目名【UniApp】，设置项目路径为【C:/Users/Administrator/Desktop/FE_Project/uni-app】，选择模板为【默认模板】，单击【创建】按钮，即可创建一个uni-app项目，如图1-28所示。

步骤05 项目创建成功后，开发工具左侧会出现UniApp项目，如图1-29所示。

步骤06 选择【运行】→【运行到浏览器】→【Chrome】选项，将项目运行到Chrome浏览器，如图1-30所示。

步骤07 单击运行后，会唤起Chrome浏览器，最终运行效果如图1-31所示。

图1-26中HBuilderX有几个不同版本，下面简单说明各版本的区别。

1. 正式版和Alpha版的区别

（1）Alpha版比正式版更新频率高，新功能会优先在Alpha版中发布。

（2）Alpha版独立于正式版，建议在计算机上保留正式版和Alpha版两个版本，不要互相覆盖。

（3）Alpha版和正式版各自有独立的升级机制，不会互相影响。

（4）Alpha版和正式版共用相同的用户配置，如主题、快捷键设置、代码块设置等，但插件需要各自安装。

（5）Alpha版和正式版只能同时启动一个版本。先启动正式版，再启动Alpha版会激活已经开启的正式版，反之亦然。

2. 标准版和App开发版的区别

HBuilderX标准版可直接用于Web开发、Markdown文字处理场景，但开发App时仍需安装插件。App开发版预置了App/uni-app开发所需插件，可直接使用。App开发所需安装插件体积大的原因主要有两个方面。

（1）包含真机运行基座，Android版、iOS版、iOS模拟器版运行基座体积加起来有一百多兆字节。真机运行基座需要把所有模块都内置进去，方便进行开发调试。

（2）uni-app的编译器依赖webpack和各种node模块，node_modules现有生态就是如此，文件非常多（多达几万个），解压起来很慢。

如果使用vue-cli创建项目，编译器会在项目下。另外，如果不开发App，只用uni-app开发小程序和H5，那么使用标准版就可以。读者应根据自身实际使用情况选择所需版本进行下载，这里选择App开发版。