企业官网建设流程全解析

1. 收藏夹越整理越乱，问题到底出在哪

浏览器收藏夹这件事，几乎每个开发者都经历过同一个循环：看到好工具随手一存，想着“回头再看”，结果三个月后打开书签管理器，发现里面躺着两百多个链接，文件夹套文件夹，命名从“学习资料”到“生产力工具”再到“待整理”，最后连自己都懒得点开。真正需要某个工具的时候，要么在书签里玩“找茬”，要么干脆打开搜索引擎重新搜一遍——那当初收藏的意义是什么？

我自己的收藏夹曾经也是这样。后来我意识到，问题的根源不是“没整理”，而是收藏夹这个形态本身就不适合做工具管理。书签是线性的、扁平的，而工具是需要分类、检索、标注的。你需要的不是一个更整齐的收藏夹，而是一个属于你自己的导航站——打开就能看到所有工具，按分类浏览，输入关键词就能过滤，三秒内定位到目标。

这件事放在两年前，我会觉得“搭个网站太麻烦了，不值当”。但现在情况完全不一样了。Claude Code 这类 AI 编程助手已经能承担大量重复性的骨架搭建工作，你只需要把需求描述清楚，它就能帮你生成项目结构、组件代码、类型定义、甚至配置文件。我最近用 Claude Code + Vue 3 + TypeScript 搭了一个导航站骨架，从项目初始化到本地跑通搜索过滤，整个过程比我预想的快很多。

这篇文章要交付的东西很具体：可复制的项目初始化命令、组件目录结构、分类数据的 schema 设计，以及本地启动后怎么验证导航渲染和搜索过滤是否真的生效。适合有基础前端概念、想用 AI 辅助快速搭一个导航站骨架的人。如果你完全没写过 Vue，也能跟着走，但遇到报错时需要一点排查耐心。

核心检索词先明确：用 Claude Code 辅助生成 Vue 3 + TypeScript 导航站骨架，解决的是收藏夹混乱、分类靠手动的问题。下面从环境准备开始，一步步来。

2. 用 TaoToken 给 Claude Code 配好模型通道

在开始写代码之前，得先让 Claude Code 能正常工作。Claude Code 本身是一个命令行工具，它需要连接到一个模型服务来生成代码。这里我用 TaoToken 作为模型接入通道，原因是它的配置方式比较直接，Base URL 和 API Key 拿到就能用，不需要额外折腾环境。

先说明一下 TaoToken 是什么：它是一个模型 API 接入服务，提供统一的 Base URL 和 API Key，让 Claude Code、Cline、Codex 这类工具能够调用模型能力。官网地址是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api 。你需要在控制台创建一个 API Key，然后把它配置到 Claude Code 的环境变量或配置文件里。

具体操作路径：打开官网，进入控制台，找到 API Keys 页面，创建一个新的 Key。这个 Key 就是后面配置里的核心凭证。控制台地址是 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，API Keys 页面是 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。创建完之后先复制保存，后面配置要用。

Claude Code 的配置方式有两种：一种是通过环境变量，一种是通过配置文件。我推荐用配置文件，因为更稳定，不容易因为终端会话切换而丢失。Claude Code 的配置文件通常放在用户目录下的.claude文件夹里，具体路径根据系统不同会有差异。你需要设置的核心参数是三个：Base URL、API Key、Model ID。

Base URL 填https://taotoken.net/api，注意这里不加 UTM 参数，就是纯 API 地址。API Key 填你刚才在控制台创建的那个。Model ID 根据你实际使用的模型来填，比如 Claude 系列或其它支持的模型标识。这三个参数缺一不可，少一个都会导致请求失败。

如果你用的是 Claude Code 的 Anthropic 兼容模式，配置里需要指定ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY。具体写法在下一节的配置片段里会给出。这里先记住一个原则：Base URL 指向 TaoToken 的 API 地址，Key 用你创建的 Key，Model ID 填你实际要调用的模型。这三件套配好之后，Claude Code 才能正常生成代码。

另外提一句，如果你后续想长期用 Claude Code 做编码和 Agent 任务，可以了解一下 Coding Plan，地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。它适合需要持续调用模型的场景，比单次按量更划算。不过这一步不是必须的，先把基础通道配通再说。

3. 可复制的项目初始化与 Claude Code 配置片段

这一节直接给可复制的内容。先建项目，再配 Claude Code，然后让 Claude Code 帮你生成导航站骨架。

3.1 项目初始化命令

打开终端，执行以下命令创建 Vue 3 + TypeScript 项目。这里用 Vite 作为构建工具，因为它启动快、配置简单，适合导航站这种中小型项目。

npm create vite@latest ai-nav-site -- --template vue-ts cd ai-nav-site npm install npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

