uni-app 基础与环境搭建（一）

本页对应 uni-app 基础与环境搭建，共 8 段视频，约 54 分钟。

学习目标

• 能独立完成 HBuilderX 的下载、安装与快捷方式创建，并将主题和快捷键方案设置为 VS Code 风格。
• 能使用默认模板和 Vue3 版本创建 uni-app 项目，规范选择项目目录并填写项目名称。
• 能将同一 uni-app 项目分别运行到浏览器 H5 和微信小程序，并正确配置微信开发者工具路径、服务端口及小程序 AppID。
• 能针对微信小程序无法自动启动或运行失败的情况，定位并处理开发者工具路径未配置、服务端口未开启等常见问题。
• 能完成安卓真机运行环境配置，包括开启开发者选项与 USB 调试、安装真机运行插件和 ADB 驱动，并使用授权、撤销授权、重插数据线、重启手机等步骤排查连接问题。
• 能注册并登录 DCloud 账号，通过插件市场安装 Prettier 等插件，并在“已安装插件”列表中验证安装结果。

知识点

本节说明

本节笔记未附图片与代码片段，因此不虚构插入图片或代码；以下按转写稿整理为教程正文，保留关键操作与调试过程。

安装 HBuilderX 与首次配置

为什么需要：开发 uni-app 时，HBuilderX 对运行到浏览器、小程序、手机模拟器/真机有集成支持，比单纯用 VS Code 少一些环境切换。
怎么想：把 HBuilderX 理解为“更贴近 uni-app 工作流的编辑器”，但它界面和操作不如 VS Code 顺滑，所以首次配置要顺手。
怎么做：Windows 下载压缩包，解压后双击 HBuilderX.exe；关闭时若提示是否创建快捷方式，选择“是”，方便以后打开。macOS 下载 DMG，双击后把程序拖入应用目录。首次打开会提示选择主题，按喜好选；快捷键方案建议选 VS Code，因为前面用 VS Code 的快捷键更熟。
易错点：不要把 HBuilderX 当成 VS Code 的替代品去比较全部功能；Windows 是压缩包，不是安装向导；关闭时没创建快捷方式，后面每次找 exe 会麻烦。

创建 uni-app 项目

为什么需要：后续 H5、小程序、App 都基于同一个项目目录开发，目录和模板选错会影响后续学习。
怎么想：创建项目时先确定三件事：类型是 uni-app、模板用默认、Vue 版本选 Vue3。默认模板初始代码最少，最适合从零学习。
怎么做：文件 → 新建 → 项目；类型选 uni-app，不要选错；模板选“默认模板”；Vue 版本选 Vue3；项目名可自取；目录建议放在规范位置，例如课程资料下的 code 目录，并可再建子目录，让代码不散落。填写后点创建。
易错点：不要选成小程序模板或其他类型；不要随便把项目放在桌面或临时目录；转写稿提到“默认模板最干净”，初学不要一上来选复杂模板。

运行到浏览器（H5）

为什么需要：先确认项目能编译、页面能打开，是后续小程序和真机运行的基础。
怎么想：浏览器运行最简单，先跑通 H5，再处理小程序和真机环境。
怎么做：点“运行”→运行到浏览器→Chrome；也可用快捷键 Ctrl+R（转写稿特别纠正：是字母 R，不是数字 2）。等待编译完成，浏览器会自动打开初始页面；可切换手机模式查看 H5 效果。
易错点：首次编译等待时间较长，不要误以为卡死；看到红色提示不一定是报错，HBuilderX 常用红色强调信息；项目没保存或依赖未就绪时，先等编译结束。

运行到微信小程序

为什么需要：uni-app 的亮点是跨端，一套代码可生成 H5、小程序、App；小程序端需要微信开发者工具配合。
怎么想：HBuilderX 负责编译，微信开发者工具负责预览；两者要建立连接。
怎么做：先在 manifest.json 的可视化界面中找到“微信小程序”，填写微信小程序 AppID。再打开微信开发者工具，进入设置→安全设置，把“服务端口”打开。回到 HBuilderX，点“运行”→运行到小程序模拟器→微信开发者工具。若提示找不到工具，在提示中浏览选择微信开发者工具安装目录；目录只填到工具所在文件夹，不要带 .exe。找不到路径可右键桌面图标→属性查看安装位置。
易错点：不打开微信开发者工具服务端口，HBuilderX 无法自动拉起；AppID 不填可能以游客模式运行；红色提示不等于报错；路径填到 exe 文件会失败。

