首次启动hbuilderx必须完成三项配置：切换深色主题、调大字号并选用fira code字体、手动设置默认项目路径；接着创建普通项目并选“基本html项目”模板；右键新建index.html，输入基础内容；运行时优先选“运行到浏览器”，需手动配置浏览器路径；最后启用代码提示并强制选择vue 3版本以激活html标签补全。

hbuilderx新手入门教程 - php中文网

刚下载完HBuilderX，双击打开却卡在欢迎界面不知从哪下手？新建项目后点运行没反应，代码敲一半没提示，连基础HTML文件都找不到入口——这不是你手速问题，是初始配置没走对关键几步。

首次启动必须完成的三项配置

双击HBuilderX.exe后，别急着新建项目。先处理这三个影响后续所有操作的基础项：

点击右上角【设置】→【编辑器设置】→【外观】，将主题切换为【Dark（深色）】：浅色背景长时间编码会导致视觉疲劳，尤其下午三点后眼睛会明显发酸。

在【编辑器设置】→【字体】中，把字号调到16px，字体选Fira Code：默认14px在2K屏上几乎要看瞎，而Fira Code能自动连写=>、===等符号，减少误读概率。

进入【工具】→【设置】→【常规】→【默认项目路径】，把路径手动改成D:\Projects\HBuilder（Windows）或/Users/xxx/Dev/hb-projects（Mac）：【千万别用默认的“文档/HBuilderProjects”】——C盘机械硬盘加载项目慢三倍，保存、编译、预览全卡顿。

创建第一个网页项目

这一步要快准稳，错一个选项后面全得重来：

文件→新建→项目→选择“普通项目”→项目名称填my-first-web→项目路径选刚才设好的D:\Projects\HBuilder→模板选“基本HTML项目”→编码确认是UTF-8→点击创建。

注意：如果模板列表里没有“基本HTML项目”，说明首次启动时没勾选Vue 3支持插件，得关掉软件重装一次并强制勾选。

创建完成后，左侧项目管理器会出现my-first-web文件夹，里面已自动生成index.html、css、js三个文件夹。

快速写出可运行的首页代码

右键my-first-web→新建→HTML文件→命名为index.html→回车确认。

HBuilderX会自动生成标准HTML5骨架，光标停在

标签内。直接输入：

你好，世界！

这是用HBuilderX写的第一个页面

HBuilderX（Linux）

HBuilderX 是由 DCloud 推出的一款轻量级前端开发工具，在 Linux 系统上主要用于 Web 开发与跨平台应用开发，尤其适合 Vue 和 uni-app 相关项目。

下载

。

这一步操作起来很简单，直接把文字敲进去就行，不用管head里的meta和link——基础项目不需要外部样式，浏览器默认渲染足够看清效果。

三种运行方式及对应配置

方法一：运行到浏览器（最常用）

点击顶部菜单【运行】→【运行到浏览器】→选Chrome或Edge。如果报错“无法启动浏览器”，说明HBuilderX没找到浏览器安装路径。

此时点【运行】→【配置Web服务器】→在Chrome/Edge路径栏粘贴实际exe地址：Windows一般是C:\Program Files\Google\Chrome\Application\chrome.exe，Mac在/Applications/Google Chrome.app/Contents/MacOS/Google Chrome。

方法二：运行到内置浏览器（免跳转）

点击【运行】→【运行到内置浏览器】→弹窗提示“需要安装内置浏览器插件”，点确定下载安装，完成后重启HBuilderX再试。

方法三：运行到小程序模拟器（仅限uni-app项目）

此方法不适用于当前HTML项目，强行选择会报错“缺少manifest.json”。若你后续创建uni-app项目，需先在项目根目录放好manifest.json，再配置微信开发者工具路径，并在微信开发者工具中开启【安全设置→服务端口】。