执行完之后，你会得到一个标准的 Vue 3 + TypeScript 项目结构。src目录下会有components、assets等文件夹，vite.config.ts和tsconfig.json也已经生成好了。接下来安装 Tailwind CSS 是为了后面写样式方便，如果你不想用 Tailwind，也可以跳过这一步，用普通 CSS 写。

安装完成后，在tailwind.config.js里配置 content 路径：

/** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

然后在src/style.css里引入 Tailwind：

@tailwind base; @tailwind components; @tailwind utilities;

确保main.ts里引入了这个样式文件。到这里，项目基础环境就搭好了。

3.2 Claude Code 配置片段

Claude Code 的配置我推荐用 JSON 格式写在配置文件里。根据你的系统，配置文件路径可能是~/.claude/settings.json或项目根目录下的.claude/settings.json。内容如下：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "你的_API_Key", "ANTHROPIC_MODEL": "你的_Model_ID" } }

如果你用的是 Codex 的auth.json方式，配置结构类似，核心还是 Base URL、Key、Model ID 三件套。Cline MCP 的配置也是在设置里填这三个参数。不管用哪个工具，逻辑是一样的：请求发到 TaoToken 的 API 地址，带上你的 Key，指定要用的模型。

配置写完之后，在终端里运行claude命令，如果能正常进入交互界面，说明通道配通了。如果报错，先检查 Key 有没有复制错、Base URL 有没有多写空格、Model ID 是不是当前账号可用的。

3.3 让 Claude Code 生成导航站骨架

通道配好之后，就可以让 Claude Code 帮你生成代码了。不要一上来就说“给我做个导航网站”，这样它生成的东西会很泛。正确的做法是分步骤、给细节。

第一步，先让它生成分类数据的 TypeScript 类型定义和 schema。你可以这样描述需求：

使用 Vue 3 和 TypeScript，创建一个导航站的数据类型定义文件src/types/nav.ts。需要定义 Category 和 NavItem 两个接口。Category 包含 id、name、icon、order 字段；NavItem 包含 id、name、url、description、categoryId、tags、icon 字段。id 使用 string 类型，order 使用 number 类型，tags 使用 string 数组。同时导出一个默认的分类数据数组，包含开发工具、AI 工具、设计资源、办公效率四个分类，每个分类下至少三个示例导航项。

Claude Code 会根据这个描述生成类型文件和示例数据。生成之后你检查一下字段是否合理，比如id是否用了crypto.randomUUID()或者固定字符串，url是否做了基本校验。如果它用了Math.random()生成 id，你要改成更安全的方案。

第二步，让它生成导航卡片组件和分类筛选组件。描述要具体到 props 和事件：

创建一个NavCard.vue组件，接收一个itemprop，类型是 NavItem。卡片显示图标、名称、描述和标签。点击卡片时在新标签页打开 url。再创建一个CategoryFilter.vue组件，接收categories数组和activeCategory字符串，点击分类时触发update:activeCategory事件。

第三步，让它生成搜索过滤的逻辑。搜索过滤可以放在父组件里，用computed根据关键词和当前分类过滤navItems数组。关键词匹配 name、description 和 tags 字段。

这三步做完，一个导航站的核心骨架就出来了。目录结构大致如下：

src/ ├── components/ │ ├── NavCard.vue │ ├── CategoryFilter.vue │ └── SearchBar.vue ├── types/ │ └── nav.ts ├── data/ │ └── navData.ts ├── App.vue └── main.ts

这个结构清晰、职责分明，后面要加新功能也容易扩展。

4. 本地启动后验证导航渲染与搜索过滤

代码生成完之后，运行npm run dev启动本地开发服务器。终端会输出一个本地地址，通常是http://localhost:5173。打开浏览器访问这个地址，你应该能看到导航站的页面。

验证分三步走，每一步都有明确的检查点。

第一步，验证分类渲染是否正常。页面加载后，顶部或侧边应该显示四个分类按钮：开发工具、AI 工具、设计资源、办公效率。点击每个分类，下方的导航卡片应该只显示该分类下的项目。如果点击后没有变化，打开浏览器控制台看有没有报错，重点检查activeCategory的绑定和computed过滤逻辑。

第二步，验证搜索过滤是否生效。在搜索框里输入关键词，比如“图片”或“AI”，导航卡片应该实时过滤，只显示名称、描述或标签中包含该关键词的项目。如果输入后没有反应，检查v-model是否绑定到了搜索关键词变量，以及computed里是否同时应用了分类过滤和关键词过滤。

第三步，验证卡片点击跳转。点击任意导航卡片，应该在新标签页打开对应的 url。如果没打开，检查a标签的href和target="_blank"是否正确绑定。

我实测下来，最容易出问题的地方是computed的依赖收集。如果你在过滤逻辑里直接修改了原数组，而不是返回新数组，Vue 的响应式可能会失效。正确的写法是用filter返回新数组，不要用splice或直接赋值。

另外，如果你发现搜索过滤对中文支持不好，比如输入“设计”匹配不到“设计资源”，检查一下是否做了toLowerCase()处理。中文不需要转小写，但英文标签需要统一大小写才能正确匹配。

验证通过后，你可以试着往navData.ts里加几条真实数据，刷新页面看是否正常渲染。这一步能帮你确认数据 schema 是否设计得合理——如果加数据很麻烦，说明字段设计需要调整。

5. 常见报错排查：401、local proxy failed、reading choices

配置和运行过程中，最容易碰到几类报错。这一节按报错类型逐一排查。

401 错误。这是最常见的，意思是认证失败。原因通常是 API Key 填错了、Key 过期了、或者 Base URL 写成了带路径的地址。检查步骤：第一，确认 Key 是从 TaoToken 控制台复制的，没有多余空格；第二，确认 Base URL 是https://taotoken.net/api，不要在后面加/v1或其它路径；第三，确认 Model ID 是当前账号有权限调用的。如果三个都确认无误还是 401，重新创建一个 Key 再试。

local proxy failed。这个报错通常出现在 Claude Code 启动时，意思是本地代理连接失败。可能的原因是你的终端环境变量里设置了额外的代理配置，和 Claude Code 的配置冲突了。检查~/.claude/settings.json里的env字段，确保只保留了必要的 Base URL、Key 和 Model ID。如果系统环境变量里有HTTP_PROXY或HTTPS_PROXY，先临时取消再试。

reading choices 报错。这个报错一般出现在模型返回格式不符合预期的时候。可能是 Model ID 填错了，导致返回的不是标准格式；也可能是请求参数里stream设置和当前模型不兼容。检查 Model ID 是否拼写正确，然后确认 Claude Code 的版本是否支持你填的模型。如果用的是较老的版本，升级到最新版再试。

OAuth 相关报错。如果你在配置里同时启用了 OAuth 和 API Key 两种认证方式，可能会冲突。Claude Code 的配置里，如果用了 API Key 方式，就不需要再走 OAuth 流程。检查配置文件里是否有重复的认证字段，删掉不需要的那个。

Vue 项目启动报错。如果npm run dev报模块找不到，先执行npm install确保依赖装全了。如果报 TypeScript 类型错误，检查tsconfig.json里的strict模式是否过于严格，可以临时关掉noUnusedLocals和noUnusedParameters来排查。Tailwind 样式不生效的话，检查tailwind.config.js的 content 路径是否包含了.vue文件。

排查的核心思路是：先确认通道配置三件套（Base URL、Key、Model ID）是否正确，再确认项目依赖和类型定义是否完整。大部分报错都出在这两个环节。

6. 把骨架跑通之后，下一步可以做什么

骨架跑通之后，你手里已经有一个能渲染分类、能搜索过滤的导航站了。但这只是起点。接下来可以做的事情很多，我按优先级排一下。

第一优先级是把数据源从硬编码改成可维护的形式。现在分类和导航项都写在navData.ts里，加一条数据要改代码。你可以让 Claude Code 帮你生成一个简单的 JSON 文件作为数据源，或者更进一步，接一个轻量的后端接口。如果不想搭后端，用public目录下的 JSON 文件也行，前端fetch加载。

第二优先级是加一个“添加导航”的表单。这个功能可以纯前端实现，用localStorage存新增的数据。让 Claude Code 生成一个AddNavForm.vue组件，包含名称、URL、描述、分类、标签几个字段，提交后写入localStorage，然后刷新列表。这样你就能在浏览器里直接管理自己的导航数据，不用改代码。

第三优先级是优化搜索体验。现在的搜索是简单关键词匹配，可以升级成模糊匹配或者拼音首字母匹配。比如输入“kf”能匹配到“开发工具”。这个逻辑可以让 Claude Code 帮你写一个工具函数，用includes加startsWith组合实现。

如果你想让导航站支持多端同步，那就需要引入后端和数据库了。这一步复杂度会上升，但 Claude Code 同样能帮你生成接口代码和数据库 schema。不过建议先把前端骨架用顺了再考虑后端，不然容易在配置上卡住。

最后说一个实际经验：导航站的数据 schema 不要设计得太复杂。我一开始给 NavItem 加了十几个字段，结果录入数据的时候自己都嫌麻烦。后来精简到 name、url、description、categoryId、tags 五个核心字段，录入效率高了很多。字段够用就行，不够再加，别一开始就追求大而全。

如果你在配置 Claude Code 通道时遇到问题，可以先去接入文档看看具体参数说明，地址是 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 。文档里有 Base URL、Key、Model ID 的详细填写示例。想先体验一下模型对话效果的话，可以打开 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite 试一下。长期做编码和 Agent 任务的话，Coding Plan 会更合适，地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。

骨架已经跑起来了，剩下的就是往里填你自己的工具和数据。这件事一旦开始，你会发现收藏夹里的那些链接终于有了归宿。