企业官网建设流程全解析

1. 为什么 Vue2.x 项目还需要一套“标准化流水线”

Vue2.x 虽然已经进入维护阶段，但大量存量项目、外包交付项目、企业内部后台系统仍然跑在 Vue2.x + Vue CLI + Element UI 这套组合上。我最近接手的一个后台管理项目就是典型场景：三个人协作，有人用双引号有人用单引号，有人提交前不跑 lint，有人本地格式化把整个文件重排一遍，Git diff 里全是格式噪音，真正改动的业务逻辑反而被淹没。更麻烦的是，团队开始用 Cline 这类 AI 编码助手后，AI 生成的代码风格和项目规范不一致，保存时 ESLint 报一堆错，改完又被 Prettier 覆盖回去，来回拉扯。

所以这篇要解决的不是“Vue2.x 怎么入门”，而是从零搭一套能长期跑下去的标准化工程骨架：Vue CLI 创建项目、ESLint 与 Prettier 协同不打架、VSCode 插件选型、以及把 TaoToken 作为统一 AI 工具接入通道写进 Cline 的 settings.json。目标是让你一次性跑通规范检查和 AI 辅助编码，而不是每次新建项目都重新踩一遍配置坑。

适合谁看：正在维护或新建 Vue2.x 项目的开发者、需要给团队定规范的负责人、以及想让 AI 编码助手遵守项目 lint 规则的人。下面所有配置片段都可以直接复制，我会标注每一步的验证动作。

2. 前置准备：TaoToken 统一 Key 与 API 通道

在讲 Vue 项目创建之前，先把 AI 工具接入这条线理清楚，因为后面 Cline 的 settings.json 要用到。TaoToken 在这里扮演的角色是统一 AI 工具接入通道：你不需要在每个 AI 插件里分别填不同厂商的 Key，而是用一套 Key 和统一的 API 地址，让 Cline、模型对话等工具都走同一个入口。官网地址是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 基础地址是 https://taotoken.net/api 。

操作路径很直接：先到控制台创建 API Key，然后按文档把 Key 写进对应工具的配置。控制台入口在 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，API Key 管理页在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。如果你只是想先验证模型能不能通，可以用模型对话页面 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 发一条消息测试；如果是长期编码和 Agent 场景，建议看 Coding Plan https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ；接入细节以文档为准 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 。

注意：Key 属于敏感凭证，不要提交到 Git 仓库。建议放在系统环境变量或本地未跟踪的配置文件里，团队共享时用各自的 Key。

这一步做完，你手里应该有一个可用的 API Key 和 API 基础地址，后面第 5 节写 Cline 配置时会直接引用。

3. 用 Vue CLI 创建标准化 Vue2.x 项目

3.1 创建命令与手动选择特性

全局安装 Vue CLI 后执行创建命令：

npm install -g @vue/cli vue create vue2-standard-demo

执行后会进入交互式问答。选择“Manually select features”，然后按下面的选项走：

? Check the features needed for your project: (*) Babel (*) Router (*) Linter / Formatter ( ) Vuex ( ) CSS Pre-processors ( ) Unit Testing ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? No ? Pick a linter / formatter config: ESLint + Standard config ? Pick additional lint features: (*) Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? Yes

几个关键点解释一下。选 Router 是因为 Vue CLI 创建的是 SPA，前端路由基本是刚需，选完会自动生成src/router/index.js并把路由器实例挂到 vm 上。路由模式选 hash（即不选 history），是因为 history 模式需要服务端配合重写，本地和简单部署场景下 hash 更省事。Linter 选 Standard，是因为它的规则相对克制，不像 Airbnb 那样激进，团队接受度高。选“Lint on save”让保存即检查，选“In dedicated config files”会把配置拆到独立文件，方便后续手动调整。

保存为预设后，下次vue create第一步就能直接选到这个预设，不用再走一遍问答。

3.2 创建后的目录结构确认

创建完成后，项目根目录应该能看到.eslintrc.js、babel.config.js、package.json等文件。src下会有router/index.js、views、components、App.vue、main.js。先跑一次确认项目能起来：

cd vue2-standard-demo npm run serve

