创建问诊项目与请求工具（一）

本页对应 创建问诊项目与请求工具，共 7 段视频，约 1 小时 14 分。

学习目标

• 能够使用 pnpm 创建 Vue3 + TypeScript 项目，并根据业务需求选择 Router、Pinia、ESLint、Prettier 等插件，完成项目初始化的完整命令流程。
• 能够修改 ESLint/Prettier 配置实现单引号、无分号、行宽等代码风格覆盖，并配置忽略 index 组件命名与 props 解构的规则，通过保存自动修复验证配置生效。
• 能够配置 Husky + lint-staged 代码检查工作流，实现 git commit 前仅对暂存区文件执行 ESLint 校验，并验证错误代码被拦截、无法提交。
• 能够按职责单一原则规划并调整 src 目录结构，新建 composables、icons、services、styles、types、utils 等目录，引入全局 Sass 样式文件。
• 能够说明 vue-router 4 中 createRouter、createWebHistory 的初始化方式与 base 参数作用，并解释 import.meta.env.BASE_URL 的来源。
• 能够完成 Vant 的引入、postcss-px-to-viewport 移动端适配配置，并使用 CSS 变量实现项目主题定制及覆盖 Vant 组件主题色。

知识点

创建问诊项目：为什么用 PNPM

本节从零创建“优一问诊”患者端 Vue3 项目。为什么需要换包管理工具？转写里给的理由很明确：PNPM 比 npm/yarn 更快，安装包时更节省磁盘空间，而且越来越多项目采用 PNPM 管理依赖。怎么想？创建命令与以前用 yarn 调用 create-vue 很相似，只是把 yarn 换成 pnpm，学习成本不高。怎么做：

npm install -g pnpm
pnpm create vue

输入项目名，例如问诊患者端 Vue3 项目 consult-patient-vue3。选择项按转写：需要 TS；不需要 JSX；需要 Vue Router；需要 Pinia；测试暂时不用；需要 ESLint；风格选 Prettier。创建完成后终端会提示四个命令，依次是进入目录、安装依赖、修复代码风格、启动项目：

cd consult-patient-vue3
pnpm install
pnpm lint
pnpm dev

易错点：全局安装 PNPM 后若命令不可用，换新终端再试；四个命令要按顺序执行；pnpm lint 的作用是修复项目内所有文件的 ESLint 风格问题，转写中执行后 App.vue、main.ts 的风格提示都消失了。

项目配置：ESLint 风格与 TS 托管模式

为什么需要项目自有 ESLint 风格？因为脚手架默认风格不一定符合项目要求。怎么想？在 .eslintrc.cjs 中追加三块配置：第一块覆盖 Prettier 默认风格，使用单引号、不使用分号、每行 80 字符、对象和数组末尾不需要逗号、换行符由系统决定；第二块允许 index.vue 这类单词组件名；第三块关闭 props 解构丢失响应式的提示，因为后面会开启响应式语法糖，props 可以解构。怎么做：把配置追加到 .eslintrc.cjs，保存后可能第一次按旧规则修复，再保存一次才按最新规则修复；也可执行 pnpm lint 全量修复。

调试过程：转写中先在 main.ts 看到双引号提示，保存后变单引号且分号消失；新建 index.vue 出现组件名多单词提示，开启第二块后提示消失；写 defineProps 解构时出现“props 不能解构”提示，开启第三块后提示消失。易错点：要安装 ESLint 并开启保存自动修复；不要同时开启默认自动保存格式化，否则会冲突。

TS 托管模式为什么需要？VS Code 内置 TS 服务和 Volar 提供的 TS 服务同时运行会影响性能。怎么做：在插件面板搜索内置插件 @builtin typescript，找到 TS/JS 语言支持，选择“仅当前工作区禁用”，重启 VS Code。底部出现 TS 版本号和 takeover 即表示托管模式开启。易错点：不要全局禁用，否则所有项目都受影响。

