简介这份资源面向刚接触 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 装好后按⌘ShiftP调出命令面板输入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。插件名安装方式作用EmmetPackage Control 搜索安装HTML/CSS 快速展开PyV8手动下载二进制放入 osx-p3Emmet 的 JS 引擎依赖HTML5Package Control 搜索安装HTML5 语法支持CSS3Package Control 搜索安装CSS3 语法高亮与补全jQueryPackage Control 搜索安装jQuery API 补全jsFormatPackage Control 搜索安装JS 代码格式化HTML5、CSS3、JS、jQuery、jsFormat 这几个插件的安装方式完全一致⌘ShiftP→Install Package→ 输入插件名 → 点击。装完不需要额外配置重启即生效。jsFormat 的快捷键默认是CtrlAltF格式化当前 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 *.sh755的含义是文件所有者有读、写、执行权限同组用户和其他用户有读、执行权限。Tomcat 的启动脚本必须有执行权限否则./startup.sh会报Permission denied。启动 Tomcat./startup.sh终端输出Tomcat startedDock 栏出现咖啡图标说明启动成功。浏览器访问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 rootlocalhost 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 21 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.shchmod 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备份一份出问题能快速回滚。从那以后我每次搭完环境都强制跑一遍这个检查脚本确认每个组件都活着再开始写业务代码。希望帮到你。本文还有配套的精品资源点击获取