二重奏组件

这个软件包包括Dutet Web组件和相关工具.

使用量

关于使用说明,请参见 Dutit 设计系统 文档。 。 。 .

建筑

此软件包由 Stencil.js (英语),用于构建网络组件的编译器和工具链。 组件源代码用TypeScript + JSX (TSX)来写,样式表用SCSS来写.

发展

以下是开发过程中最常用的命令:

• npm start - 编译组件,开始监视变化,启动本地开发服务器
• npm test - 编译组件,开始观察变化,开始本地开发服务器并运行测试.

本地开发服务器起始于 npm start 或者说 npm test 为位于 /src/prototypes/。任何本地修改或新组件都可以在本页面上找到,因此开发时可以将其作为试验地.

在那个页面上也可以按 ctrl + p 以选择要操作的任何组件固定装置.

如何开发新组成部分

1. 创建组件文件
   1. 添加组件目录 src/components/[component-name]
   2. 添加 [component-name].tsx
   3. 添加 [component-name].scss
   4. 添加 [component-name].e2e.ts
   5. 添加 readme.md
2. 执行组件
3. 写作测试
4. 写读取器
   1. 为文件添加信息
   2. 添加综合实例
5. 测试两者的主题 default 财务报告和审定财务报表 turva
6. 浏览器测试
7. 无障碍测试,之后 二重奏无障碍核对表
8. 测试SSR
9. 添加以下内容到 docs/数字 :
   1. 在组件页面上列出的 SVG 图标
   2. 添加为 changelog.md

文件和实例

• 显示于 二重奏.com (简体中文) 作为我们的主要发展平台。 要从本地开始, 打开 /docs/ 目录和运行 npm install 财务报告和审定财务报表 npm start。 。 。 .
• 一旦服务器启动并运行,您就可以访问本地开发环境,将浏览器指向 http://localhost:8000 (英语)。文档中的组件部分此时将空出.
• 下一个,去 /packages/components/ 目录和运行 npm install 财务报告和审定财务报表 npm start 启动组件监视并构建任务.
• 如果你现在打开任何一个 *.tsx, (中文(简体) ), *.scss,或 readme.md 下方的文件 /packages/components/src/components/ 并点击保存,这将触发重建任务,同时将必要的更改复制到运行在本地文档中 http://localhost:8000 (英语)。 。 。 .
• 编辑 *.tsx 财务报告和审定财务报表 *.scss 文件将生成一个新的 JavaScript 捆绑,同时编辑 readme.md 文件只生成和复制文档和组件使用示例.
• 在研究新的组件或编辑现有组件时,确保跟踪我们 代码样式指南 参见准则部分.
• 构成部分变异实例存在于每个构成部分 readme.md,而组件模板位于 /docs/src/templates/ 目录.

版权

版权:"2023 Local Tapiola/Turva".