提交前代码检查：husky 与 lint-staged

为什么提交前还要检查？ESLint 保存修复只能修风格，代码错误如 A = 10 不会报错修复；文件关闭后可能发现不了，错误代码一旦提交很危险。怎么想？在 git commit 前执行检查。怎么做：先初始化仓库并提交：

git init
git add .
git commit -m "init"

按 husky 官网执行初始化与安装命令，生成 .husky 目录；把 .husky/pre-commit 中默认的 npm test 改成 pnpm lint。调试：写错误代码后提交仍成功，说明未拦截；改配置后再次提交，终端报 App.vue 中 A 未定义并中断提交。

但 pnpm lint 是全量检查，项目大了耗时，还可能修改旧文件。于是改为暂存区检查：安装 lint-staged，在 package.json 配置对 js/ts/vue 执行 eslint --fix，并加脚本 "lint-staged": "lint-staged"，再把 pre-commit 改成 pnpm lint-staged。测试时只报当前修改文件的 A=20，index.vue 的旧警告不检查。易错点：husky 是 git hook 工具，pre-commit 在提交前执行；lint-staged 只处理暂存区文件。

目录调整与全局样式

为什么调整目录？为了模块拆分、职责单一、方便维护。怎么做：清空 assets、components、stores、views 默认文件；修改 router/index.ts、main.ts、App.vue，删掉无用组件引用和样式；新增 composables、icons、services、styles、types、utils。新建 styles/main.scss，在 main.ts 导入：

import './styles/main.scss'

安装 Sass：

pnpm install sass -D

易错点：删掉 CSS 后 main.ts 中原引用要同步删除；先引入 Vant CSS 再引入 main.scss，方便后面覆盖 Vant 样式。

vue-router 初始化与 BASE_URL

为什么讲路由初始化？Vue3 路由 API 与 Vue2 不同。Vue2 用 new VueRouter，Vue3 用 createRouter 创建实例，history 选项设置模式：createWebHistory 是 history 模式，createWebHashHistory 是哈希模式，地址栏会出现 #。项目使用 history：

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})
export default router

createWebHistory 参数是基础路径，默认 /。转写中手动传 /heima，地址栏自动加前缀；把 vite.config.ts 的 base 改成 heima，import.meta.env.BASE_URL 也变化。调试还验证了 import.meta：普通 ES 模块只有 url，Vite 环境下才有 env.BASE_URL。易错点：项目用 history 就不要保留哈希函数；不要随意改 base，除非部署有基准路径。

引入 Vant 与移动端适配

为什么引入 Vant？快速构建移动端界面。怎么做：

pnpm add vant

在 main.ts 引入 vant/lib/index.css，放在 main.scss 之前。App.vue 中按需导入 Button 并命名 VantButton，模板使用 <van-button type="primary">。体积问题：Vant 默认支持 tree-shaking，JS 用哪个打包哪个；CSS 全量引入是官方更推荐的方式，函数式组件还需手动引样式。移动端适配安装：

pnpm add postcss-px-to-viewport

新建 postcss.config.js 加插件配置。CommonJS 写法可能出现 module is not defined 提示，可忽略或快速修复。配置后必须重启 dev server。验证：按钮在手机模拟器中等比例缩放，检查样式可见 3.733vw，说明 px 已转 vw。

主题定制：CSS 变量与覆盖 Vant

为什么用 CSS 变量？越来越多 UI 组件库用 CSS 变量维护主题。全局变量写在 :root，局部变量写在选择器下，使用 var(--变量名)。项目主题色统一定义在 :root，例如 --cp-primary。要覆盖 Vant 按钮主色，去 Vant 官网“全局配置/主题变量”找到组件主色变量，在 :root 中覆盖为 var(--cp-primary)。调试：保存后按钮由蓝色变绿色。易错点：全局变量任何地方可用，局部变量只在选择器内生效；覆盖 Vant 要找到官方变量名；最后提交“主题定制”。