浏览器打开http://localhost:8080，看到默认页面就说明基础工程没问题。这一步别跳过，后面所有配置都建立在这个能跑的项目上。

3.3 用 vue ui 安装 Element UI（按需引入）

如果你需要 Element UI，可以用vue ui图形界面安装，也可以直接命令行。图形界面方式：

vue ui

浏览器会自动打开 Vue 项目管理界面，导入刚才创建的项目，然后在“插件”里搜索element，安装vue-cli-plugin-element，选择“按需引入”。安装后会自动生成src/plugins/element.js，你可以在里面按需注册组件。命令行方式等价于：

vue add element

按需引入的好处是打包体积小，但要注意babel.config.js里会多出对应的按需加载配置，别手动删掉。

4. ESLint 与 Prettier 协同配置：让两者不打架

4.1 ESLint 在项目里的两个触发时机

ESLint 是语法检查加代码风格检查工具。比如你定义了一个未使用的变量，语法检查会报错；两行代码之间空了很多无用空行，风格检查会报错。它适合多人协作，保证不同开发者产出一致风格的代码。

在 Vue CLI 创建的项目里，ESLint 有两个触发时机。一是编译或打包时，npm run serve和npm run build会自动触发 ESLint 按@vue/eslint-config-standard规则审查代码。二是开发过程中，靠 VSCode 的 ESLint 插件实时检查，保存文件时自动修复。新版 ESLint 插件默认在保存时执行检查并自动修复，一般不需要额外改 settings。

4.2 Prettier 与 ESLint 的冲突根源

Prettier 是代码格式化工具，负责把杂乱的代码变成清晰风格。问题在于，Prettier 格式化 JS 的默认原则是使用双引号、使用拖尾逗号、使用分号，而 ESLint Standard 规则恰恰不允许这些。更关键的是，Prettier 作为专业格式化插件，优先级比 ESLint 的错误修复更高，于是 ESLint 刚修完，Prettier 一保存又覆盖回去，形成死循环。

解决方案不是禁用其中一个，而是让 Prettier 的规则适配 ESLint。在项目根目录创建.prettierrc.js，Prettier 会优先读取这个文件：

module.exports = { printWidth: 120, tabWidth: 2, useTabs: false, semi: false, singleQuote: true, quoteProps: 'as-needed', jsxSingleQuote: false, trailingComma: 'none', bracketSpacing: true, jsxBracketSameLine: false, htmlWhitespaceSensitivity: 'css', arrowParens: 'avoid', endOfLine: 'auto' }

重点看三个和 ESLint Standard 对齐的项：semi: false不使用分号，singleQuote: true使用单引号，trailingComma: 'none'不使用拖尾逗号。这样 Prettier 格式化后的结果就不会和 ESLint 规则冲突。

4.3 把 Prettier 设为默认格式化程序

光有配置文件还不够，要让 VSCode 在保存时用 Prettier 格式化。按Ctrl+Shift+P打开命令面板，选择“Format Document With”，再选“Configure Default Formatter”，把 Prettier 设为默认。之后保存代码就会触发 Prettier 格式化。

如果你希望保存时先 ESLint 修复再 Prettier 格式化，可以在项目根目录建.vscode/settings.json：