真机运行与驱动调试

为什么需要：H5 和小程序能跑，但 App 端最终要上手机验证；安卓真机通常比模拟器省资源。
怎么想：先下载“真机运行插件”，再让电脑识别手机；识别不了优先查数据线、USB 调试和驱动。
怎么做：HBuilderX 点“运行”→运行到手机或模拟器，按提示下载真机运行插件。安卓手机进入设置→系统→关于手机，连续点击“版本号”开启开发者模式；再进系统→开发者选项，打开“USB 调试”。连接数据线后，若 HBuilderX 看不到设备，使用群里的 ADB Driver Installer.exe 安装驱动：打开工具，看到设备后点 Install，安装后重启 HBuilderX。手机弹出授权时点“允许”。
易错点：数据线可能只是充电线，不能传数据；授权弹窗必须允许；若之前好用后来失效，可撤销授权、拔插数据线、关闭再打开 USB 调试，仍不行再重启手机。苹果用户不必强求真机，转写稿建议用模拟器；没有安卓手机也不影响主要学习，后续开发多以 H5 为主，偶尔真机测试。

插件安装与账号准备

为什么需要：HBuilderX 默认体验不如 VS Code，需要装格式化等插件；后续云打包 APK 也需要 DCloud 账号。
怎么想：插件安装方法比某个插件本身更重要，学会搜索和安装即可。
怎么做：先注册并登录 DCloud 账号；打开“工具”→插件安装，可看已安装插件；点“前往插件市场安装”，在插件市场搜索 Prettier 等插件，登录后点安装，会跳回 HBuilderX 确认。也可用离线安装。
易错点：不登录账号，在线安装会麻烦；不要把“安装插件”理解成只装 Prettier，关键是掌握插件市场搜索与安装流程；云打包生成的是安卓 .apk，属于后续上线环节，本节先建立账号和插件安装意识。

HBuilderX 安装与首次配置

为什么需要：开发 uni-app 时，HBuilderX 对运行到小程序、真机调试等流程集成更直接；它可理解为与 VS Code 类似的编辑器，但在 uni-app 场景下更省事。
怎么想：先完成安装和基础偏好设置，再进入项目创建；不要一开始纠结所有配置，先把“能打开、能创建、能运行”跑通。
怎么做：Windows 下载压缩包，解压后双击 HBuilderX.exe；关闭时若提示是否创建快捷方式，选择“是”，方便后续打开。macOS 为 DMG 程序，双击后拖入应用目录。首次打开选择主题；快捷键方案建议选 VS Code，因为此前已熟悉其快捷键。
易错点：不要把“HBuilderX”写成“H build”；Windows 用户容易忽略快捷方式提示；主题和快捷键只是偏好，不影响项目本身。

创建 uni-app 项目

为什么需要：后续 H5、小程序、App 都基于同一个 uni-app 项目，项目类型和 Vue 版本选错会影响后续学习与运行。
怎么想：创建时抓住四个关键：类型选 uni-app、模板选默认、Vue 选 3、目录放规范位置。模板越干净，越适合从零学习。
怎么做：点“文件”→“新建”→“项目”；项目类型选 uni-app，不要选错；模板选“默认模板”；Vue 版本选 Vue3。目录建议放在固定学习目录下，例如本次课程的 code 目录，并在其下再建子目录；项目名称可自定义。确认后点“创建”。创建完成后会看到项目文件结构，可把它理解为一个 Vue 项目。
易错点：不要随便把项目散放在桌面或下载目录；模板不要选带大量示例代码的，否则初学干扰大；Vue 版本按课程统一选 Vue3。

运行到浏览器 H5

为什么需要：H5 是最快的验证方式，能先确认项目初始代码是否正常。
怎么想：先跑浏览器，再跑小程序和真机；浏览器环节最简单，适合建立信心。
怎么做：在 HBuilderX 中点“运行”，选择运行到浏览器，例如 Chrome；也可用快捷键 Ctrl+R。首次会提示编译，等待后浏览器自动打开页面。把页面切换为手机模式，可观察 H5 效果。
易错点：编译等待时间可能较长，不要误以为卡死；快捷键是 Ctrl+R，不是数字 2；H5 能跑不代表小程序配置已完成。