项目配置总览

项目配置不是“把脚手架跑起来”就结束，而是把代码风格、类型提示、提交检查、目录职责和基础 UI 能力提前定好。这样后面写业务时，问题会在保存、提交、启动阶段被及时发现。下面按转写稿的调试顺序梳理：先创建并启动项目，再配置 ESLint 与 TS 托管，接着做提交前检查，最后完成目录与基础架构配置。

创建项目与启动

为什么需要：统一包管理器和脚手架命令，避免团队里 npm、yarn、pnpm 混用导致锁文件不一致。
怎么想：转写稿选择 pnpm，是因为它更快、更节省磁盘空间；创建 Vue3 项目的命令与 create-vue 类似，只把调用工具换成 pnpm。
怎么做：

npm install -g pnpm
pnpm create vue@latest
pnpm install
pnpm lint
pnpm dev

创建时按问诊患者端需要选择 TypeScript、Vue Router、Pinia、ESLint、Prettier，测试暂时不选。
易错点：pnpm install 是安装全部依赖；pnpm lint 是修复项目内 ESLint 风格问题；启动用 pnpm dev。如果只改了 ESLint 配置，VS Code 里第一次保存可能仍按旧规则修复，再保存一次才按新规则生效。

ESLint 与 Prettier 风格配置

为什么需要：脚手架默认规则不一定符合项目规范，比如默认双引号、保留分号；Vue 组件名默认要求多单词，而实际常写 index.vue；props 解构默认会被提示丢失响应式。
怎么想：在 .eslintrc.cjs 中追加三段项目规则：覆盖 Prettier 默认风格、允许 index.vue 这类单单词组件名、允许 props 解构。
怎么做：按笔记在 .eslintrc.cjs 中追加配置，核心风格为单引号、不使用分号、每行 80 字符、对象和数组末尾不保留逗号、换行符由系统决定。保存后可用 pnpm lint 批量修复。
易错点：不要同时开启“保存时自动格式化”和 ESLint 保存修复，否则可能冲突；必须确认已安装 ESLint 插件并开启保存自动修复。

TS 托管模式

为什么需要：VS Code 内置一套 TS 服务，Vue 插件也提供一套 TS 服务；两套同时运行会影响性能和提示效率。
怎么想：只在当前项目禁用 VS Code 内置 TS 服务，保留 Vue 插件的 TS 服务，即“托管模式”。
怎么做：在插件面板搜索内置插件 @builtin typescript and javascript language features，选择“禁用（工作区）”，重启 VS Code。底部状态栏出现 TS 版本号和 takeover 字样即生效。
易错点：不要选全局禁用，否则所有项目都受影响；应选当前工作区禁用。

提交前代码检查

为什么需要：ESLint 保存修复主要修风格，代码错误如“变量未定义”不会自动修掉；若直接提交，可能把错误代码提交进仓库。
怎么想：用 Husky 的 Git Hook 在 git commit 前执行检查。最初用 pnpm lint 是全量检查，项目大了很慢，还会改动历史文件；应改为只检查暂存区。
怎么做：初始化 Husky 后，把 .husky/pre-commit 中的默认命令改为检查命令；再安装 lint-staged，在 package.json 中配置只对 js/ts/vue 执行 eslint --fix，并把 pre-commit 改为执行 lint-staged。
易错点：提交被拦截时，待提交文件前的 M 不会消失，说明提交被中断；修复错误后再 git add、git commit。只检查暂存区，因此未 git add 的文件不会被检查。

目录调整与基础架构

为什么需要：项目要按职责拆分模块，后续维护才方便。
怎么想：清空 assets/components/stores/views 默认示例；新增 composables/icons/services/styles/types/utils 等目录。services 放 API 封装，styles 放全局样式。
怎么做：新建 styles/main.scss，在 main.ts 中引入，并安装 Sass：

pnpm add -D sass

import './styles/main.scss'

