简介：这份资源面向刚接触 Mac 平台的前端初学者与需要重新搭建开发环境的开发者，系统整理了 Mac 下常用前端开发软件与运行环境的安装流程，帮助读者在一台新 Mac 上快速配齐从代码编辑到后端运行、数据库管理的完整工具链。资源包共 1 个 docx 文档，约 4.5MB，以图文步骤形式记录操作过程，便于对照执行。内容覆盖 Sublime Text 编辑器及其 Package Control、Emmet、PyV8、HTML5、CSS3、JS、jQuery 等插件的安装配置，并延伸至 Java SDK、Tomcat Web 服务器与 Navicat 数据库管理工具的部署，同时涉及 MySQL 安装与初始密码记录等细节。目前已有 2164 人学习下载，适合希望减少环境配置踩坑、按图索骥完成 Mac 前端开发环境搭建的读者参考。

1. 从一台裸机 Mac 到能跑前端项目：这套环境到底装了什么

刚拿到一台新 Mac，或者重装完系统，第一件事不是打开浏览器，而是把开发环境搭起来。这套流程里包含 Sublime Text 加插件体系、Java SDK、Tomcat 和 MySQL，看起来像是后端那一套，但前端开发同样绕不开——本地起个服务、连个数据库、跑个构建脚本，缺一个都卡住。我见过太多人卡在 Package Control 装不上、PyV8 下载失败、Tomcat 权限不够这些地方，一折腾就是半天。这篇笔记把每个环节的实操步骤、参数含义和常见翻车点拆开讲，新手能照着走，熟手能直接跳到避坑章节看边界情况。整套装完，你手里会有一个能写代码、能起服务、能连库的本地环境，后续换 VSCode 还是继续用 Sublime 都不影响底层依赖。

2. Sublime Text 与 Package Control：插件管理器的正确打开方式

2.1 为什么先装 Package Control 而不是手动下插件

Sublime Text 本身是个轻量编辑器，真正让它变成前端利器的是一整套插件生态。但插件不是从官网一个个下 zip 包解压就完事——版本依赖、更新、卸载残留，手动管理迟早出问题。Package Control 是社区维护的插件管理器，装完它之后，Emmet、HTML5、CSS3、JS、jQuery、jsFormat 这些都能一条命令搞定。常见做法是：先装编辑器本体，再装 Package Control，最后批量装插件。顺序不能反，因为 Package Control 本身也是通过控制台命令安装的。

安装 Sublime Text 本体很简单：下载 dmg，双击，把图标拖进 Applications，从 Launchpad 启动。未注册版会弹注册提示，关掉就行，不影响功能。真正容易卡住的是下一步。

2.2 用控制台命令装 Package Control 的完整流程

打开 Sublime Text，按Ctrl+~（键盘左上角 Esc 下面那个键）调出控制台。注意是Ctrl不是Command，这个快捷键在 Mac 上容易按错。控制台出现后，把下面这段 Python 代码整段粘贴进去，回车执行：