运行到微信小程序

为什么需要：uni-app 的核心价值是跨端开发，一套代码可生成 H5、小程序、App 等。小程序端需要微信开发者工具配合。
怎么想：先补 AppID，再打开微信开发者工具的服务端口，最后由 HBuilderX 调起开发者工具。
怎么做：在项目中的 manifest.json 里找到“微信小程序”，填写小程序 AppID；可用可视化界面操作，也可看源码。打开微信开发者工具，进入“设置”→“安全设置”，打开服务端口。回到 HBuilderX，点“运行”→“运行到小程序模拟器”→“微信开发者工具”。首次若提示找不到工具目录，浏览到微信开发者工具安装目录，注意只填目录，不要带 .exe。
易错点：服务端口默认可能是关闭的；未填 AppID 会以游客模式运行；HBuilderX 中红色提示不一定是报错，可能只是强调信息；安装目录不要填成可执行文件路径。

真机运行环境准备

为什么需要：App 端调试需要手机或模拟器；安卓真机通常比模拟器更流畅、更省资源。
怎么想：先让 HBuilderX 识别设备，再让电脑安装驱动，最后在手机上授权安装应用。
怎么做：点“运行”→“运行到手机或模拟器”，首次按提示下载真机运行插件。安卓手机进入“设置”→“系统”→“关于手机”，连续点击“版本号”开启开发者模式；返回“系统”→“开发者选项”，打开“USB 调试”。用支持数据传输的数据线连接电脑；若 HBuilderX 仍不识别，运行 ADBDriverInstaller.exe 安装驱动，识别到设备后点安装，必要时重启 HBuilderX。
易错点：充电线可能不支持数据传输；手机弹授权时要点“允许”；识别不到时不要急，按“撤销授权→拔插数据线→开关 USB 调试→重启手机”的顺序排查。

插件安装与云打包认知

为什么需要：HBuilderX 默认体验不如 VS Code 顺手，可通过插件补足格式化等能力；项目上线生成 APK 时需要云打包服务。
怎么想：插件安装是通用技能，重点掌握“从插件市场搜索并安装”的流程，而不是只装某一个插件。
怎么做：注册 DCloud 账号并登录；点“工具”→“插件安装”，可查看已安装插件；点“前往插件市场安装”，在插件市场搜索 Prettier 等插件，网页中点安装后回到 HBuilderX 确认。云打包用于生成安卓 APK，需登录账号后使用。
易错点：未登录账号会导致插件安装不顺畅；插件市场安装后要回编辑器确认；苹果真机需苹果设备，苹果模拟器需苹果电脑；没有安卓手机也不必卡住，前期可用 H5 开发，真机步骤掌握即可。

先明确：这一节要解决什么

这一节的核心不是“把 HBuilderX 装上看一眼”，而是把新建的 uni-app 项目真正运行起来：先运行到浏览器看 H5，再运行到微信小程序，最后了解如何运行到手机真机。HBuilderX 的优势在于它和 uni-app 结合紧密，可以直接把项目运行到浏览器、小程序和手机端；VS Code 写代码很顺手，但不提供 HBuilderX 这种“运行到手机/模拟器”的入口。所以这一节要建立一个判断：日常写代码可以用自己熟悉的工具，但多端运行与调试要回到 HBuilderX 里完成。

安装 HBuilderX 与基础设置

为什么需要：HBuilderX 是后续创建、运行、调试 uni-app 项目的主要工具，安装和基础设置没做好，后面运行项目会反复卡在入口上。

怎么想：把它理解为“更贴合 uni-app 的编辑器”。界面和快捷键可以尽量靠近 VS Code，减少切换成本。

怎么做：Windows 下载压缩包后找到 HBuilderX.exe 双击运行；关闭时如果提示创建快捷方式，选择“是”，方便以后打开。macOS 用户按 dmg 程序方式拖拽安装。首次打开选择主题；快捷键方案建议选 VS Code，因为前面已经熟悉 VS Code 的快捷键。

易错点：不要把 HBuilderX 当成 VS Code 的完全替代品去比较所有细节；它的价值主要在 uni-app 多端运行。安装后先完成主题和快捷键设置，不要急着写代码。

创建 uni-app 项目：模板、版本、目录要选对

