费利克斯健康村组成部分图书馆
一个基于活字的单曲,包含所有Felix Health的活字组件和这些组件的文档. 当前支持Vue 3.
在项目中消耗
目前这个项目依赖于TailwindCSS(和我们的Tailwind) 设计系统) (中文(简体) ). 确保在您的项目中安装此功能作为先决条件 .
- 安装软件包
npm i @felix-health/vue-components-vue3
- 将库 css 导入到您的主 CCs 文件 :
/* Vue 3 */
@import '@felix-health/vue-components-vue3/dist/style.css';
- 导入您主 js 文件的所有组件 :
/* Vue 3 */
import * as FelixComponents from '@felix-health/vue-components-vue3';
// Global registration in your main.js/App.vue file
Object.entries(FelixComponents).forEach((name, component) => {
Vue.component([name, component]);
});
⚠️ 说明: 如果您想要支持服务器渲染, 有些组件依赖于对象, 如 document 或者说 window 在服务器上不可用。 如果您想要在 SSR 上下文中使用, 您可能无法按照上述条件一次性导入所有组件, 而是需要识别这些组件, 并在仅针对客户端的情况下单独导入 .
项目结构
vue-components/
├── src/
│ ├── index.ts # Main entry point (exports all components)
│ ├── components/ # All Vue components
│ │ └── ...
│ ├── assets/ # Styles, fonts, and static assets
│ ├── lib/ # Utility functions and helpers
│ └── setupTests.ts # Test configuration
├── dist/ # Build output (generated)
├── .storybook/ # Storybook configuration
├── vite.config.ts # Vite build configuration
├── vitest.config.ts # Test configuration
├── tsconfig.json # TypeScript configuration
├── package.json # Package metadata and dependencies
└── README.md
项目本地设置
安装依赖关系
npm install
设置 Git 钩 (Husky)
在安装依赖性后, 设置 Git 钩子, 用于自动内嵌和格式化 :
npm run prepare
这将配置 Husky 在预承诺上运行已安装的 Lint- stage, 它会自动将您已设置的文件格式化为 Pretier .
生产大楼
npm run build
在当地进行另一个项目
1. 构建虚拟组件包
## Build with hot reload
npm run build:watch
2. 安装软件包
来自 Charm 或 Lucky 目录 :
npm i /[path-to-project] (实例npmi) ../vue-components 如果您的文件夹名为“ vue- 组件 ”)
测试
我们用 Vue 测试库 与 维特 单位测试。 要写新测试,请添加 .spec.js 在您正在工作的组件文件旁边的文件 .
npm run test
格式化文件
使用 lint-staged 财务报告和审定财务报表 husky (运行后) npm run prepare) (中文(简体) ).
您也可以手动格式化文件 :
# checks files for formatting issues
npm run format:check
# fixes formatting issues
npm run format:write
如果您发现依赖性太新出错
您可以绕过最低释放年龄要求 :
npm config set min-release-age 0
npm install <package-name>
# Then set it back
npm config set min-release-age <original value in .npmrc>
捐款
增加新构成部分净额
在引入一个新的组成部分/修改现有的组成部分时,有一些选择。 在决定将您的新部分放在哪里时遵循这些步骤:
1. 决定该部分是否打算由应用程序共享 这个组件是否被认为是"构件",并打算由我们的应用程序共享? 如果没有,考虑在应用程序中直接添加您的组件,它被用在库中而不是添加到库中.
2. 创建新的组成部分
在内部创建组件 src/components 在最适合它的目录中(或创建新目录)
3. 编写组成部分文件和测试 保证您编写故事书故事来记录您的新组件或更改 。 关于如何做到这一点的更多信息,见下文.
4. 在导出文件中添加组件
完成后,将组件添加到 src/index.ts 作为导出.
组件文档( 与故事书一起开发)
写入 故事书 在组件驱动开发中的故事,构建了松散相接和可重复使用的组件。 强调在改进我们的文件编制的同时,将各组成部分的关切分开.
轻而易举地开始我们 倾斜 锅炉板模板.
- 开始故事本
npm run storybook
- 运行
npm run plop,然后根据您正在工作的组件选择正确的模板. - 查找新创建的故事文件 故事书 并通过增加更多的故事来开发你的组件.
- 尽可能使用 联合来文 文件评论. 故事书 将自动选中它们并添加到文档中.
生产大楼
第3组
npm run storybook:build
测试建筑:
npx http-server ./path/to/build
组件开发工具
如果您正在开发一个管理很多 变体, (中文(简体) ), cva( 类变量授权) 可供您使用。 此外,考虑使用 后风相接 如果您使用cva,只需使用 cn(简写为类Name) 工具函数在 packages/vue-3/src/lib/utils.ts复选 AppButton 更多细节.
字体支持
只能为 vue-3。如果您正在创建新组件,请将其添加到两个组件中 index.js 财务报告和审定财务报表 src/index.ts 作为 src/index.ts 是导出类型的主要文件.
发布到 npm
- 前往 https://github.com/Felix-Health/vue-组件/动作
- 运行“ Publish Vue 3 包到 npm” 工作流程
main分支