{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": [ "javascript", "vue" ] }

这个顺序下，保存时 ESLint 先修语法和风格问题，Prettier 再做格式化，两者规则已经对齐，不会互相覆盖。

4.4 验证配置是否生效

写一段故意违规的代码来验证：

// src/utils/test.js const unusedVar = "double quote and semicolon"; export function demo( ) { return 1; }

保存后观察：双引号应变成单引号，分号应消失，未使用变量应被 ESLint 标红，多余空格应被格式化。如果没反应，检查 ESLint 插件是否启用、.prettierrc.js是否在根目录、VSCode 默认格式化程序是否设为 Prettier。

5. 在 Cline 的 settings.json 中写入 TaoToken 统一通道

5.1 找到 Cline 配置文件位置

Cline 的配置通常放在 VSCode 的用户设置或工作区设置里。打开命令面板，搜索“Preferences: Open User Settings (JSON)”，或者直接编辑工作区下的.vscode/settings.json。我建议放在工作区设置里，这样项目级配置跟着仓库走，团队其他人拉下来就能用（Key 用环境变量引用，不硬编码）。

5.2 写入 API 通道骨架

下面是一个可复制的配置骨架，把 API 基础地址指向 TaoToken，Key 从环境变量读取：

{ "cline.apiProvider": "openai-compatible", "cline.apiBaseUrl": "https://taotoken.net/api", "cline.apiKey": "${env:TAOTOKEN_API_KEY}", "cline.model": "your-preferred-model", "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }

然后在系统环境变量里设置TAOTOKEN_API_KEY为你从控制台创建的 Key。这样配置文件和 Key 分离，提交代码不会泄露凭证。模型名称按你实际使用的填，具体可用模型以文档为准。

5.3 让 AI 生成的代码遵守项目规范

配置好之后，Cline 生成的代码会走 TaoToken 通道。但 AI 不一定知道你的 ESLint 规则，所以要在项目根目录放一个.clinerules或类似的项目说明文件，把关键约束写进去：

本项目使用 Vue2.x + ESLint Standard + Prettier。 - JS 使用单引号，不使用分号，不使用拖尾逗号 - 缩进 2 空格，行宽 120 - Vue 组件使用 Vetur 支持的写法 - 新增文件放在 src 对应目录下

这样 AI 生成代码时会更贴近项目风格，减少保存后大量报错的情况。实测下来，加了规则说明后，AI 生成代码的 lint 通过率明显提升。

6. 本篇常见错排查

6.1 ESLint 报错但保存不自动修复

先确认 VSCode 装了 ESLint 插件并启用。然后检查.vscode/settings.json里editor.codeActionsOnSave是否包含source.fixAll.eslint。如果项目用的是旧版 ESLint 插件，可能需要把值写成true而不是对象形式。另外确认eslint.validate里包含vue，否则.vue文件不会被检查。

6.2 Prettier 格式化后 ESLint 又报错

这是典型的规则冲突。检查.prettierrc.js是否存在且被 Prettier 读取。可以在 VSCode 输出面板选择 Prettier 查看它实际用的配置文件路径。如果 Prettier 没读到项目配置，可能是文件位置不对或格式有语法错误。确认semi、singleQuote、trailingComma三项和 ESLint Standard 对齐。

6.3 Cline 请求失败或 401

先确认TAOTOKEN_API_KEY环境变量在当前终端和 VSCode 进程里都能读到。VSCode 有时需要重启才能加载新环境变量。然后确认apiBaseUrl写的是https://taotoken.net/api，不要多加斜杠或路径。如果还是 401，去控制台重新生成一个 Key 试试。模型名称填错也可能导致请求失败，以文档里的模型列表为准。

6.4 vue create 时选错选项想重来

直接删掉项目目录重新vue create最省事。如果只是配置想调整，可以手动改.eslintrc.js和package.json，但容易漏。建议第一次就把预设保存好，后面新建项目直接选预设，避免重复问答出错。

6.5 保存时格式化整个文件导致 diff 爆炸

这是因为项目里存在大量未格式化的历史文件，一保存就被 Prettier 全量重排。解决办法是先用npx prettier --write "src/**/*.{js,vue}"做一次全量格式化并单独提交，之后增量修改就不会有大 diff 了。团队协作时这一步要提前沟通，避免和别人正在改的文件冲突。

7. 接入与验证入口

配置写完后，建议按这个顺序验证一遍：先用模型对话页面发一条消息确认 Key 和通道正常，地址是 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite ；然后在 Cline 里让它生成一个简单的 Vue 组件，保存后看 ESLint 和 Prettier 是否按预期工作；如果要做长期编码和 Agent 任务，可以了解 Coding Plan https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ；接入过程中遇到报错，优先查文档 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，Key 管理在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。

最后留一个我踩过的坑：.prettierrc.js里endOfLine设成auto在 Windows 和 Mac 混合团队里偶尔会导致换行符 diff，如果团队统一用 LF，可以改成lf。这个细节不影响功能，但能减少无意义的 Git 变更。