为什么需要：项目模板和目录结构决定了后面代码是否干净、资料是否好管理。模板选错会带入很多暂时用不到的示例代码。

怎么想：学习阶段用“默认模板”最合适，初始代码少，项目干净；Vue 版本选 Vue3，符合后续趋势。目录不要随手放桌面，要放到固定学习目录下的子目录中，便于以后查找。

怎么做：打开 HBuilderX，点“文件 → 新建 → 项目”，类型选 uni-app，模板选默认模板，Vue 版本选 3。项目名称可以自己起，目录建议先浏览到常用学习目录，再在目录后补一层项目子目录。填写完成后点创建。

易错点：类型不要误选成普通 Vue 项目或小程序项目；模板不要一上来选复杂示例；目录不要直接放在很乱的位置。创建后看到 pages、static、manifest.json 等文件是正常的，说明项目已经初始化。

运行到浏览器：先验证 H5

为什么需要：浏览器运行最快，能先确认项目是否正常编译、页面是否能打开。它是后面小程序和真机运行前的第一道验证。

怎么想：先跑最简单的端，排除项目本身的问题，再处理小程序和真机的环境问题。

怎么做：在 HBuilderX 中打开项目，点“运行”，选择运行到浏览器，例如 Chrome；也可以使用运行快捷键。等待编译完成，HBuilderX 会自动打开浏览器页面。把浏览器切换成手机模式，就能看到 H5 效果。

易错点：首次编译可能较慢，不要连续重复点运行；看到红色提示不要立刻认定报错，HBuilderX 有时用红色强调信息。若浏览器没自动打开，先看编译是否完成，再检查默认浏览器设置。

运行到微信小程序：AppID 与安全端口

为什么需要：uni-app 一套代码可以生成小程序端，但微信小程序运行依赖微信开发者工具和项目 AppID。

怎么想：HBuilderX 负责编译项目，微信开发者工具负责真正打开和预览小程序；两者要打通，必须填写 AppID，并打开微信开发者工具的服务器端口。

怎么做：先在项目中的 manifest.json 里找到微信小程序配置，填写微信小程序 AppID。然后打开微信开发者工具，进入“设置 → 安全设置”，把服务端口打开。回到 HBuilderX，点“运行 → 运行到小程序模拟器 → 微信开发者工具”，等待编译并自动拉起微信开发者工具。若弹出信任提示，选择信任。

易错点：不填 AppID 可能以游客模式运行，后续部分能力受限；微信开发者工具的安全端口默认可能是关闭的，不打开就无法被 HBuilderX 自动调用；不要直接编辑 manifest.json 源码和可视化界面混着改，初学阶段优先用可视化界面填写。

运行到手机真机：插件、USB 调试、驱动、授权

为什么需要：有些效果必须在真机上看，尤其是 App 端。HBuilderX 可以把项目运行到安卓真机，但需要先建立电脑与手机的连接。

怎么想：先装真机运行插件，再配置手机开发者选项，最后处理驱动和授权。顺序不能乱。

怎么做：在 HBuilderX 点“运行 → 运行到手机或模拟器”，按提示下载真机运行插件。安卓手机进入“设置 → 系统 → 关于手机”，连续点击版本号开启开发者模式；再回到系统设置找到“开发者选项”，打开 USB 调试。用数据线连接电脑，若 HBuilderX 识别不到设备，使用 ADB Driver Installer 安装驱动，选中设备后点 Install，必要时重启 HBuilderX。手机弹出“是否允许 USB 调试”时点允许。

易错点：数据线可能只能充电、不能传数据，识别不到设备时先换线；没有开发者选项不是手机坏了，而是还没连续点版本号开启；授权失败可尝试撤销授权、拔插数据线、关闭再打开 USB 调试，最后重启手机。真机环境受电脑、手机、网络影响较大，步骤对但设备不识别时不要慌，按顺序排查。

插件安装与账号：为后续开发做准备

为什么需要：HBuilderX 默认功能不一定满足格式化、校验等需求；后续云打包等服务也需要账号。

怎么想：插件安装方法比某个插件本身更重要。学会通过插件市场搜索、安装、查看已安装插件，后面需要什么就装什么。

