HBuilderX创建uni-app项目

一、创建uni-app项目



1. 通过HBuilderX创建uni-app项目

1）介绍HBuilderX

• 工具定位: HBuilderX是DCloud公司开发的类似VS Code的开发工具，专为uni-app开发设计
• 工具优势: 与uni-app同属DCloud旗下产品，具有更好的兼容性和开发体验
• 下载方式: 可通过uni-app官网找到HBuilderX的下载地址

2）介绍uni-app





• 框架特点: 使用Vue.js开发，可发布到iOS、Android、Web及各种小程序平台
• 开发优势: 编写一套代码即可发布到14个平台，大幅提升开发效率
• 生态支持: 拥有900万开发者，数百万应用，12亿手机端月活用户

3）下载HBuilderX





• 下载步骤:
  • 访问DCloud官网
  • 点击HBuilderX图标进入下载页面
  • 选择Windows版本下载
• 文件格式: 下载得到的是zip压缩包，需要解压后使用

4）解压HBuilderX



• 解压建议: 解压到常用软件安装目录，如E盘Program Files文件夹
• 快捷方式: 右键HBuilderX.exe发送到桌面快捷方式，方便后续启动
• 注意事项: 解压后无需安装，直接运行即可使用

5）运行HBuilderX



• 启动方式: 双击桌面快捷方式或解压目录中的HBuilderX.exe
• 界面布局: 中央有"新建项目"按钮，是创建uni-app项目的入口
• 首次使用: 启动后会显示欢迎界面，可关闭后开始创建项目

6）在HBuilderX中创建uni-app项目



• 新建项目

  

  • 项目配置:
    • 项目名称：如"uni-app-project"
    • 存储路径：建议选择专门的项目文件夹
    • 模板选择：初学者使用默认模板
    • Vue版本：选择Vue 3版本
  • 创建步骤: 填写完配置后点击"创建"按钮
• 安装插件

  

  • 必要插件: 需安装"uni-app (vue3)"编译器插件
  • 安装原因: Vue代码不能直接在小程序运行，需要编译转换
  • 安装方法: 通过工具->插件安装菜单，选择对应插件安装
• 选择开发者工具

  

  • 工具关联: 需要指定微信开发者工具的安装路径
  • 路径查找: 通常位于D盘Program Files下的微信web开发者工具目录
  • 一次性设置: 路径只需初次使用时设置一次
• 服务端口关闭问题与解决
  
  • 常见错误: "工具的服务端口已关闭"提示
  • 解决方法:
    • 打开微信开发者工具
    • 进入设置->安全设置
    • 开启服务端口
  • 注意事项: 此设置只需配置一次，后续无需重复操作

7）窗口分离小技巧



• 操作步骤: 点击微信开发者工具中的"分离窗口"图标
• 使用优势:
  • 可固定模拟器窗口在前台
  • 方便边编码边预览效果
  • 避免频繁切换软件窗口
• 调整建议: 可适当放大分离后的窗口以获得更好预览效果

8）编写并运行代码





• 项目结构:
  • pages文件夹存放页面文件
  • index.vue是默认首页
• 热更新: 修改代码保存后会自动编译并刷新预览
• 开发体验: 支持Vue3的所有特性，开发方式与常规Vue项目一致

2. 通过HBuilderX创建uni-app项目的总结



• 
• 完整流程:
  • 下载安装HBuilderX
  • 创建uni-app Vue3项目
  • 安装Vue3编译器插件
  • 配置微信开发者工具路径
  • 开启服务端口
  • 编写代码并预览
• 工具分工:
  • HBuilderX：项目创建和代码编写
  • 微信开发者工具：预览和调试
• 效率技巧: 使用窗口分离功能提升开发效率

二、知识小结

知识点	核心内容	考试重点/易混淆点	难度系数
创建uni-app项目	通过HBuilderX创建项目，选择Vue 3版本	项目模板选择（默认模板 vs 自定义模板）	⭐⭐
HBuilderX工具	类似VS Code的开发工具，需从uni-app官网下载	工具安装路径（解压后需配置快捷方式）	⭐
uni-app编译器	需安装uni-app Vue 3编译器插件	插件安装失败处理（端口冲突/版本兼容性）	⭐⭐
微信开发者工具集成	配置开发者工具路径，开启服务端口	端口未开启报错（需手动设置安全端口）	⭐⭐⭐
开发调试技巧	分离模拟器窗口，实现代码热更新	窗口分离操作（固定预览界面 vs 调试界面）	⭐⭐
项目结构解析	pages文件夹管理页面，Vue文件编译为小程序代码	文件后缀差异（.vue vs .wxml/.wxss）	⭐⭐
数据绑定演示	修改script数据实时更新界面	热更新原理（编译后自动同步到模拟器）	⭐