在项目开发过程中代码统一是至关重要的，不然每次接手其他人的代码，第一眼过去就是 shit code ，不得不在动手修改前先格式化代码；如果他人的格式化工具和你不一样，别人也是第一时间格式化你的代码......周而复始，全是 shit code。

前端统一代码格式通过以下几步实现

# 开发工具 VsCode
比较主流的是 VsCode、WebStorm；但必须统一开发工具，组内必须是 VsCode 或者 WebStorm。以下都是基于 vsCode

![图片.png](/static/img/7f1e11a544f845a7d37df4b02d03ee12.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



# .editorconfig & EditorConfig for VS Code

![图片.png](/static/img/7d66af3e97c6e9d722895fe8c2c632b0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

EditorConfig有助于保持代码风格的一致性，尤其在多人协作项目中非常有用。它通过一个名为.editorconfig的配置文件来为不同的编辑器和IDE（包括VS Code）定义代码样式规则。

1. 添加EditorConfig for VS Code插件
2. 文件根路径添加.editorconfig，设置格式

``` js 
# http://editorconfig.org

# 表示是最顶层的配置文件，发现值为true时，才会停止查找.editorconfig文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = tab # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = false # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
```

# .prettierrc & Prettier - Code formatter

![图片.png](/static/img/2007e307c1dab74d46ac5d31acac3557.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

Prettier是一个流行的代码格式化工具，旨在通过自动应用一致的代码风格来提高代码可读性和开发效率。它支持多种语言和框架，并且可以与编辑器、IDE 以及构建工具集成，使得代码风格保持一致变得非常简单。

### 安装
``` bash 
npm install prettier -D
```

### 配置.prettierrc 文件
``` js 
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120,
  "semi": false, // 末尾加分号
  "singleQuote": true, // 是否单引号
  "trailingComma": "none" //最后一个元素后添加尾随逗号
}
```

### 格式化所有代码
``` js 
{
  "scripts": {
    "format": "prettier --write ."
  },
}
```

# husky
Husky 是一个用于 Git Hooks 的工具，它使得在 Git 事件（如 commit push等）触发时自动运行脚本变得非常简单。通过 Husky，你可以在代码提交或推送之前执行诸如代码格式化、测试、Lint 检查等操作，确保代码质量和一致性。

项目中提交代码有的时候就是一段话，或者数字，例如 git commit -m；对于后人无法理解，于是在代码提交前通过工具迫使规范提交是必要的

### 安装 husky
``` bash
npm install -D husky
```

### 初始化 husky
初始化之后会生成 .husky文件
``` bash
npx husky install
```

![图片.png](/static/img/667150a7a21134bb4dd5784a70dbdb7e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6f5041ebca8f60e08a43e8f61bb213b0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

### 编辑脚本
我们要在 commit 前统一格式化代码和提交时按照修改类型提交，分别在 pre-commit 和 commit-msg 中

![图片.png](/static/img/e122a467d48d7d19269a59f49e188a50.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6ddd2d0a16d6fb62e6b71361364a136e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


### 安装 commitlint 和 commitlint.config.js
Commitlint 是用来规范 Git 提交信息的工具，确保每次提交都遵循一定的格式标准
``` bash
npm install -D @commitlint/config-conventional @commitlint/cli
```

### 配置commitlint.config.js
``` js
/*
规范commit日志
https://commitlint.js.org
*/

const types = [
  'build', // 主要目的是修改项目构建系统（例如glup，webpack，rollup的配置等）的提交
  'ci', // 修改项目的持续集成流程（Kenkins、Travis等）的提交
  'chore', // 构建过程或辅助工具的变化
  'docs', // 文档提交（documents）
  'feat', // 新增功能（feature）
  'fix', // 修复 bug
  'pref', // 性能、体验相关的提交
  'refactor', // 代码重构
  'revert', // 回滚某个更早的提交
  'style', // 不影响程序逻辑的代码修改、主要是样式方面的优化、修改
  'test' // 测试相关的开发,
],
  typeEnum = {
    rules: {
      'type-enum': [2, 'always', types]
    },
    value: () => {
      return types
    }
  }

module.exports = {
  extends: ['@commitlint/config-conventional'],
  /*
  Level [0..2]: 0 disables the rule. For 1 it will be considered a warning for 2 an error.
  https://commitlint.js.org/#/reference-rules
  */
  rules: {
    'type-enum': typeEnum.rules['type-enum'],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never']
  }
}
```


### 提交
提交会先执行 pre-commit 这个时候会执行 npm run format 格式化代码
``` bash
git commit -m "feat:开发首页模块"
git commit -m "fix:修复了某某bug"
git commit -m "feat:xxxxxxx"
```

### Lint-staged
husky 会检查项目中所有的代码，中途接手一个老项目时会有很多错误。lint-staged 只检查本次提交所修改(指 git 暂存区里的东西)的问题，没修改过的不检查
``` bash
npm install -D lint-staged
```

### 配置 package.json
``` json
{
"lint-staged": {
    "*.{js,vue}": [
      "prettier --write"
    ],
    "*.less": [
      "stylelint --fix"
    ]
  },
}
```

# 总结
对于一定规模的项目，毫无疑问是多人开发的，如果项目中的代码风格不统一，非常影响心情

试想一下，你从代码仓库中拉取代码在 vscode 中保存一下，结果全是修改，你只是保存了一下并没有修改，而后续你的修改也埋在当中，于是不得不先提交格式化修改....反复下去就是 shit code

通过 prettier，editorconfig 和 husky 可以很大程度上避免这些问题，但是并不绝对，合并的代码审查也是十分必要的

前端项目中统一代码格式

# 前言
随着前端应用功能的增加，项目的打包体积也会不断膨胀，影响加载速度和用户体验。本文介绍了几种常见的打包优化策略，通过Vite和相关插件，帮助减少项目体积、提升性能，优化加载速度。

## rollup-plugin-visualizer
rollup-plugin-visualizer插件，是一个可视化工具，以图表的形式，展示打包结果的模块构成与体积分布。

**安装：**

``` bash
pnpm add rollup-plugin-visualizer -D
```

**用法：**
``` js
// vite.config.ts

import { visualizer } from "rollup-plugin-visualizer";

module.exports = {
  plugins: [visualizer()],
};
```

pnpm build 一下, 打开生成的stats.html文件。


![image.png](/static/img/03299707a8a039d4da96ef0aa450e4e8.image.webp)
xlsx 、html2canvas、jspdf，这3个第三方库占了主要部分。



# 分包策略
在项目中，xlsx 、html2canvas、jspdf，只在对应功能模块中使用，可以单独打包出来，用户使用对应功能，才会下载对应js脚本。

在rollupOptions 选项的 manualChunks函数中控制分包逻辑，并配合 experimentalMinChunkSize 属性，阀值设置为 20 KB，模块大小，大于20kb的才会单独打包成chunk。

``` js
rollupOptions: {
  experimentalLogSideEffects: true,
  output: {
    experimentalMinChunkSize: 20 * 1024,
    manualChunks: (id: string) => {
      if (id.includes('html2canvas')) {
        return 'html2canvas';
      }
      if (id.includes('jspdf')) {
        return 'jspdf';
      }
      if (id.includes('xlsx')) {
        return 'xlsx';
      }
    }
  }
}
```

build一下，查看控制台信息。 

![image.png](/static/img/98d5b18a8b243d3ddacba630b6614488.image.webp)

成功的将这3个第三方库单独打包成chunk，vite默认会把所有静态资源都打包到assets文件夹，配置chunkFileNames、entryFileNames、assetFileNames将静态资源分类。

``` js
chunkFileNames: 'static/js/[name]-[hash].js', // 代码分割后文件名
entryFileNames: 'static/js/[name]-[hash:6].js', // 入口文件名
assetFileNames: 'static/[ext]/[name]-[hash].[ext]' // 静态资源文件名
```

build一下，打包后到结果：

![image.png](/static/img/fc59f76f7e2f062227f00ca634d3d6b1.image.webp)


# 减少包体积
**vite-plugin-remove-console移除consele**

**安装：**
``` bash
pnpm add vite-plugin-remove-console -D
```

**用法:**
``` js
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import removeConsole from "vite-plugin-remove-console";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), removeConsole()]
});
```
  
# vite-plugin-compression压缩代码

vite-plugin-compression插件压缩代码成gzip格式或者br格式，ngixn开启gizp，http缓存策略。

**安装:**
``` bash
pnpm add vite-plugin-compression -D
```

**配置说明**

![image.png](/static/img/cd14c14131e49354dcc14540c2ab924e.image.webp)

**用法:**
``` js
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [ 
      viteCompression({
        threshold: 1024 * 20, 
        algorithm: 'gzip',
        ext: '.gz'
      })]
  };
};
```

build一下：

![image.png](/static/img/97f8c4171a8ab2e1ac0ce945322b2467.image.webp)

修改压缩算法，打包成br格式：
``` js
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [ 
      viteCompression({
        threshold: 1024 * 20, 
        algorithm: 'brotliCompress',
        ext: '.br'
      })]
  };
};
```

打包结果：

![image.png](/static/img/9584c0b15d6d13b52bf2fdc8afaec305.image.webp)
br格式，明显比gzip格式还小。


# 外链CDN

如果条件允许外链接CDN，那么使用rollup-plugin-external-globals 插件将外部依赖映射为全局变量，避免将其打包进最终文件，减小文件体积。配合vite-plugin-html 自动注入代码到HTML文件中。

**安装：**
``` bash
pnpm add vite-plugin-html rollup-plugin-external-globals -D
```

**用法：**
``` js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html';
import externalGlobals from 'rollup-plugin-external-globals';

const cdn = {
  jspdf: 'jspdf',
  xlsx: 'XLSX',
  html2canvas: 'html2canvas'
};

const externalList = Object.keys(cdn);

const globals = externalGlobals(cdn);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          jspdfscript:
            '<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>',
          xlsxscript:
            '<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>',
          html2canvasscript:
            '<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>'
        }
      }
    })
  ],
  build: {
    rollupOptions: {
      external: externalList,
      plugins: [visualizer({ open: true }), globals]
    }
  }
});
```

在index.html中使用CDN脚本：
``` html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AIChat</title>
    <%- xlsxscript %> <%- jspdfscript %> <%- html2canvasscript %>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

对比效果：

优化前：1.7MB

优化后：899KB

# 总结
- **可视化分析**：使用 rollup-plugin-visualizer 直观查看打包后的模块大小，找出大体积模块进行优化。
- **分包策略**：通过 manualChunks 将大依赖库分离到单独的chunk，减少首屏加载资源。
- **去除无用console**：利用 vite-plugin-remove-console 删除开发环境中的console，减少打包体积。
- **代码压缩**：通过 vite-plugin-compression 压缩代码为 gzip 或 brotli 格式，减小文件大小。
- **外链CDN**：使用 rollup-plugin-external-globals 和 vite-plugin-html 将常用库通过CDN加载，避免将它们打包到最终文件。

这些优化策略成功将打包体积从1.7MB减少到899KB，提升了应用性能。

Vite打包优化实践：从分包到性能提升

# 一、DeepSeek质控能力矩阵

![image.png](/static/img/3a4f8bb872f11778f2ec57f17bece6a9.image.webp)

自然语言理解、知识图谱引擎、规则推理系统、联邦学习框架的组合体现了DeepSeek在智能质控中的多重优势。通过非结构化文本解析、诊疗逻辑验证、规则执行和多中心模型优化，不仅提升了数据处理效率，还能根据医院间数据的差异不断优化模型的泛化能力。



# 二、关键技术实现
## 1. 缺陷检测算法

通过实体识别（NER）、规则匹配和逻辑推理，DeepSeek能够自动检测病历中的各类缺陷，提高了诊疗过程的规范性和安全性。  

```python
def detect_defect(emr_text):
    # 实体识别
    entities = deepseek.ner(emr_text)
    # 规则匹配
    rule_violations = rule_engine.check(entities)
    # 逻辑推理
    logic_errors = knowledge_graph.validate(entities)
    return rule_violations + logic_errors
```
## 2. 智能修正建议
系统能够生成详细的缺陷修正建议，并提供标准化的修正示例，这对医生的日常工作提供了极大的支持，有助于减少因书写不规范引发的医疗风险

```js
{
  "缺陷类型": "规范性缺陷",
  "问题描述": "诊断名称不规范",
  "错误示例": "肺部感染（非标准名称）",
  "建议修正": "J18.901 肺炎",
  "依据来源": "ICD-11编码规范2023版"
}
```
## 3. 联邦学习框架
这一机制能够在保护医院数据隐私的同时，提升模型的普适性和精准度。通过聚合各医院的数据梯度，持续优化全局模型，最终实现跨医院、跨区域的质控能力提升。

![image.png](/static/img/00a9cb0f7f04b23de1aaa8f467b6fbb9.image.webp)

# 三、五层质控体系架构
## 1. 数据治理层
通过对病历数据的预处理（文本解析、信息抽取、标准化映射）和质量标记，确保系统输入的数据质量，为后续的智能分析打下基础。# 病历数据预处理流程

```python
def preprocess(emr_data):
    # 非结构化文本解析
    parsed = deepseek.nlp.parse(emr_data)
    # 关键信息抽取
    entities = deepseek.ner(parsed)
    # 标准化映射
    standardized = emr_mapper(entities)
    # 质量标记
    return quality_tagging(standardized)
```
## 2. 规则引擎层
三级规则体系：  
通过三级规则体系，确保了对病历的完整性、规范性和逻辑性的全面把控。这个设计非常符合医疗行业对数据精准性的高要求。
| 规则类型       | 检测维度                  | 示例规则                          |
|----------------|---------------------------|-----------------------------------|
| 完整性规则     | 必填项/时间节点           | 入院记录需包含主诉、现病史等8项   |
| 规范性规则     | 术语/格式标准             | 诊断名称必须使用ICD-11编码        |
| 逻辑性规则     | 诊疗路径合理性            | 手术记录与麻醉记录时间逻辑校验    |

## 3. 智能分析层
通过DeepSeek解析病历数据并结合规则引擎和知识库进行深度分析，实时提供缺陷反馈，并且自动更新知识库，保证系统的智能性和自我进化能力。

![image.png](/static/img/747d86e7524774f8e3bbae99aadad601.image.webp)

## 4. 可视化层
通过图表和仪表盘等可视化手段，便于管理者和医生实时掌握质控情况，及时做出调整和改进。

```js
{
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    data: [
      { value: 68, name: '完整性缺陷' },
      { value: 23, name: '规范性缺陷' },
      { value: 9, name: '逻辑性缺陷' }
    ]
  }]
}
```
## 5. 持续优化层
联邦学习机制能够实现医院之间的协同学习，逐步提升模型准确性，符合医疗领域的隐私保护要求。  
联邦学习机制：

![image.png](/static/img/d3a26d64f3f21a483acf650fbe9a97ea.image.webp)

# 四、十二步实施路径阶段
## 1：需求准备（1-2个月）
1. 质控标准梳理：整理医院现有质控规则3000+条
2. 数据资产盘点：抽取3年历史病历建立训练集
3. 标注系统搭建：开发病历缺陷标注工具
4. 知识图谱构建：建立包含疾病-症状-药品关系的医学知识库阶段

## 2：系统建设（3-4个月）
1. 规则数字化：将人工规则转化为可执行代码
2. 模型训练：使用DeepSeek完成BERT+CRF模型训练
3. 系统对接：与HIS/EMR系统集成（HL7标准接口）
4. 沙盒测试：在测试环境完成千份病历验证阶段

## 3：部署优化（2-3个月）
1. 试点运行：选择3个重点科室上线
2. 人机对比：与人工质控结果进行一致性检验
3. 流程再造：建立AI质控-医生修正-闭环管理机制
4. 持续迭代：每月更新知识库和模型

# 五、关键成功要素
- 数据治理：建立标准化病历数据字典（覆盖300+字段）
- 医工协同：临床专家与AI工程师联合工作组
- 渐进策略：从基础规则到复杂逻辑分阶段实施
- 安全合规：通过等保三级认证+区块链存证

# 六、持续优化机制
- **月度迭代**：
1. 新增10-15条临床路径规则
2. 优化NER模型准确率（目标>98%）
3. 更新医学知识图谱（新增500+节点）
- **年度升级**：
1. 扩展质控范围（护理记录/知情同意书等）
2. 对接DRG/DIP医保审核
3. 构建区域质控联盟链

# 七、实施建议
该方案通过DeepSeek的NLP和知识推理能力，使电子病历质控实现：
- 从抽样到全量：100%病历实时质控
- 从人工到智能：缺陷发现准确率>95%
- 从事后到事前：医生书写时即时提醒
- 从孤立到协同：区域质控标准统一

建议医院优先实施基础规则质控（完整性/规范性），6个月后再拓展复杂逻辑校验，最终构建覆盖"书写-归档-应用"全流程的智能质控体系。

DeepSeek电子病历智能质控系统方案

# cursor简介
Cursor 是一款集成了 AI 技术的代码编辑器，作为广受欢迎的 VS Code 的一个衍生版本，它不仅继承了 VS Code 的强大功能，还全面融入了 AI 功能，从而极大地简化了开发工作流，让编程更加便捷高效。

对于 VS Code 用户来说，完全可以无缝衔接到 Cursor 上进行使用，享受到更加智能化的编码体验。

# 相关网站
[官网](https://www.cursor.com/)  
[官方使用文档（英文）](https://docs.cursor.com/get-started/migrate-from-vscode)  
[第三方使用文档（中文）](https://learn-cursor.com/)  




# cursor内容整理

![image.png](/static/img/503e79966c72dde8b38db35da7e07405.image.webp)

# cursor提示词（vue3）
`

You are an expert in TypeScript, Vite, Vue.js, Vue Router, Pinia, VueUse, Element Plus, Axios, Dayjs, UnoCSS, Tailwind CSS, scss, with a deep understanding of best practices and performance optimization techniques in these technologies.
  
Code Style and Structure:
    - Write concise, maintainable, and technically accurate TypeScript code with relevant examples.
    - Use functional and declarative programming patterns; avoid classes.
    - Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
    - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
    - Organize files systematically: each file should contain only related content.
    - Each change, do not affect other functions and interface layout style.
    
File Directory
    If initializing a project, strictly use the following file path directory:
        |-- public/               #相对静态资源
        |
        |-- vite/                 #vite配置
        |   |-- plugins/          #vite插件
        |
        |-- src/
        |   |-- api/              #api定义
        |   |-- assets/           #动态静态资源
        |   |-- components/       #公共组件
        |   |-- hooks/            #vue hooks
        |   |-- layouts/          #布局
        |   |-- locale/           #多语言配置
        |   |-- routers/          #vue-router配置及定义
        |   |-- stores/           #pinia配置及定义
        |   |-- utils/            #公共工具库
        |   |-- types/            #TypeScript类型声明
        |   |-- views/            #页面文件
        |   |   |-- login/        #示例页面文件
        |   |   |   |-- index.vue
        |   |   |   |-- index.scss
        |   |
        |   |-- App.vue           #app.vue
        |   |-- main.ts           #入口文件
        |
        |-- .env                  #环境变量（全局）
        |-- .env.development      #环境变量（开发）
        |-- .env.production       #环境变量（生产）
        |-- .eslintrc.ts          #eslint配置文件
        |-- .gitignore            #git忽略配置
        |-- .npmrc                #npm配置
        |-- uno.config.ts         #unocss配置
        |-- tsconfig.json         #ts配置文件
        |-- index.html    
        |-- package.json          #项目依赖
        |-- README.md             #项目说明文档

  
Naming Conventions:
    - FileName use lowercase with dashes for directories (e.g., components/auth-wizard).
    - Favor named exports for functions.
  
TypeScript Usage:
    - Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
    - Avoid enums; use maps instead for better type safety and flexibility.
    - Use functional components with TypeScript interfaces.
  
Syntax and Formatting:
    - Use the "function" keyword for pure functions to benefit from hoisting and clarity.
    - Always use the Vue Composition API script setup style.
  
UI and Styling:
    - Use Element Plus for components, Use UnoCSS + TailwindCSS class for styling, Use scss for style type, Scss use 'modern-compiler'.
    - Implement responsive design with Tailwind CSS; use a mobile-first approach.
  
Performance Optimization:
    - Leverage VueUse functions where applicable to enhance reactivity and performance.
    - Wrap asynchronous components in Suspense with a fallback UI.
    - Use dynamic loading for non-critical components.
    - Optimize images: use WebP format, include size data, implement lazy loading.
    - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

Language:
    - Use vue-i18n, default language is Zh-ch.
  
Key Conventions:
    - Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.

Other Tools:
    - Use unplugin-auto-import, unplugin-vue-components, lodash, vue-i18n, js-cookie, autoprefixer.

Cursor:
    - Prompt my language to use simplified Chinese.
    
`

cursor使用总结

在 Vue3 开发中，路由管理一直是项目结构中的重要组成部分。  传统的路由配置方式需要手动编写每个路由的配置信息，这在页面众多的大型项目中显得尤为繁琐。  
**unplugin-vue-router** —— 能够自动化生成 Vue3 路由的插件

## unplugin-vue-router简介

![image.png](/static/img/14fef4aefeec441e6e6d1635281b79b7.image.webp)

unplugin-vue-router 是一个构建时的插件，它能够基于你的 Vue 组件文件自动生成路由配置。  
这意味着你不再需要手动编写冗长的路由配置代码，只需按照约定创建组件文件，路由就会自动配置好。

unplugin-vue-router 插件通过构建时的钩子函数，动态生成 Vue Router 的代理模块和路由配置，简化了路由管理的工作。

同时，通过生成 TypeScript 声明文件，为开发者提供了良好的代码提示和类型检查支持。这种自动化的路由生成方案，不仅提高了开发效率，也减少了人为错误的可能性，是 Vue 3 开发者值得尝试的工具。




## 安装与配置
### 安装插件
首先，在你的 Vue3 项目中安装 unplugin-vue-router：  
`npm install -D unplugin-vue-router`  

### 配置 Vite
如果你使用的是 Vite 作为构建工具，需要在 vite.config.ts 中进行配置：

```
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  plugins: [
    VueRouter({ /* options */ }),
    vue(),
    // ...其他插件
  ],
  // ...其他配置
});
```
注意，VueRouter 插件需要在 vue() 插件之前引入。

### 配置路由
接下来，在 src/router/index.ts 中，使用 unplugin-vue-router 提供的 routes 来创建路由器：

```
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from 'vue-router/auto-routes';

const router = createRouter({
  history: createWebHistory(),
  routes: routes, // 使用自动生成的路由
});

export default router;
```

## 自动路由规则
unplugin-vue-router 会根据你 src/pages 目录下的组件文件自动创建路由。例如：

src/pages/index.vue 会自动对应到根路由 /。

src/pages/detail.vue 会自动创建路由 /detail。

对于动态路由，如 src/pages/detail/[id].vue，会自动生成/detail/:id 路由。

此外，[...404].vue 文件会被用作 404 错误页面的路由。

更多配置，请参考 unplugin-vue-router 官方文档：https://uvr.esm.is/guide/file-based-routing.html

## 自定义路由
虽然 unplugin-vue-router 提供了强大的自动路由功能，但在某些情况下你可能需要添加自定义路由。你可以通过扩展自动生成的 routes 数组来实现：
```
// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from 'vue-router/auto-routes';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...routes,
    {
      path: '/custom', // 自定义路由
      component: () => import('@/views/custom.vue'),
    },
  ],
});