怎么做：在 HBuilderX 中找到“插件安装”，可查看已安装插件；没有想要的插件时进入插件市场搜索，例如 Prettier 代码格式化插件，登录账号后按提示安装回 HBuilderX。云打包等能力需要注册并登录账号。

易错点：不要为了装插件而装插件，先明确用途；网络不稳定时插件下载可能失败，可稍后重试；账号登录后再使用插件市场和云打包相关服务。

代码示例

代码一：项目页面 pages/index/index.vue（模板 / 逻辑 / 样式三段式）

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {
    // 页面加载时执行，uni-app 的生命周期
    console.log('页面加载了')
  },
  methods: {}
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

要点解释：

• template 负责视图结构，script 负责数据与逻辑，style 负责样式；三段写在同一文件里，和普通 Vue 单文件组件结构一致。
• data() 必须 return 一个对象，模板里用 {{ title }} 取值；写成 data: { title: 'Hello' } 在组件里会失效，是常见错误。
• 样式里用 rpx 而不是 px，这是 uni-app 的自适应单位，写一套样式在 H5 和小程序里显示比例一致。
• 标签用 view / text / image，不要写 div / span / img，否则小程序端不识别。
• 这份代码同时被编译成 H5、微信小程序、App 三端，正是转写稿里“写一套代码，H5 有了、小程序有了、App 也有了”的落点。

代码二：manifest.json 里配置微信小程序 AppID

{
  "name": "uniapp-demo",
  "appid": "",
  "description": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "mp-weixin": {
    "appid": "wx1234567890abcdef",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  }
}

要点解释：

• 打开 manifest.json 默认是可视化窗口，不是源码；想看源码要点旁边的“源代码”切换，两种方式改的是同一个文件。
• 微信小程序 AppID 的位置是 mp-weixin.appid，把 wx1234567890abcdef 换成自己小程序后台的真实 AppID。
• 不填 AppID 也能运行，但微信开发者工具会以“游客模式”启动，转写稿里出现的“游客模式”提示就是这里没填导致的。
• 根节点的 appid 是 DCloud 的 AppID，和微信小程序的 AppID 不是一回事，不要填混。
• 改完要保存并重新运行项目才生效。

代码三：pages.json 页面注册与导航栏标题

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

要点解释：

• pages 数组里第一个就是项目启动页，运行到浏览器或小程序时打开的就是它。
• 新建的页面必须在 pages 里注册，否则访问不到、也不会被编译进去，这是最容易漏的一步。
• 单个页面的标题写在该页的 style.navigationBarTitleText，全局默认值写在 globalStyle 里，页面配置优先级更高。
• path 不带 .vue 后缀，也不带开头斜杠，写错就白屏。
• JSON 里不能写注释，多一个逗号整个项目都会编译报错。

常见错误

1. 装完 HBuilderX 后每次都要进安装目录里翻 exe 才能打开

• 现象：桌面、开始菜单都找不到图标，每次启动很麻烦。
• 原因：首次关闭窗口时弹出的"是否创建快捷方式"提示被直接关掉/点了否。
• 修法：找到解压目录里的 HBuilderX.exe，右键→发送到→桌面快捷方式；或重新解压一份，关闭时点"是"。

2. 创建出来的项目里没有 .vue 文件，或初始代码一大堆看不懂

• 现象：展开项目后结构跟课上不一样，找不到 template/script/style。
• 原因：新建项目时框架没选 uni-app（选成了别的），或模板选了非"默认模板"。
• 修法：删掉重建：文件→新建→项目→选 uni-app→模板选"默认模板"→Vue 版本选 3。

3. 点"运行到小程序"后微信开发者工具没自动打开，或提示找不到工具

• 现象：HBuilderX 一直等待/报找不到微信开发者工具；或打开了但连不上。
• 原因：① 没在 HBuilderX 里配置微信开发者工具的安装目录；② 微信开发者工具的"服务端口"处于关闭状态。
• 修法：HBuilderX 设置里把工具安装路径填成目录（到 .../微信web开发者工具/ 为止，不要带 .exe）；微信开发者工具→设置→安全设置→打开服务端口，之后不用再管。

4. 一看见控制台红色文字就以为代码报错了

• 现象：编译时满屏红字，以为项目跑不起来。
• 原因：HBuilderX 的红色是"强调提示"而非错误标识，跟 VS Code 的红色波浪线语义不同。
• 修法：读文字内容判断，出现"编译完成/已启动"即正常；真错误会明确写 error/失败。

