【小程序】HbuilderX搭建开发环境

---

前言

uni-app 支持通过两种方式快速创建项目

• 可视化界面
• vue-cli 命令行

因为可视化的方式比较简单，HBuilderX 内置了相关环境，开箱即用，无需配置 Nodejs。我们接下来使用 HBuilderX 开发项目。

一、安装 HBuilderX

1.首先，在自己本地电脑安装编辑器：HBuilderX

• H 是 HTML 的首字母
• Builder 是构造者
• X 是 HBuilder 的下一代版本。

 我们也简称HX。

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

 HBuilderX 的特点如下图所示：

 安装之后可以看到界面是这样的：

二、创建项目

 步骤：在点击工具栏里的文件 -> 新建 -> 项目。
 然后我们会看见新建项目的弹窗，默认为普通项目，我们手动选择第二个 uni-app，手动输入项目名，系统会填入默认路径，但是个人可以根据需要进行修改，点击预览即可。


 项目创建成功之后显示如下：

三、运行项目

 步骤：在点击工具栏里的运行 -> 运行到浏览器 -> Chrome/Firefox/IE/Edge 等任意一个浏览器都可，首推 Chrome 。

 运行成功之后，终端会有对应的提示：

 我们到浏览器查看效果：

四、在微信开发者工具运行

 除了浏览器，我们还可以在其他地方运行，接下来在小程序模拟器上运行。

 如果是第一次使用，需要先下载微信小程序开发者工具，配置小程序 ide 的相关路径，并启动微信开发者工具，才能运行成功。

 另外还需要在微信开发者工具–>设置–>安全设置–>开启服务端口

 如下图，分别是在微信小程序开发者工具中开启服务端口，和在HbuiderX输入框输入微信开发者工具的安装路径。

 此时我们退出 HX，再重新进入之后运行，就可以了。

（图片来自官网）

 终端显示如下：

 微信小程序开发者工具显示效果如下：

五、uni-app 目录介绍

├── pages  # 存放所有的页面
├── static # 存放静态资源，比如图片/视频/字体/图标等
├── App.vue # 项目根组件，页面都是在 App.vue 下进行切换的，可调用应用的生命周期
    ├── main.js # 项目入口文件，主要作用是初始化 Vue 实例并使用需要的插件
    ├── manifest.json # 应用的配置文件，用于指定应用的名称/图标/权限等
    ├── pages.json # 全局配置，决定页面文件的路径/窗口样式/原生的导航栏/底部的原生 tabbar等
    ├── uni.scss # 本文件里预置了一批 scss 变量预置，如按钮颜色/边框风格，