易错点：脚手架支持 Sass 但未内置 sass 包，必须安装；样式引入顺序要注意，Vant 样式应在自定义样式之前引入，方便覆盖。

路由、Vant、移动适配与主题

为什么需要：问诊项目是 H5，需要路由、移动端组件库、视口适配和统一主题。
怎么想：路由用 createRouter 创建实例，用 createWebHistory(import.meta.env.BASE_URL) 设置 history 模式；Vant 全量引入 CSS 更省心；移动适配用 postcss-px-to-viewport 把 px 转 vw；主题用 CSS 变量维护。
怎么做：

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

pnpm add vant
pnpm add -D postcss-px-to-viewport

在 main.ts 引入 vant/lib/index.css；在 postcss.config.js 中按笔记粘贴插件配置；主题在 :root 定义 CSS 变量，并覆盖 Vant 的主题变量。
易错点：createWebHistory 参数是基础路径，默认 /；改 PostCSS 配置后要重启开发服务器；Vant 组件按需导入时名称可用别名，如 Button as VanButton，模板里用 <van-button>。

为什么要加“提交前代码检查”

在开发流程里，代码检查不能只依赖编辑器。我们在 VS Code 里配置了 ESLint 保存自动修复，确实能解决不少风格问题，但转写稿里特别强调：ESLint 的自动修复主要修的是代码风格，不能替代对代码错误的发现。如果文件里出现未定义变量这类错误，保存时可能只把分号、引号等风格修掉，错误本身仍然存在；一旦关掉文件，你甚至很难再发现它。此时如果直接 git commit，错误代码就会进入仓库，这是工作里要严格避免的。

所以这里的思路是：把检查挂到 Git 提交动作之前。Husky 是一个 Git Hook 工具，可以理解成“在某个时机自动做某件事”，很像 Vue 生命周期钩子。我们让它在 git commit 前执行 ESLint 检查，检查不通过就中断提交。

先初始化仓库并复现问题

为什么要先初始化？因为转写稿里的项目是脚手架创建的，并没有自动帮我们初始化 Git 仓库；没有仓库，后面的 Husky 钩子也无从挂载。

怎么做：在项目根目录执行：

git init
git add .
git commit -m "初始化"

然后模拟一个错误：在 app.vue 中写 let a = 10 这类未声明/未使用的错误代码。保存时你会看到，分号等风格问题可能被 ESLint 修掉，但 a 的错误并不会被自动修好。此时执行 git add .、git commit -m "测试提交"，错误代码仍然能提交成功，提交后文件旁的 M 标记消失。这个调试过程说明：没有提交前检查，错误代码确实可能被带进仓库。

易错点：这里只是模拟，验证完要删掉错误代码；不要把测试错误真的提交到仓库。

用 Husky 挂到 pre-commit

为什么需要 Husky？因为我们要在 git commit 执行时自动触发检查。怎么做：按笔记中给出的两条命令初始化 Husky 配置并安装 Husky。执行后项目根目录会生成 .husky 目录，里面有 pre-commit 文件。这个文件里的命令会在每次提交前执行。

转写稿里提到，默认生成的 pre-commit 里是类似 npm test 的命令，这个默认命令对我们当前项目没有实际作用，需要改成真正的检查命令。最初可以改成：

pnpm lint

对应地，项目里要有 lint 脚本。这样提交时会执行全量 ESLint 检查。验证方式：再次写入错误代码，执行 git add . 和 git commit -m "测试"，终端会报错，指出 app.vue 中 a 未定义，并且提交被中断；把错误删掉后再次提交，才能成功。

易错点：pre-commit 文件名和位置不能写错；默认的 npm test 要替换；如果提交被拦截，先看终端报错文件与行号，不要反复盲目提交。

从全量 lint 改成暂存区 lint-staged

为什么还要改？因为 pnpm lint 是全量检查，项目一大就耗时；而且如果之前没加过 lint，突然全量执行可能会改动很多历史文件。更合理的做法是：只检查本次暂存区里改动的文件。你执行 git add . 后，改动文件进入暂存区，此时做 ESLint 校验即可。

