癌症治疗药物的五次革命性突破
2026/9/14 2:50:53
用pnpm create vue@latest创建 Vue 3 项目时，终端会连续抛出 TypeScript、JSX、Vue Router、Pinia、Vitest、ESLint、Prettier 等十个交互选项，新手很容易在要不要开启上犹豫。我的解决办法是先把 Codex 的模型通道接到 TaoToken（https://taotoken.net/?utm_source=taotoken_aicg_blog_end），让它帮我逐项解读 create-vite 每个开关的含义，再生成一条适合自己项目的创建指令。TaoToken 在这里只负责给 Codex 提供稳定的 API 通道和 Key，真正的选项判断、命令生成全部由 Codex 结合 Vue 3 项目经验完成。整个过程不用反复切工具，也不用对着终端猜答案。
1. create-vite 十连问之前，先把 Codex 接到 TaoToken
1.1 在 ~/.codex/config.toml 里注册 TaoToken 供应商
先打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 注册并创建 API Key，把生成的密钥复制下来。接着找到 Codex 的配置文件~/.codex/config.toml，把 provider 配置追加进去：
model = "YOUR_MODEL_ID" [model_providers.taotoken] name = "TaoToken" base_url = "https://taotoken.net/api" env_key = "TAOTOKEN_API_KEY"然后在 shell 配置文件（~/.zshrc或~/.bashrc）里导出真实 Key：
export TAOTOKEN_API_KEY="YOUR_API_KEY"有两个细节容易出错：base_url填https://taotoken.net/api，末尾不要加/v1；model字段不要靠记忆填版本号，先到 TaoToken 模型广场复制当前可用的模型 ID 再写进去。TaoToken 扮演的是统一 API 兼容通道，Codex 经由这个 provider 与它通信，后续 create-vite 的选项解读才能正常返回。
1.2 让 Codex 先逐项解释 create-vite 的交互选项
配置完 provider 后重启终端，进入准备创建项目的目录，执行codex命令开一个会话，把下面这段提示词贴进去：
我要用 pnpm create vue@latest 创建 Vue 3 项目。这个命令会交互式询问：项目名称、是否开启 TypeScript、是否启用 JSX、是否引入 Vue Router、是否引入 Pinia、是否引入 Vitest、是否引入端到端测试工具、是否引入 ESLint、是否引入 Prettier、是否引入 Vue DevTools 7 扩展。请你逐项解释它们各自的作用，适合什么场景，不开会有什么影响。Codex 走的是 TaoToken 提供的通道，返回的内容会落在 create-vite 这个具体工具上，而不是泛泛而谈的 Vue 概念。如果不想逐条读文字，可以直接让它给出一张决策表，再按表里的组合决定自己的选择。这一步把十道选择题变成了一次有依据的决策，比对着终端发懵要快很多。
2. 十个交互选项的决策表与创建指令生成
2.1 create-vite 选项解读表
Codex 对各项开关的解释可以汇总成下面这张表。这里不照抄官方文档，而是按 Vue 3 项目常见的业务场景来写，方便你对照自己的情况做选择。
| 交互项 | Codex 的解读 | 建议 |
|---|---|---|
| 项目名称 | 同时作为目录名和 package.json 的 name 字段 | 用短横线命名，例如 vue-project |
| TypeScript | 生成 .ts 文件和 tsconfig.json，提供类型检查 | 团队熟悉就开，不熟可以暂缓 |
| JSX | 允许在 Vue 组件里用 JSX 语法描述渲染 | 纯 Vue 项目不需要，习惯 React 语法可开 |
| Vue Router | 生成 src/router/index.ts 和 views 目录，提供路由能力 | 多页面项目建议开 |
| Pinia | 生成 src/stores/counter.ts，启用状态管理 | 有跨组件共享状态就开 |
| Vitest | 生成 vitest.config.ts，对接单元测试 | 打算写单测才开 |
| 端到端测试 | 引入 Playwright 等 E2E 测试框架 | 前期可以先不开 |
| ESLint | 生成 ESLint 配置，配合编辑器做语法检查 | 建议开 |
| Prettier | 生成格式化配置，提供 format 脚本 | 建议开 |
| Vue DevTools 7 | 内置调试面板，运行时可按 Alt+Shift+D 打开 | 建议开 |
这套组合没有绝对标准。原文作者的习惯是除了测试相关的那两项，其他都开：TypeScript、ESLint、Prettier 管代码规范，JSX、Vue Router、Pinia 覆盖大多数业务需求，Vue DevTools 7 免去安装浏览器扩展。我的建议是，这是第一个 Vue 3 项目的时候就按这个组合走，等遇到实际测试需求再补 Vitest 和端到端测试也不迟，后面手动安装并不会比脚手架生成复杂多少。
2.2 按偏好让 Codex 生成完整创建命令
把需求描述得越具体，Codex 给出的执行序列就越接近原文的流程。例如：
按以下偏好生成 pnpm create vue@latest 的完整操作序列：项目名 vue-project；TypeScript 开启；JSX 不开启；Vue Router 开启；Pinia 开启；Vitest 不开启；端到端测试不开启；ESLint 开启；Prettier 开启；Vue DevTools 7 开启。同时给出后续启动命令。Codex 会返回每一步按 y 还是按 n，并把cd vue-project、pnpm install、pnpm format、pnpm dev一起列出来。这里必须说清楚：Codex 只是生成命令序列，真正在你本地终端执行这些命令的还是你自己。原文里也专门提到，pnpm format只在选择了 Prettier 时才存在，因为这条命令来自 package.json 里的 format script，所以让 Codex 读取 package.json 再解释命令，比让它凭记忆推断更准确。
3. 启动、打包与目录结构
3.1 pnpm format、pnpm dev、pnpm build 的关系
create-vite 的交互式询问结束只是完成了项目结构初始化，离跑起来还有几步。原文连续执行了pnpm install、pnpm format、pnpm dev，这些命令之间的关系可以继续让 Codex 对照 package.json 解释。在 Codex 会话里追问：
请结合当前项目的 package.json 的 scripts 字段，解释 pnpm format、pnpm dev、pnpm build 的执行过程和产物位置。Codex 会告诉你：pnpm format实际执行prettier --write src/，它会直接改写 src 目录下的文件格式，所以适合在改代码前先跑一次，让整个目录风格统一；pnpm dev启动 Vite 开发服务器，默认监听 http://localhost:5173，配合 Vue DevTools 7 可以直接在页面里调试组件状态；pnpm build执行 Vue 的生产构建，把产物输出到./dist目录，部署时把 dist 内容放上服务器即可。实际执行编译构建必须在你自己的机器上完成，Codex 负责解释和生成命令，不碰你的终端环境。
3.2 让 Codex 带着你读 src 目录结构
create-vite 生成的工程里，src 下的每个目录对应一个职责。把下面这段发给 Codex：
请解释 src/router/index.ts、src/stores/counter.ts、src/views、src/components、src/App.vue、src/main.ts、src/env.d.ts 在 Vue 3 项目里的作用。Codex 会按入口、路由、状态、视图、组件几个层次拆开讲：main.ts负责创建应用实例并把 router 和 pinia 挂上去；App.vue是最外层根组件，通常只放路由出口；views下的文件与路由一一对应，HomeView.vue、AboutView.vue 就是 router/index.ts 里 routes 数组引用的页面组件；components存放业务组件；stores/counter.ts用 defineStore 定义 Pinia 仓库；env.d.ts是 Vite 环境变量的类型声明文件。让 Codex 讲完这一串，再回头看目录树，会比单纯背结构清晰很多。原文说接下来还会对目录结构展开说明，实际上你自己用 Codex 也能完成同样的事，而且可以针对自己生成的项目逐文件追问。
4. VSCode 开发前准备：Vue Official 与 Vetur 的冲突
4.1 用 Codex 生成插件安装与冲突检查清单
原文在项目跑起来后做了两件事：装 Vue Official（原 Volar）扩展、检查 Vetur 是否禁用。这一块不用自己翻插件市场，直接让 Codex 列检查清单：
我在用 VSCode 开发 Vue 3 项目。请列出：必须安装的扩展、必须禁用的扩展、建议安装的扩展，并解释 Vue Official 与 Vetur 为什么不能在 Vue 3 项目里共存。Codex 会给出类似这样的分组：必须安装 Vue Official；Vue 2 项目才需要 Vetur，Vue 3 项目要在工作区禁用；建议安装 Auto Close Tag、Auto Rename Tag、indent-rainbow、Path Intellisense、TODO Highlight、ESLint、Prettier 等。两个语言服务同时监听 .vue 文件时，会出现补全重复、格式化冲突，所以项目里只能保留一个。对同时维护 Vue 2 和 Vue 3 仓库的人来说，最省事的做法是在每个工作区里单独禁用对方插件，比全局卸载要灵活。
4.2 ref.value 自动补全设置
Vue Official 的设置里有一项Vue > Auto Insert: Dot Value，打开后，在 script 里输入 ref 变量名时会自动补出.value，例如输入 count 后自动变成 count.value。Codex 给出的建议是：如果你经常写 ref 却不写 .value，就在 VSCode 设置里把 Auto Insert 打开；如果模板里大量使用 ref，开启后可以减少一次手动输入。注意这个设置需要你手动在 VSCode 设置面板里勾选，或者把配置写进工作区的 settings.json，Codex 只能生成参考片段，不能直接改动你本机的编辑器配置。
5. 验证 Codex 通道与排障
5.1 两条验证路径
配置完成后的第一件事不是马上创建项目，而是先确认 Codex 每次调用是否真的经过 TaoToken 的 API 通道，以及是否产生了用量记录。在 Codex 会话里输入：
请告诉我当前使用的模型提供方名称和模型 ID。如果 Codex 能答出 provider 是 taotoken 以及你在 config.toml 里填的模型 ID，说明通道已经通。另一条路径是登录 https://taotoken.net/?utm_source=taotoken_aicg_blog_end，在控制台里查看刚才那次对话是否有调用记录。我的做法是，创建 Key 之后先在官网控制台发一次测试请求，再回到 Codex 跑一次正式对话，两边记录能对上就说明配置干净了。
5.2 最容易出现的三个配置错误
第一，base_url写成https://taotoken.net/api/v1。TaoToken 的 Base URL 就是https://taotoken.net/api，末尾不需要补/v1，多写一段会让请求路径错误，Codex 会抛出 404。第二，shell 里的TAOTOKEN_API_KEY还带着YOUR_API_KEY占位符，没有替换成官网创建的真实 Key，Codex 返回 401。第三，model字段填了一个自己猜的版本号。模型 ID 要以模型广场展示的为准，先打开官网复制当前可用的模型 ID 再填进 config.toml，猜版本号会造成模型不存在或行为异常。这三类错都发生在配置阶段，和 create-vite 本身无关，排查时按 base_url、环境变量、model 字段的顺序过一遍即可。
如果你正准备创建 Vue 3 项目，又不想在 create-vite 的十个交互选项上反复犹豫，建议先把 Codex 的通道切到 TaoToken：打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 注册、创建 API Key，完成一次对话后回控制台确认用量，再正式跑pnpm create vue@latest。这样后面每一步的选项判断都可以继续交给 Codex 帮你把住。