Cooper 组件库

Vue 3 组件库由 TypeScript, Vite, 和 Tailwind CSS 所建. 发表于 @cooperco/cooper-component-library 并设计通过GraphQL与CMS内容集成.

技术堆栈

• Vue 3.5+ 单曲 - API的构成 <script setup>
• 类型脚本 5.3+ - 启用严格模式
• 尾风 CSS 3.4+ - 通用第一型号
• 维特 5.2+ - 图书馆构建模式
• 故事书 8.2+ - 组成部分文件
• 图QL - 内容丰富的内容管理系统整合
• 小时 - 软件包管理器

建议的 IDE 设置

• VS 代码 + 键 Vue - 官员 (原为伏尔)并禁用 Vetur

发展

# Install dependencies
pnpm install

# Start Storybook dev server
pnpm run dev

# Run linter
pnpm run lint

# Fix linting issues
pnpm run lint:fix

# Type check
pnpm run check-types

本地测试

在出版前在消费项目中测试组件库:

# 1. Build and pack the library
pnpm run local-test

这创造了一个 .tgz 根目录中的文件(例如, cooperco-cooper-component-library-0.1.61.tgz(中文(简体) )

# 2. In the consuming project, install the local package
pnpm add /path/to/cooperco-cooper-component-library-0.1.61.tgz

这使得您可以在发布到 npm 之前测试本地的更改 .

建筑和出版

当修改合并到 main数字 :

工作流程

1. 合并到主机 - 合并您的特性分支 main
2. 补丁版本 - 使用更新版本编号 npm version patch (或 minor编号 :major(中文(简体) )
3. 发布 - 运行 npm publish 发布到 npm 登记册
4. 推开 - 推动更改和标记到 GitHub

热补版

如果一项紧急的修复措施必须到达一个被固定在更古老的图书馆的环境 版本,和固定 触摸不到任何下 cms/,参见 文件/热补丁-释放.md 用于发布“ 旧标签 + this” 仅作为在中间迁移中不拖动的预放出.

构建进程

当你跑的时候 pnpm run build,以下按顺序排列:

1. build:types - 汇编 Vue 组件类型脚本定义
2. build:cms - 编写内容丰富的图表QL查询
3. vite build - 构建组件库捆绑

所有建筑的文物都输出给 dist/ 目录.

软件包导出

包输出多个切入点 :

• 组件 : @cooperco/cooper-component-library - 主要组成部分图书馆
• 样式 : @cooperco/cooper-component-library/css/main.css - 主要风格
• 主题: @cooperco/cooper-component-library/css/theme.css - 主题变量
• 查询 : @cooperco/cooper-component-library/cms/contentful/graphql - 图QL查询

项目结构

├── src/
│   ├── components/          # Vue components
│   │   ├── ComponentName/
│   │   │   ├── ComponentName.vue
│   │   │   └── ComponentName.ts
│   │   ├── components.ts    # Component exports
│   │   └── types.ts         # Type exports
│   ├── config/              # Configuration (color palettes, passthroughs)
│   └── utils/               # Utility functions
├── cms/
│   └── contentful/
│       └── queries/         # GraphQL queries (see cms/contentful/queries/README.md)
├── .storybook/              # Storybook configuration
│   └── components/          # Component stories
└── dist/                    # Build output (generated)

文档

• 组成部分文件: 运行 pnpm run dev 查看故事书
• 图QL 查询 : 见 cms/contentful/querys/README.md (中文(简体) )
• 发热器 : 见 文件/热补丁-释放.md

TODO 问题

• 还有很多地方 class typeScript 无法识别。 例子有"开始"/"结束""容器模块". 因为我们没有定义 class 关于组件类型。 定义它们会明确超越Vue的默认属性继承行为. 得想办法绕过去