import urllib.request, os pf = 'PackageControl.sublime-package' ipp = sublime.installed_packages_path() urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler() ) ) open(os.path.join(ipp, pf), 'wb').write( urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20') ).read() )

这段代码的逻辑是：先拿到 Sublime 的插件安装目录installed_packages_path()，然后用urllib从sublime.wbond.net下载PackageControl.sublime-package文件，写入到插件目录。ProxyHandler()这里传空参数，表示不走额外代理配置，直接用系统网络。下载完成后，必须完全退出 Sublime（⌘+Q），不是关窗口，再重新打开。菜单栏里出现Package Control这一项，才算装好。

注意：如果公司网络有拦截，下载会静默失败，控制台不报错但菜单栏不会出现 Package Control。换网络环境重试，或者手动下载.sublime-package文件放到插件目录。

2.3 Emmet 与 PyV8：自动补全背后的依赖链

Package Control 装好后，按⌘+Shift+P调出命令面板，输入Install Package，回车，再输入emmet，点击出现的插件名。状态栏会显示安装进度，装完自动弹出说明文档。这时候新建一个.html文件，输入!再按Tab，如果正常展开成 HTML5 骨架，说明 Emmet 生效了。

但很多人到这一步会翻车：按Tab没反应，或者提示缺少 PyV8。原因是 Emmet 的某些功能依赖 PyV8 这个 JavaScript 引擎，而 PyV8 的二进制包不在 Package Control 的默认源里。手动补装流程如下：

打开浏览器访问https://github.com/emmetio/pyv8-binaries，点绿色按钮下载 ZIP。解压后找到pyv8-osx-p3.zip，再解压，里面有两个文件。回到 Sublime，通过Package Control菜单找到Browse Packages，进入osx-p3文件夹，把这两个文件粘贴进去。如果文件夹里已有旧内容，先清空再粘贴。重启 Sublime，等状态栏静止不动，再试!+Tab。

HTML5、CSS3、JS、jQuery、jsFormat 这几个插件的安装方式完全一致：⌘+Shift+P→Install Package→ 输入插件名 → 点击。装完不需要额外配置，重启即生效。jsFormat 的快捷键默认是Ctrl+Alt+F，格式化当前 JS 文件。

3. Java SDK 与 Tomcat：本地服务跑起来的底层依赖

3.1 JDK 安装与版本验证

前端为什么需要 Java？两个场景：一是 Tomcat 依赖 JRE 运行，二是部分构建工具链（比如老版本的 Jenkins、SonarQube）需要 JDK。下载jdk-7u71-macosx-x64.dmg，双击后会出现一个黄色图标，再双击它才进入安装向导。点继续、安装，系统会要求输入 Mac 账号密码。装完后打开终端，输入：

java -version

如果输出java version "1.7.0_71"之类的信息，说明 JDK 装好了。如果提示command not found，检查/Library/Java/JavaVirtualMachines/目录下有没有对应的 JDK 文件夹。常见问题是安装包版本和系统版本不匹配，比如在 M 系列芯片上装 x64 的包，需要通过 Rosetta 转译，性能有损耗但能用。

3.2 Tomcat 解压版部署与权限修复

Tomcat 用解压版比安装版更灵活，改配置、换版本都方便。从官网下载apache-tomcat-6.0.33.tar.gz，解压后把文件夹移到用户主目录下，比如/Users/你的用户名/apache-tomcat-6.0.33。进入终端，切到 bin 目录：

cd ~/apache-tomcat-6.0.33/bin ls -l *.sh

查看startup.sh、shutdown.sh等脚本的权限。如果第一列没有rwx，执行：

chmod 755 *.sh

755的含义是：文件所有者有读、写、执行权限，同组用户和其他用户有读、执行权限。Tomcat 的启动脚本必须有执行权限，否则./startup.sh会报Permission denied。

启动 Tomcat：

./startup.sh

终端输出Tomcat started，Dock 栏出现咖啡图标，说明启动成功。浏览器访问http://127.0.0.1:8080，看到 Tomcat 默认页即部署完成。停止服务用：

./shutdown.sh

注意：如果 8080 端口被占用，启动会失败但不报错。用lsof -i :8080查占用进程，杀掉或改 Tomcat 的conf/server.xml里的Connector port。

3.3 MySQL 安装与初始密码处理

下载mysql-5.7.10-osx10.10-x86_64.dmg，双击后同样先双击黄色图标进入安装向导。一路继续、安装，系统会弹出一个消息框，里面有一串临时密码，比如ggkttR87_1yR。这个密码只显示一次，必须复制或截图保存。装完后 MySQL 服务默认启动，可以通过系统偏好设置里的 MySQL 面板查看状态。

首次登录用：

mysql -u root -p

粘贴临时密码。登录成功后立刻改密码：

ALTER USER 'root'@'localhost' IDENTIFIED BY '你的新密码'; FLUSH PRIVILEGES;

FLUSH PRIVILEGES是让权限表立即生效，不改这行有时候新密码不生效。如果临时密码丢了，需要卸载 MySQL 重装，或者进入安全模式跳过权限验证——后者步骤繁琐，建议直接重装。

4. 避坑与排查：装环境时最容易翻车的五个地方

4.1 Package Control 装完菜单栏不出现

现象：控制台代码执行后没报错，但菜单栏里找不到Package Control。原因：网络请求被拦截，或者 Sublime 没有完全退出重启。解决：确认⌘+Q完全退出，不是关窗口。换网络环境重试，或者手动下载PackageControl.sublime-package放到~/Library/Application Support/Sublime Text 3/Installed Packages/目录。

4.2 Emmet 按 Tab 没反应

现象：输入!后按Tab，没有展开 HTML 骨架，状态栏可能提示缺少 PyV8。原因：PyV8 二进制包未安装，或者版本与系统不匹配。解决：按 2.3 节的步骤手动下载 PyV8，放入osx-p3文件夹。如果仍无效，检查 Sublime 的Packages目录下是否有Emmet文件夹，没有的话重新安装 Emmet。

4.3 Tomcat 启动报 Permission denied

现象：执行./startup.sh提示权限不足。原因：解压后的.sh文件默认没有执行权限。解决：chmod 755 *.sh给所有脚本加执行权限。如果只想给单个文件加，把*.sh换成具体文件名。

4.4 MySQL 临时密码丢失

现象：安装完没保存临时密码，无法登录。原因：密码只显示一次，关掉消息框就没了。解决：卸载 MySQL 重装，或者用--skip-grant-tables模式启动 MySQL 后重置密码。后者需要改配置文件、重启服务、执行 SQL，步骤较多，重装更快。

4.5 java -version 输出版本与安装版本不一致

现象：装了 JDK 7，但java -version显示的是系统自带的更高版本。原因：Mac 可能预装了多个 JDK，/usr/bin/java指向的是系统默认版本。解决：用/usr/libexec/java_home -V查看所有已安装的 JDK，通过export JAVA_HOME=$(/usr/libexec/java_home -v 1.7)切换版本。这行可以写进~/.bash_profile或~/.zshrc持久化。

5. 环境验证与日常维护：一套脚本把状态查清楚

装完不代表能用，日常开发中环境会漂移——JDK 被系统更新覆盖、Tomcat 端口被占、MySQL 服务没启动。我习惯写一个检查脚本，每次换机器或重装后跑一遍，省得一个个命令敲。下面这个 bash 脚本覆盖了本文涉及的所有组件：

#!/bin/bash # 环境状态检查脚本 echo "=== Java 版本 ===" java -version 2>&1 echo "" echo "=== Tomcat 进程 ===" ps aux | grep tomcat | grep -v grep echo "" echo "=== 8080 端口占用 ===" lsof -i :8080 echo "" echo "=== MySQL 服务状态 ===" mysqladmin -u root -p status 2>/dev/null || echo "MySQL 未运行或密码错误" echo "" echo "=== Sublime 插件目录 ===" ls ~/Library/Application\ Support/Sublime\ Text\ 3/Installed\ Packages/ 2>/dev/null | head -20

脚本逻辑很直白：java -version看 JDK 是否在 PATH 里；ps aux | grep tomcat确认 Tomcat 进程活着；lsof -i :8080查端口冲突；mysqladmin status验证 MySQL 连接；最后列出 Sublime 已安装的插件包。把这段保存为check_env.sh，chmod +x后随时执行。

参数调整方面，如果你把 Tomcat 端口改成了 9090，脚本里的8080要同步改。MySQL 的-u root -p如果换了用户名也要改。Sublime 的路径在 Sublime Text 4 里是Sublime Text而不是Sublime Text 3，根据实际版本调整。

还有一个容易忽略的点：这套环境里的 JDK 7、Tomcat 6、MySQL 5.7 都是较老的版本，新项目可能要求 JDK 8+、Tomcat 9+、MySQL 8+。版本升级时，Tomcat 的server.xml配置格式有变化，MySQL 8 的密码认证插件从mysql_native_password改成了caching_sha2_password，旧客户端连不上需要额外配置。我一般会在升级前把旧版本的conf目录和my.cnf备份一份，出问题能快速回滚。

从那以后我每次搭完环境，都强制跑一遍这个检查脚本，确认每个组件都活着再开始写业务代码。希望帮到你。

本文还有配套的精品资源，点击获取