怎么做：安装 lint-staged：

pnpm install lint-staged

在 package.json 中加入 lint-staged 配置，核心是匹配 js、ts、vue 文件，并用 ESLint 检查、尝试修复：

"lint-staged": {
  "*.{js,ts,vue}": "eslint --fix"
}

再在 scripts 中加命令：

"scripts": {
  "lint-staged": "lint-staged"
}

最后把 .husky/pre-commit 改成：

pnpm lint-staged

验证：只修改 app.vue 并写入错误，git add . 后提交，终端只会报 app.vue 的问题；未改动的 index.vue 即使有警告也不会被检查。修复错误后再次提交即可成功。

易错点：lint-staged 只检查暂存区，提交前要先 git add；--fix 只能修可修复的风格问题，逻辑错误仍需人工处理；不要同时开启编辑器默认自动格式化和 ESLint 保存修复，否则可能冲突。

代码示例

1. CSS 变量实现主题定制（HTML 可直接运行）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS 变量主题定制</title>
  <style>
    /* ① 全局变量：写在 :root 下，任何地方都能用 */
    :root {
      --main-color: red;
      --cp-primary: #16c2a3;                  /* 优一问诊主题色 */
      --van-primary-color: var(--cp-primary); /* 覆盖 Vant 组件库的主题变量 */
    }

    /* ② 局部变量：只在 .footer 及其后代中生效 */
    .footer {
      --footer-color: green;
    }

    /* ③ 使用全局变量 */
    .main {
      color: var(--main-color);
      /* background-color: var(--footer-color); 局部变量在这里无效 */
    }

    /* ④ 同一个选择器里既用全局变量，也用局部变量 */
    .footer {
      color: var(--main-color);
      background-color: var(--footer-color);
    }

    /* ⑤ 模拟 Vant 按钮：背景色取自被覆盖后的 --van-primary-color */
    .van-button--primary {
      background-color: var(--van-primary-color);
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="main">main 元素（红色文字）</div>
  <div class="footer">footer 元素（绿色背景）</div>
  <button class="van-button--primary">主要按钮</button>
</body>
</html>

要点解释：

• 变量名前面的 -- 是必须的；写成 $main-color 是 Sass 变量，不是 CSS 变量，两者不要搞混。
• 全局变量定义在 :root 选择器下，用于维护项目主题；局部变量定义在某个选择器内，只对该选择器及其后代生效——所以在 .main 里用 --footer-color 不会变色。
• 使用时统一写 var(--变量名)，浏览器会把它解析成对应的值。
• 覆盖 Vant 主题：到 Vant 官网「全局配置 → 主题变量」里找到变量名（如组件主体色 --van-primary-color），在 :root 里重新赋值成自己的主题变量，其他 Vant 组件会一起变色。
• 易错点：变量名大小写敏感；var() 引用了不存在的变量时整条声明失效，可以写兜底值 var(--cp-primary, #16c2a3)。

2. Vue3 路由初始化（src/router/index.ts）

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  // history 选项控制路由模式
  // ① history 模式：地址栏没有 #
  history: createWebHistory(import.meta.env.BASE_URL),
  // ② 换成 hash 模式（地址栏会多出一个 #）：
  // history: createWebHashHistory(),
  routes: [
    // 路由规则待补充
  ],
})

export default router

要点解释：

• Vue3 通过 createRouter() 函数拿到路由实例（Vue2 是 new VueRouter()），再 export default 出去，在 main.ts 里 app.use(router) 注册，两步缺一不可。
• 路由模式由 history 选项决定，且必须传入函数调用结果：createWebHistory() 是 history 模式，createWebHashHistory() 是 hash 模式（地址栏带 #）。
• createWebHistory() 的参数是基础路径，默认 /；传 '/heima' 后所有路由地址前面都会带上这段前缀，部署到子目录时用得上。
• import.meta.env.BASE_URL 的值来自 vite.config.ts 中的 base 选项，默认就是 /，所以看不到地址栏变化。
• 易错点：漏写 app.use(router) 导致 <router-view> 空白；把 createWebHistory 忘了调用直接赋值；以为改 history 选项能生效却忘了改导入的函数名。

