使用 pnpm workspaces + Turborepo 搭建 Monorepo 架构的管理端全栈项目。后端采用 NestJS + TypeORM + MySQL，前端采用 Vite + Vue 3 + Element Plus，前后端共享类型定义。
| 层 | 技术 | 说明 |
|---|---|---|
| 包管理 | pnpm workspaces | Monorepo 标准方案 |
| 构建 | Turborepo | 增量构建、任务编排 |
| 后端 | NestJS + TypeORM | TypeORM 与 NestJS 深度集成 |
| 数据库 | MySQL | 关系型数据库 |
| 前端 | Vite + Vue 3 + Element Plus + Pinia + Vue Router | 现代前端方案 |
| 测试 | Vitest（前后端统一） | 兼容 Vite 生态 |
| API 文档 | @nestjs/swagger（OpenAPI） | 自动生成接口文档 |
Tree Shaking 树摇优化 限制: js ESM 模块PurgeCSS （CSS 原子化）let lastSrcs;
const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;
async function getSrcs() {
const html = await fetch(`/?_timestamp=${Date.now()}`).then(res => res.text());
scriptReg.lastIndex = 0;
const srcs = [];
let match;
while ((match = scriptReg.exec(html))) {
srcs.push(match.groups.src);
}
return srcs;
}
async function checkUpdate() {
const srcs = await getSrcs();
if (lastSrcs) {
const diff = srcs.filter(src => !lastSrcs.includes(src));
if (diff.length) {
console.log('有新的脚本更新了', diff);
return true;
} else {
return false;
}
}
}
const time = 2000;
function check() {
setTimeout(async () => {
const hasUpdate = await checkUpdate();
if (hasUpdate) {
const res = comfirm('有新的脚本更新了，是否刷新页面？');
if (res) {
location.reload();
}
} else {
check();
}
}, time);
}
Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。