Vue3自定义指令实战：从拖拽组件到权限按钮，手把手教你封装自己的v-move和v-has
2026/6/10 15:02:38
行走编程：把你的 Mac 变成一台随身 AI 开发工作站
前几个月，我发现自己的编程习惯正在发生变化。
以前写代码的时候，我必须坐在电脑前：
打开 IDE 敲代码 调试 提交开发工作和电脑被牢牢绑定在一起。
但 AI 编程工具出现以后，这种关系开始改变。
现在很多时候，我并不是在「写代码」。
而是在：
描述需求 解释业务规则 审查实现方案 检查 AI 的输出结果真正敲代码的工作，越来越多地交给 Claude Code、Codex 等 AI Agent 完成。
渐渐地，我意识到一个问题：
如果我的主要工作已经从「写代码」变成了「给 AI 下任务」，那我为什么还必须一直坐在电脑前？
有一天，我带孩子去公园。
孩子在玩滑梯，我坐在旁边。
脑子里突然想到一个功能设计。
按照以前的习惯，我只能：
记下来 回家 打开电脑 再开始开发但如果 AI 已经能帮我写代码，那么理论上我只需要：
告诉 AI 我要什么剩下的事情交给它完成。
于是我产生了一个想法：
能不能让我的 Mac 一直运行在家里？
然后我用手机随时连接进去。
想到一个需求时，直接拿出手机：
分析这个模块的数据流。 检查 ReportScreen 的状态管理问题。 帮我重构这个页面。 先给出方案，不要改代码。 根据设计稿完成剩余功能。甚至直接使用手机语音输入：
“帮我检查最近这个需求的实现， 看看有没有边界条件遗漏。”AI 开始工作。
而我继续散步。
过一会儿再拿出手机：
查看分析结果 审核代码 决定是否执行这其实已经不是传统意义上的“坐在电脑前编程”。
而是一种新的工作方式：
行走编程（Walking Programming）
在这种模式下：
人负责思考 AI 负责执行 人负责决策 AI 负责实现 人负责审核 AI 负责生产电脑不再是工作的地点。
电脑只是一个运行 AI 的服务器。
而手机成为了随身携带的控制器。
为了实现这种工作方式，我最终搭建了下面这套环境：
Mac └── code-server :8080 ↓ frp 云服务器 └── frps :18080（仅内部访问） ↓ nginx :443 └── Let's Encrypt ↓ https://code.xxx.com最终效果是：
家里的 Mac 持续运行 Claude Code 持续运行 Codex 持续运行 项目代码持续存在 tmux 保持所有会话 手机随时连接无论是在：
地铁上 咖啡馆里 公园里 排队时 陪孩子时都可以打开浏览器。
进入自己的 VS Code。
给 AI 下达新的任务。
查看 AI 的工作成果。
继续推进项目。
接下来，我将一步一步介绍如何搭建这套属于自己的 AI 行走编程环境。
一、目标
我们希望实现这样一个架构：
Mac └── code-server :8080 ↓ frp 云服务器 └── frps :18080（仅本机访问） ↓ nginx :443 └── Let's Encrypt HTTPS ↓ https://code.xxx.com最终效果是：
在 Mac 上运行 code-server、Claude Code、Codex、Node.js、pnpm、Git 等开发环境。
然后在手机、平板或其他电脑的浏览器里访问：
https://code.xxx.com就可以打开一个网页版 VS Code，在里面操作项目、打开终端、运行 Claude Code / Codex，并通过手机语音输入给 AI 编程工具下指令。
二、为什么不用 VS Code Remote Tunnel？
VS Code Remote Tunnel 很方便，但在中国网络环境下可能比较慢，因为它依赖官方远程隧道服务。
code-server + frp + Nginx 的优势是：
1. 服务跑在自己的 Mac 上 2. 中转走自己的云服务器 3. 访问入口由自己的 Nginx 控制 4. HTTPS 证书可控 5. 可以加 Nginx 密码验证 6. 速度和稳定性更可控三、准备条件
你需要准备：
1. 一台 Mac 2. 一台云服务器 3. 一个域名，例如 code.xxx.com 4. Mac 上已经安装 code-server 5. 云服务器上安装 frps、nginx、certbot 6. Mac 上安装 frpc域名需要解析到云服务器公网 IP。
例如：
code.xxx.com A记录 你的云服务器公网IP四、Mac 上启动 code-server
1. 安装 code-server
如果使用 Homebrew：
brewinstallcode-server2. 启动 code-server
假设项目目录是：
~/projects/mint-project-new可以启动：
code-server ~/projects/mint-project-new默认服务地址通常是：
http://127.0.0.1:80803. 查看配置
配置文件一般在：
~/.config/code-server/config.yaml可以查看：
cat~/.config/code-server/config.yaml示例：
bind-addr:127.0.0.1:8080auth:passwordpassword:your-code-server-passwordcert:false这里保持127.0.0.1:8080即可。
因为 code-server 只需要被 Mac 本机的 frpc 访问，不需要直接暴露到局域网或公网。
五、云服务器安装 frps
1. 下载 frp
去 frp 的 GitHub Release 下载对应系统版本。
例如 Linux amd64：
wgethttps://github.com/fatedier/frp/releases/download/v0.xx.x/frp_0.xx.x_linux_amd64.tar.gztar-zxvffrp_0.xx.x_linux_amd64.tar.gzcdfrp_0.xx.x_linux_amd642. 配置 frps
新建或修改：
frps.toml示例：
bindPort = 7000启动 frps：
./frps-cfrps.toml也可以用 pm2 或 systemd 后台运行。
pm2 示例：
pm2 start ./frps--namefrps ---cfrps.toml六、Mac 上配置 frpc
Mac 上新建：
frpc.toml示例：
serverAddr = "你的云服务器公网IP" serverPort = 7000 [[proxies]] name = "code-server" type = "tcp" localIP = "127.0.0.1" localPort = 8080 remotePort = 18080含义是：
Mac 本机 127.0.0.1:8080 ↓ frpc ↓ 云服务器 127.0.0.1:18080 / 0.0.0.0:18080启动 frpc：
./frpc-cfrpc.toml如果你希望长期运行，也可以用 pm2：
pm2 start ./frpc--namefrpc-code-server ---cfrpc.toml七、重要安全点：不要开放 18080
frp 映射出来的18080不应该直接给公网访问。
云服务器防火墙只开放：
80 443 7000不要开放：
18080最终应该让外部用户只能访问：
https://code.xxx.com然后由 Nginx 反向代理到：
http://127.0.0.1:18080八、云服务器安装 Nginx
Ubuntu / Debian：
sudoaptupdatesudoaptinstallnginx-y检查 Nginx：
sudosystemctl status nginx九、配置 Nginx 反向代理
新建配置文件：
sudovim/etc/nginx/sites-available/code-server先写 HTTP 版本：
server { listen 80; server_name code.xxx.com; location / { proxy_pass http://127.0.0.1:18080; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } }启用配置：
sudoln-s/etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/code-server检查配置：
sudonginx-t重载 Nginx：
sudosystemctl reload nginx十、申请 Let’s Encrypt HTTPS 证书
1. 安装 certbot
sudoaptupdatesudoaptinstallcertbot python3-certbot-nginx-y2. 申请证书
sudocertbot--nginx-dcode.xxx.com过程中会让你输入邮箱、同意协议，并选择是否将 HTTP 重定向到 HTTPS。
建议选择：
Redirect申请成功后，证书默认会放在：
/etc/letsencrypt/live/code.xxx.com/fullchain.pem /etc/letsencrypt/live/code.xxx.com/privkey.pem不需要手动复制证书。
Certbot 会自动修改 Nginx 配置。
十一、最终 Nginx 配置示例
最终配置大概是：
server { server_name code.xxx.com; location / { proxy_pass http://127.0.0.1:18080; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } listen 443 ssl; ssl_certificate /etc/letsencrypt/live/code.xxx.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/code.xxx.com/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; } server { listen 80; server_name code.xxx.com; return 301 https://$host$request_uri; }检查：
sudonginx-tsudosystemctl reload nginx十二、再加一层 Nginx 密码验证
因为 code-server 是开发环境，里面可能有代码、密钥、终端、AI 编程工具，所以建议再加一层 Nginx Basic Auth。
1. 安装 htpasswd
sudoaptinstallapache2-utils-y2. 创建账号密码
例如用户名是admin：
sudohtpasswd-c/etc/nginx/.htpasswd admin输入密码即可。
3. 修改 Nginx 配置
在location /里加入：
auth_basic "Private Code Server"; auth_basic_user_file /etc/nginx/.htpasswd;完整示例：
server { server_name code.xxx.com; location / { auth_basic "Private Code Server"; auth_basic_user_file /etc/nginx/.htpasswd; proxy_pass http://127.0.0.1:18080; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } listen 443 ssl; ssl_certificate /etc/letsencrypt/live/code.xxx.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/code.xxx.com/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; } server { listen 80; server_name code.xxx.com; return 301 https://$host$request_uri; }检查并重载：
sudonginx-tsudosystemctl reload nginx现在访问：
https://code.xxx.com会先弹出浏览器账号密码框。
通过后，才会进入 code-server 登录页。
十三、在 code-server 中使用 Claude Code / Codex
code-server 本质上是浏览器版 VS Code。
Claude Code 和 Codex 本质上是终端 CLI 工具。
所以只要它们在 Mac 上能运行，在 code-server 的 Terminal 里也能运行。
进入 code-server 后，打开 Terminal：
whichclaudewhichcodex如果能看到路径，例如：
/opt/homebrew/bin/claude /opt/homebrew/bin/codex就可以直接运行：
claude或者：
codex这时它们实际运行在你的 Mac 上。
手机只是通过浏览器远程操作。
十四、推荐配合 tmux 使用
手机网络可能断开，浏览器也可能被系统杀后台。
为了避免 Claude Code / Codex 会话中断，推荐使用 tmux。
安装：
brewinstalltmux进入项目：
cd~/projects/mint-project-new创建 tmux 会话：
tmux new-sai-code然后在 tmux 里运行：
claude或者：
codex下次重新连接：
tmux attach-tai-code这样即使手机断线，AI 编程工具仍然在 Mac 上继续运行。
十五、最终访问链路
最终链路是：
手机浏览器 ↓ https://code.xxx.com ↓ Nginx 443 HTTPS ↓ Nginx Basic Auth ↓ 127.0.0.1:18080 ↓ frps ↓ frpc ↓ Mac code-server 127.0.0.1:8080 ↓ VS Code Web Terminal ↓ Claude Code / Codex这套方案的核心思想是：
公网只暴露 HTTPS 入口 frp 映射端口不直接暴露 code-server 不直接暴露 Nginx 负责 HTTPS 和第一层认证 code-server 负责第二层认证 Claude Code / Codex 运行在 Mac 本机十六、常见问题
1. 为什么不直接开放 8080？
不建议。
code-server 是开发环境，一旦暴露，风险很高。
更安全的做法是：
code-server 只监听 Mac 本机 127.0.0.1:8080 frp 转发到云服务器 云服务器只通过 Nginx HTTPS 暴露2. 为什么 Nginx 要配置 WebSocket？
code-server 使用 WebSocket 做终端、编辑器通信。
所以必须有：
proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";否则可能出现页面能打开，但终端异常、连接断开、加载失败等问题。
3. Basic Auth 有必要吗？
有必要。
最终建议至少三层保护：
第一层：Nginx Basic Auth 第二层：code-server password 第三层：Claude / Codex 自己的登录或 API Key4. 手机语音输入能不能用？
可以。
手机输入法的语音输入会先转成文字，再输入到网页中的编辑器或终端。
尤其适合在 Claude Code / Codex 中输入自然语言任务，例如：
分析这个页面的数据流，先不要修改代码。或者：
基于当前代码，找出 ReportScreen 里状态管理最混乱的地方，并给出重构计划。5. 适合在手机上直接写代码吗？
不太适合。
手机更适合：
1. 查看代码 2. Review AI 修改 3. 给 Claude Code / Codex 下任务 4. 看运行日志 5. 做小范围修改 6. 远程重启服务不适合长时间精细编辑代码。
十七、总结
这套方案把 Mac 变成一个自己的 AI 编程工作站。
你可以在 Mac 上运行完整开发环境：
VS Code Node.js pnpm Git Claude Code Codex 项目代码然后通过：
code-server + frp + Nginx + HTTPS把它安全地暴露给移动端浏览器。
最终你可以在手机上打开：
https://code.xxx.com用浏览器进入 VS Code 界面，打开终端，使用 Claude Code / Codex，通过语音输入给 AI 编程工具下任务。
对于 AI 编程来说，这种方式特别适合：
白天在电脑上开发 晚上用手机继续查看 外出时远程让 AI 分析问题 临时用语音给 AI 下任务 长任务交给 tmux 保持运行它不是为了让手机变成完整电脑，而是让手机成为一个可以随时接入 AI 编程工作站的控制端。