3. 移动端适配配置（postcss.config.js）

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport-8-plugin': {
      // 设计稿宽度，这里按 375 计算 px → vw 的换算比例
      viewportWidth: 375,
    },
  },
}

要点解释：

• 这个插件的作用是把代码里写的 px 自动换算成 vw（相对单位），从而实现移动端等比例适配。
• 安装命令：pnpm install postcss-px-to-viewport-8-plugin；配置写好后必须重启 dev 服务器才会生效。
• 文件用的是 CommonJS 写法（module.exports），编辑器可能提示 module is not defined，这是类型提示问题，配置本身能正常运行；不想看到提示可以在 .eslintrc 里关掉该行的 no-undef。
• 易错点：插件名写错会导致配置不生效；viewportWidth 要和设计稿宽度保持一致，否则整站尺寸会偏大或偏小。
• 顺带一提：main.ts 中 Vant 的样式 import 'vant/lib/index.css' 要放在 import '@/styles/main.scss' 之前，否则后面自定义的 CSS 变量覆盖会被 Vant 样式反压回去。

常见错误

1. 终端提示“'pnpm' 不是内部或外部命令”

• 现象：全局安装后执行 pnpm -v 报错。
• 原因：终端未重开、PATH 未刷新；或 Node 版本过低 / 未启用 corepack。
• 修法：重开终端；仍不行执行 corepack enable pnpm，确认 node -v 正常后再装。

2. install 后启动报 “Cannot find module …”，依赖树错乱

• 现象：pnpm dev 缺包，node_modules 里某些包是空目录。
• 原因：pnpm 的硬链接结构与残留的 npm 安装、package-lock.json 混用。
• 修法：删除 node_modules、package-lock.json、pnpm-lock.yaml 后重新 pnpm install，全流程只用 pnpm。

3. 保存后代码风格不自动修复，仍是双引号 / 有分号

• 现象：改完 ESLint 配置，保存一次没反应，保存两次才生效，甚至完全不变。
• 原因：没装 ESLint 扩展或未开启保存时 codeActionsOnSave；同时开了编辑器默认“保存时格式化”与 Prettier 扩展，格式化结果覆盖了 ESLint 的修复；ESLint 服务有缓存。
• 修法：关掉默认保存格式化，只保留 ESLint 修复；命令面板执行 ESLint: Restart ESLint Server；兜底用 pnpm lint 全量修一遍。

4. 新建 index.vue 立刻红线：组件名应为多单词

• 现象：vue/multi-word-component-names 报错，但这是页面级组件的常规命名。
• 原因：该规则默认开启，未区分 views 目录。
• 修法：在 rules 中把该规则设为 off，或只对 src/views 忽略。

5. defineProps 解构处报“会丢失响应式”

• 现象：解构 props 出现红线，运行时却正常。
• 原因：旧版本 Vue 解构确实丢响应式，规则未随项目所用版本更新。
• 修法：Vue 3.5+ 已支持响应式解构，直接关掉该提示；低版本改用 props.xxx 或 toRefs。

6. git commit 时 husky 没拦，错误代码照样进仓库

• 现象：提交直接成功，pre-commit 未执行。
• 原因：仓库未 git init、.husky 目录未生成，或钩子文件里还留着脚手架默认的 npm test。
• 修法：先 git init 并完成一次提交，再初始化 husky；把 .husky/pre-commit 内容改成实际要执行的 lint 命令。

7. lint-staged 配好后提交很慢，或提示命令找不到

