Cobre设计系统V3(@cobre-npm/ds-v3(中文(简体) )
Vue 3 + Cobre 平台的 TypeScript 组件库,通过文件记录和开发 故事书。 。 。 .
抬头: 本项目使用 小时而不是npm。 (笑声) 运行
npm install将生成一个偏差package-lock.json并且能产生一个破裂的、node_modules。总是使用pnpm。 。 。 .
先决条件
- 节点.js 20 (CI使用节点24).
- 小时 十. 准确的版本通过
packageManager输入package.json,所以最简单的设置是让 核心软件包 和它比对:
要手动安装 :corepack enablenpm install -g pnpm。 。 。 .
项目设置
pnpm install
更新检出时, pnpm 可能会提示您批准本地依赖的构建脚本( Nameesbuild, (中文(简体) ), @swc/core, (中文(简体) ), @parcel/watcher, (中文(简体) ), unrs-resolver, (中文(简体) ), vue-demi) (中文(简体) ). 如果是,请批准:
pnpm approve-builds
然后重新运行 pnpm install 如果需要的话.
postinstall 下载渲染道测试的无头铬( ~95 MB, 每条一次)
(原始内容存档于2013-10-10). machine, idempotent. 它住在这里 postinstall 而不是在测试脚本中,因为浏览器是
套房的依赖性,并且因为不止一个指令运行该套房——放入其中 test
没有浏览器就留下了其他的入口. SKIP_TEST_BROWSER=1 跳过它,对于任何安装依赖性且从未运行套房的图像——
构建故事书的多克文件设置了它。 在高山上它跳过自己,因为
Playwright 出版只建立 glibc. --ignore-scripts 也跳过,而且 pnpm test:browsers
把它拿回来.
与故事书一起开发(主要工作流程)
这是一个组件库——日常的开发发生在"故事书"中,这使得每个组件的变体和文件:
pnpm storybook
打开时间 http://localhost:6006 (英语)。 。 。 .
pnpm dev页:1vite)只服务于最低限度src/main.ts编号 :App.vue绳子。 没错 没有 组件相册——使用pnpm storybook用于正常发展.
常见命令
| 命令 | 它会做什么 |
|---|---|
pnpm install | 安装依赖关系 |
pnpm storybook | 在端口 6006 运行 Storybook dev 服务器( 主要 Dev 工作流程) |
pnpm dev | 裸露的Vite Dev带(src/main.ts)——很少需要 |
pnpm build | 类型检查 + 将可出版库建入 dist/ |
pnpm build-storybook | 构建静态故事书网站 |
pnpm test | 整个大门:故事渲染道,逻辑道 有覆盖,变化无常 |
pnpm test:stories | 仅使用 Render 道 —— 以无头 Chromium 装上所有 81 个故事 |
pnpm test:unit | 仅逻辑道,对 coverage-floor.json |
pnpm test:browsers | 重新下载Chrimium建造了变形道的需要——通常没有必要, pnpm install 这样做 |
pnpm lint | 自动修正( A) ESLint 语录 |
测试
套房分成两道 因为两个号码不是同一件事 (单位:千美元)ADR-0008 (英语):
- 渲染道 (单位:千美元)
test:stories)——每个故事无出错地上载出无头Chromium通过@storybook/addon-vitest这是 二进制:不附带百分比。 故事书标记a 当一个故事写出来,却无动于衷时 措施 已执行没有 已核实。 。 。 . - 逻辑道 (单位:千美元)
test:unit——非构成部分来源(src/**/*.ts减去故事,测试, 仅限类型模块、桶和dev条目),并强制执行覆盖阈值.
覆盖层的缝隙
coverage-floor.json 守住门槛,它就是 一层楼,不是目标它被设定为什么
门被打开的当日测量的回购——没有追溯95%,也没有回填
作为先决条件的现有组成部分。 它只能上升:
scripts/check-invariants.mjs当文件中的任何数字下降到基数以下时, 构建失败 参考: 是一个变化级别检查,所以它运行在 CI, 或本地与pnpm test:invariants -- --base origin/trunk。 。 。 .src/utils/repo-invariants.test.ts失败当vitest.config.mts停止读取其阈值 从文件, 否则, 这将是一个沉默的方式 将门 降为一无所有.
提高地板:提高覆盖率,运行 pnpm test:unit,并将报告的总数复制到
coverage-floor.json。 。 。 .
添加测试
成份行为属于一个故事——那就是已经存在的道和消耗性的道 应用读取为文档 。 到达逻辑道, 当主体是一个可调和, 纯 函数或共享状态.
建议的 IDE 设置
虚拟系统 + 键 Vue - 官方(伏尔) (残疾维图尔.
类型支持 .vue TS 进口
类型脚本无法键入 .vue 自己进口,所以我们使用 vue-tsc 用于类型检查和 Vue (Volar) 扩展以让编辑器的 TS 语言服务了解 .vue 类型.
项目结构和公约
见 CLAUDE.md 结构概况:原子设计布局atoms编号 :molecules编号 :organisms页:1 Cobre* 编号 : co- 命名公约、SCSS令牌系统以及如何添加新的组件(每个组件都生活在自己的文件夹中,有一个 .vue页:1 .stories.ts,则 index.ts,必须从 src/components/index.ts 财务报告和审定财务报表 src/index.ts) (中文(简体) ).
解决问题
npm run dev编号 :npm install失败或行为异常 你用错了包管理器 删除任何package-lock.json,然后使用pnpm install。 。 。 .- pnpm 请求批准构建脚本 - 运行
pnpm approve-builds,然后重运行pnpm install如果需要的话. - 断接或断接
node_modules—— 说rm -rf node_modules && pnpm install。 。 。 .