export default router;
```

### 实现原理解析
unplugin-vue-router 是一个基于 unplugin 库开发的插件，它能够与 Vite、Webpack、Rollup 等多种构建工具无缝集成。该插件通过分析项目中的 Vue 文件，自动生成路由配置，无需开发者手动编写路由文件。

unplugin-vue-router 的工作原理是在构建时扫描指定的目录（默认为 src/pages），根据文件名和目录结构生成路由配置。它利用了 Vue Router 的新特性，并结合了 TypeScript 来提供类型安全和自动完成。

### 插件配置与初始化
在项目的配置文件中，例如 Vite 的 vite.config.js，我们通过配置 unplugin-vue-router 插件，指定路由文件的生成目录和类型声明文件的位置：

```
// vite.config.js
import { defineConfig } from 'vite';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: 'src/pages', // 指定路由文件所在的目录
      dts: 'types/typed-router.d.ts', // 指定类型声明文件的输出路径
    }),
    // ...其他插件
  ],
  // ...其他配置
});
```

### 构建过程的钩子函数
unplugin-vue-router 插件通过构建工具提供的钩子函数来实现自动化路由的生成。以下是构建过程中的关键步骤和对应的图示：

resolveId 钩子: 插件拦截对 vue-router/auto 的导入请求，将其转换为虚拟模块标识符。
![image.png](/static/img/49ed63185ecc732f88cbded7f4503170.image.webp)

load 钩子: 当构建工具请求加载虚拟模块时，插件根据配置生成实际的路由配置代码。
![image.png](/static/img/9eeb8c52c042555cbe330618d430dea4.image.webp)

### 动态生成 Vue Router 代理
unplugin-vue-router 的核心之一是动态生成 Vue Router 的代理模块。该模块会导出 vue-router 的所有 API，并扩展 createRouter 方法以包含自动生成的路由配置：
![image.png](/static/img/36a07cd84b61238f9cd6f17d28d369b5.image.webp)

### VSCode 代码提示支持
为了支持 VSCode 的代码提示功能，unplugin-vue-router 会在构建时生成一个 TypeScript 声明文件（例如 types/typed-router.d.ts），该文件声明了 vue-router/auto 模块的类型信息。通过在 tsconfig.json 中包含此文件，VSCode 能够识别自动生成的路由，并提供相应的代码提示。