5. 运行到手机时菜单里只有"下载真机运行插件"，看不到设备

• 现象：运行→运行到手机或模拟器，没有安卓/iOS 选项，或没有设备列表。
• 原因：① 真机运行插件未安装；② 手机没开 USB 调试；③ 电脑缺 ADB 驱动；④ 数据线是纯充电线。
• 修法：先点下载插件并等它装完；手机 设置→系统→关于手机→连点版本号 开启开发者模式→开发者选项里打开 USB 调试；用 ADBDriverInstaller 选中设备点 Install 装驱动后重启 HBuilderX；仍不行就换一根能传数据的线。

6. 昨天还能连手机，今天突然连不上

• 现象：设备列表空、手机上不弹授权框。
• 原因：USB 授权状态失效/驱动异常。
• 修法：按顺序试——撤销 USB 调试授权→拔线重插→关掉再打开 USB 调试→重启手机→重启 HBuilderX。

7. 小程序跑起来提示"游客模式"

• 现象：能运行但功能受限，提示未绑定 AppID。
• 原因：manifest.json 里微信小程序 AppID 没填。
• 修法：打开 manifest.json（可视化界面即可）→微信小程序配置→填入自己的 AppID，重新运行。

8. 从插件市场装插件时卡在登录/装不上

• 现象：点"下载"提示需要登录，或安装无反应。
• 原因：没有 DCloud 账号，或网络不稳定导致下载失败。
• 修法：先在 HBuilderX 右上角注册并登录账号，再从"插件安装→前往插件市场"一键导入；网络差时改用插件详情页的"离线下载"手动安装。

练习

1. 卸载/关闭 HBuilderX 后重新打开，确认桌面已生成快捷方式，并把主题设为深色、快捷键方案切换为 VS Code。
2. 在 F:\第一天\code\ 下新建一个名为 uni-app-demo 的项目，要求：框架 uni-app、默认模板、Vue3，创建后指出哪几个文件分别对应 template / script / style。
3. 分别把该项目运行到 Chrome 和微信小程序，用浏览器手机模式对比两端页面是否一致，并把微信小程序 AppID 补进 manifest.json 后重新运行，确认不再是游客模式。
4. 用 ADBDriverInstaller + USB 调试把项目跑到自己手机上（无安卓机可只写步骤清单并说明每步的作用），成功后点掉手机上的授权弹窗并记录"允许"与"拒绝"的差别。
5. 通过插件市场安装 Prettier，然后故意把一段代码缩进打乱，用格式化功能还原，并在"已安装的插件"里确认。

课堂画面

原视频对照

#	视频	时长
1	HBuilderX安装	02:33
2	HBuilderX创建项目	04:19
3	HBuilderX运行项目	13:04
4	微信小程序运行问题	03:07
5	HBuilder真机运行环境-1	12:32
6	HBuilder真机运行环境-2	02:36
7	真机环境问题总结	07:38
8	HBuilder安装插件	08:24

小结

1. HBuilderX 装完第一件事是建快捷方式，第二件事是把主题和快捷键方案切到 VS Code，减少切换成本。
2. 新建项目的三个关键选择：框架 uni-app、模板默认、Vue 版本 3；项目目录要放在自己规划好的学习目录下，别乱丢。
3. HBuilderX 与 VS Code 是取舍关系：VS Code 写代码顺手但无法运行到手机/模拟器；HBuilderX 界面一般但能一键多端运行，做 App 时必须用它。
4. 运行到浏览器零配置；运行到小程序需要两处前提——HBuilderX 里配好工具目录、微信开发者工具里打开服务端口，配一次长期有效。
5. 运行到手机是最容易卡住的环节，排查顺序固定为：插件 → USB 调试 → 驱动 → 数据线 → 授权 → 重启，环境问题与代码无关，不要怀疑项目。
6. HBuilderX 的红色提示不等于报错，判断成败要看是否出现"编译完成""已启动"等字样。
7. 云打包、插件市场都依赖 DCloud 账号，账号注册应尽早完成，后面装插件、上线都绕不开。
8. 一套代码同时产出 H5、各类小程序和 App，这是 uni-app 的核心价值；日常开发以 H5 为主，真机只在阶段性验证时使用，跑不通真机不影响后续学习。