选择 MyCompany 用户界面
选择 MyCompany UI 是执行的 UI 组件库 我们 设计系统。 选择MyCompany UI 写入 Vue.js (英语) 其目标是:
- 创建可重复使用的UI组件来加速前端开发.
- 为选择 MyCompany 中的所有组件创建用户界面一致性 .
使用量
-
要在您的工程中选择 MyCompany UI, 请添加为依赖 :
pnpm add @choosemycompany/ui -
在应用程序中包含所需的样式表 .
@import "@choosemycompany/ui/dist/assets/index.css"; -
按要求导入组件 :
import { CmcButton } from "@choosemycompany/ui";说明: 选择MyCompany UI 兼容树摇, 您可以在您的工程中启用此功能 减少捆绑大小.
快速启动 - 开发
确保你有 节点 23.x(LTS)和 小时 10.12或较新.
# Clone the project
git clone [email protected]:choosemycompany/cmc-ui.git
# Navigate to the root of the project
cd cmc-ui
# Install the project
make install
链接设计系统测试您的应用程序中的更改
在 cmc 前端/ 创建 docker- compose. override. yml
商业服务实例:
services:
commercial:
volumes:
- ./commercial/docker-entrypoint.sh:/usr/local/bin/docker-entrypoint
- ./commercial:/srv/app/commercial:cached
- ./commercial/node_modules:/srv/app/commercial/node_modules:delegated
- /tmp/.X11-unix:/tmp/.X11-unix
- ../cmc-ui:/srv/app/cmc-ui
在/srv/app/商业中创建 pnpmfile.local.cjs
module.exports = {
hooks: {
readPackage(pkg) {
if (pkg.dependencies?.['@choosemycompany/ui']) {
pkg.dependencies['@choosemycompany/ui'] = 'link:../cmc-ui';
}
return pkg;
},
},
};
通过.npmrc(不执行)在本地启用
pnpmfile=pnpmfile.local.cjs
现在,每次你想看到设计系统在应用程序中的变化,就运行 pnpm build:lib 在 cmc-ui 中,它应该用更新的组件重新装入您的应用程序.
设计符号
选择MyCompany UI 使用设计符号来维持一个单一的真理源,通过自动化, 可用于不同的用途。 更多信息: 设计标志 设计托肯斯社区小组。 。 。 .
释放
| 触发 | 中情局 |
|---|---|
| 任何分支或拉动请求 | 林特和测试 |
合并为 main | 林特,测试,故事书 部署在预录 |
vX.Y.Z 标签 | Lint, 测试, 版本检查, npm 发布, 故事书部署到 prod |
标签必须匹配 version 内 package.json,而该版本必须完全是一个补丁,小于或比npm上公布的最新版本重要一步.
-
打开
develop,颠倒version内package.json在拉请求. -
打开调取请求
develop改为main并把它与一个合并的承诺,而不是一个壁球,所以main财务报告和审定财务报表develop保持同样的历史. -
请检查access-date=中的日期值 (帮助) 前作中"文史资料".
-
标记
main并按下标签:git fetch origin git tag v1.2.3 origin/main git push origin v1.2.3
规则
- 图书馆用户将使用的常数应在
<ComponentName>.constants.ts和组件中使用的常数必须放在<ComponentName>.vue.ts。 。 。 .