这是一个基于 Vue 3 开发的现代化组件库,使用 TypeScript 编写,旨在帮助开发者快速构建高质量的企业级应用。该组件库提供了丰富的 UI 组件、实用的 Hooks 和工具函数,特别针对企业级应用场景进行了优化。
npm install joy-logi-design这是一个基于 Vue 3 开发的现代化组件库,使用 TypeScript 编写,旨在帮助开发者快速构建高质量的企业级应用。该组件库提供了丰富的 UI 组件、实用的 Hooks 和工具函数,特别针对企业级应用场景进行了优化。
- 基于 Vue 3 开发,充分利用 Composition API 和 TypeScript
- 使用 TypeScript 编写,提供完整的类型定义和类型推导
- 使用工厂函数模式设计Hooks,便于依赖注入和测试
- 组件前缀统一使用 Er,如 ErButton、ErButtonGroup 等
- 组件库:提供了企业级UI组件,如 Button、ButtonGroup 等
- Hooks:提供了大量实用的功能钩子,采用工厂函数模式设计
- 核心hooks:如useAttrs、useContext、useLockFn等
- 事件hooks:如useEventListener、useScrollTo、useBreakpoint等
- 组件hooks:如useFormItem、usePageContext等
- Web应用hooks:如useI18n、usePermission、useWebSocket等
- 设置hooks:如useHeaderSetting、useMenuSetting等
- 工具函数:提供了实用的工具函数
- 国际化:支持多语言配置
- 类型安全:所有组件都使用 TypeScript 编写,提供完整的类型定义
- 可定制性:组件支持丰富的配置选项,可以根据需求进行定制
- 工厂函数模式:Hooks采用工厂函数模式,便于依赖注入和单元测试
- 基于Ant Design Vue:在底层集成了Ant Design Vue,确保组件的稳定性和一致性
- Vue框架:Vue 3
- UI组件:部分基于 Ant Design Vue 4.x
- 构建工具:Vite
- 测试框架:Vitest + JSDOM
- 图表库:集成 ECharts
- 工具库:使用 lodash-es 等成熟的工具库
- 拖拽功能:集成 sortablejs
- WebSocket:集成 reconnecting-websocket
``typescript
import { createApp } from "vue";
import App from "./App.vue";
// 引入组件库
import JoyLogiDesign from "joy-logi-design";
// 引入样式
import "joy-logi-design/dist/theme/index.css";
const app = createApp(App);
// 注册组件库
app.use(JoyLogiDesign);
app.mount("#app");
`
`vue
`
`typescript
// 从 hooks 路径引入
import {
// 核心hooks
useAttrs,
useContext,
useLockFn,
// 事件hooks
useEventListener,
useScrollTo,
// Web应用hooks
useI18n,
usePermission,
useWebSocket,
} from "joy-logi-design/hooks";
// 工厂函数模式示例
const { t } = useI18n();
const { hasPermission } = usePermission();
`
#### 可用的 Hooks 分类
- 核心 Hooks:useAttrs, useContext, useLockFn, useRefs, useTimeout, onMountedOrActivateduseBreakpoint
- 事件 Hooks:, useEventListener, useIntersectionObserver, useScroll, useScrollTo, useWindowSizeFnuseFormItem
- 组件 Hooks:, usePageContextuseI18n
- Web应用 Hooks:, usePermission, usePagination, useSortable, useWebSocket, useECharts 等useHeaderSetting
- 设置 Hooks:, useMenuSetting, useRootSetting 等
`typescript
// 从工具函数路径引入
import { isString, isFunction } from "joy-logi-design/utils";
// 使用示例
console.log(isString("test")); // true
`
``
joy-logi-design/
├── src/ # 源代码目录
│ ├── components/ # UI 组件
│ ├── hooks/ # Vue Hooks
│ │ ├── core/ # 核心Hooks
│ │ ├── event/ # 事件相关Hooks
│ │ ├── component/ # 组件相关Hooks
│ │ ├── web/ # Web应用Hooks
│ │ └── setting/ # 设置相关Hooks
│ ├── utils/ # 工具函数
│ ├── theme/ # 主题样式
│ ├── locale/ # 国际化
│ ├── core/ # 核心功能
│ ├── docs/ # 文档
│ └── play/ # 开发预览
├── dist/ # 构建输出目录
├── types/ # 类型定义
└── libs/ # 第三方库
- pnpm dev: 启动开发环境pnpm build
- : 构建完整项目pnpm build:umd
- : 仅构建UMD格式pnpm build:modules
- : 构建ES和CJS模块pnpm test
- : 运行测试pnpm type-check
- : 类型检查pnpm lint`: 代码风格检查
-
- 部分Hooks采用工厂函数模式设计,使用时需要注意依赖注入
- 使用WebSocket相关功能时,确保正确配置连接参数
- 集成了Ant Design Vue组件,可以利用其丰富的组件系统