• 现象：提交时把整个项目 lint 一遍；或 pre-commit 报 command not found。
• 原因：pre-commit 里仍是全量 pnpm lint；lint-staged 未安装，或 glob 漏写 .vue/.ts。
• 修法：pre-commit 只调 pnpm lint-staged，在 package.json 的 lint-staged 字段限定 *.{js,ts,vue} 并带 --fix。

8. px 转 vw 不生效 / 覆盖 Vant 主题色无效

• 现象：审查元素仍是 px；:root 里写了变量但按钮还是蓝色。
• 原因：postcss 配置文件位置或文件名不对、改完没重启 dev server；或自己的全局样式在 Vant 样式之前引入，被后者覆盖；变量名拼错。
• 修法：确认 postcss.config.js 在根目录并重启；main.ts 中全局样式排在 Vant 的 index.css 之后引入，变量名与官方文档逐字核对。

9. 禁用内置 TS 服务后所有项目都没提示了

• 现象：TS 智能提示全部消失，换项目也不恢复。
• 原因：在用户级设置里禁用了内置 TypeScript 扩展。
• 修法：改为“禁用（工作区）”，只对当前项目生效；状态栏出现 TS 版本号 + Takeover 才算成功。

练习

1. 用 pnpm 从零创建 consult-patient-h5 项目（选 TS、Router、Pinia、ESLint + Prettier，不选 JSX 与测试），跑通 pnpm install → pnpm dev，并截图记录四个脚手架提示命令的作用。

2. 在三段 ESLint 配置全部加好后，故意在 .ts 文件写双引号 + 分号、在 .vue 文件写单引号，分别验证“保存自动修复”和 pnpm lint 全量修复的效果差异，并记录为什么要保存两次才生效。

3. 配置 husky + lint-staged 后做两组对照实验：① 在已 git add 的文件里写一个未定义变量，确认提交被拦截并报出具体行号；② 在一个未暂存的文件里埋同样的错误，确认提交能通过，从而理解“只查暂存区”的含义。

4. 按清单完成 src 目录调整（清空 assets/components/stores/views 默认内容，新增 composables、icons、services、styles、types、utils），新建 main.scss 并在 main.ts 中全局引入，然后切换 router 的 history / hash 模式，观察地址栏井号变化并改回 history。

5. 引入 Vant 并完成移动端适配与主题覆盖：把按钮主色改成项目主题绿，用开发者工具确认样式单位已由 px 编译为 vw，并把改动做一次语义化提交（如 feat: 引入 Vant 与移动端适配）。

课件图示

原视频对照

#	视频	时长
1	创建问诊项目	06:05
2	项目配置	09:41
3	配置代码检查工作流	15:04
4	目录调整	08:28
5	vue-router初始化	13:50
6	基础架构-引入Vant和移动端适配	10:48
7	基础架构-主题定制	10:34

小结

1. 包管理器全程只用 pnpm，一套 lock 文件、一次 install，混用 npm 是后续一切“缺包”报错的根源。
2. 脚手架创建时的选项决定后续配置成本，TS、Router、Pinia、ESLint + Prettier 应在创建阶段一次选对。
3. ESLint 能修的是风格，发现不了所有运行时错误；编辑器保存修复只是提效手段，命令全量修复才是兜底。
4. husky 本质是 git hook 工具，pre-commit 是提交前的最后一道闸门，拦的是代码错误，不是格式偏好。
5. 全量 lint 会随项目变大越来越慢且会改动历史文件，lint-staged 只校验暂存区是工程化必做的优化。
6. TS 托管模式 = 关闭 VS Code 内置 TS 服务（工作区级）+ 让 Volar 接管，两套服务并存只会拖慢提示。
7. 目录按职责拆分（api / composables / styles / types / utils）不是形式主义，是为了后续维护时改一处不影响一片。
8. 移动端适配靠 postcss 把 px 编译成 vw 相对单位；主题靠 CSS 变量，覆盖 UI 库的变量即可全局换肤，二者都不需要改组件代码。