这是一个基于 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, onMountedOrActivated
- 事件 Hooks：, useEventListener, useIntersectionObserver, useScroll, useScrollTo, useWindowSizeFn
- 组件 Hooks：, usePageContext
- 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组件，可以利用其丰富的组件系统