@lightsoft/web-components-vue3

一个基于 Vue 3 和 Element Plus 的内部组件库。

安装

npm install @lightsoft/web-components-vue3
# 或
pnpm add @lightsoft/web-components-vue3

依赖要求

此组件库需要以下 peer dependencies：

npm install vue@^3.4.29 vue-router@^4.3.3 element-plus@^2.7.8 @element-plus/icons-vue@^2.3.1

使用方式

方式一：全局注册所有组件

import { createApp } from 'vue';
import App from './App.vue';
import registerGlobalComponent from '@lightsoft/web-components-vue3';

const app = createApp(App);
registerGlobalComponent(app); // 全局注册所有组件，默认前缀为 'zs'
app.mount('#app');

方式二：按需导入单个组件

import { zsDialog, zsTable, zsMenu } from '@lightsoft/web-components-vue3';

export default {
  components: {
    zsDialog,
    zsTable,
    zsMenu
  }
}

方式三：自定义前缀全局注册

import registerGlobalComponent from '@lightsoft/web-components-vue3';

// 使用自定义前缀 'my' 替代默认的 'zs'
registerGlobalComponent(app, 'my');
// 现在可以使用 <my-dialog>, <my-table> 等

可用组件

• zsAuthRedirect - 认证重定向组件
• zsBreadcrumb - 面包屑导航
• zsDialog - 对话框
• zsEmpty - 空状态
• zsFormLayout - 表单布局
• zsHeaderUser - 用户头部
• zsLayout - 布局组件
• zsMenu - 菜单组件
• zsPagination - 分页组件
• zsScrollIntermittent - 滚动间歇组件
• zsSliderVerify - 滑块验证
• zsSplitContainer - 分割容器
• zsTable - 表格组件
• zsTitle - 标题组件
• zsSelect - 选择器
• zsMasterSelect - 主选择器
• zsDetailsCollapse - 详情折叠
• zsTimeFormat - 时间格式化
• zsToolFindOne - 查找工具
• zsToolTaskQueue - 任务队列工具
• zsToolUnifyTree - 统一树工具
• zsToolWebsocket - WebSocket 工具
• zsVerifyInput - 验证输入

开发

# 安装依赖
pnpm install

# 开发模式
pnpm run dev

# 构建
pnpm run build

# 类型检查
pnpm run type-check

注意事项

1. 确保项目中已安装所有 peer dependencies
2. 组件库依赖 Element Plus，请确保正确配置 Element Plus
3. 如果遇到样式问题，请检查是否正确引入了 Element Plus 的样式文件

左松科技公司开发的 Vue 3 通用组件库，提供了一套完整的企业级 UI 组件解决方案。

📦 安装

npm

npm install @lightsoft/web-components-vue3

yarn

yarn add @lightsoft/web-components-vue3

pnpm

pnpm add @lightsoft/web-components-vue3

🚀 快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import registerGlobalComponent from '@lightsoft/web-components-vue3'

const app = createApp(App)

// 全局注册所有组件，默认前缀为 'zs'
registerGlobalComponent(app)

// 或者自定义前缀
registerGlobalComponent(app, 'custom')

app.mount('#app')

按需引入

import { 
  zsDialog, 
  zsTable, 
  zsPagination,
  zsFormLayout 
} from '@lightsoft/web-components-vue3'

export default {
  components: {
    zsDialog,
    zsTable,
    zsPagination,
    zsFormLayout
  }
}

📋 组件列表

基础组件

• zsDialog - 对话框组件
• zsEmpty - 空状态组件
• zsTitle - 标题组件
• zsLayout - 布局组件
• zsMenu - 菜单组件

表单组件

• zsFormLayout - 表单布局组件
• zsSelect - 选择器组件
• zsMasterSelect - 主选择器组件
• zsVerifyInput - 验证输入框组件
• zsSliderVerify - 滑块验证组件

数据展示

• zsTable - 表格组件
• zsPagination - 分页组件
• zsDetailsCollapse - 详情折叠组件
• zsTimeFormat - 时间格式化组件
• zsBreadcrumb - 面包屑组件
• zsNumber - 数字动画组件
• zsCountDown - 倒计时组件，支持缓存和自定义样式
• zsCountdown - 另一个倒计时组件实现
• zsGenerateForm - 动态表单生成组件
• zsIndexBD - IndexedDB数据库操作组件

导航组件

• zsAuthRedirect - 权限重定向组件
• zsHeaderUser - 用户头部组件

布局组件

• zsSplitContainer - 分割容器组件
• zsScrollIntermittent - 间歇滚动组件

工具组件

• zsToolFindOne - 查找工具组件
• zsToolTaskQueue - 任务队列工具组件
• zsToolUnifyTree - 统一树形工具组件
• zsToolWebsocket - WebSocket 工具组件

🛠️ 技术栈

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - JavaScript 的超集
• Element Plus - Vue 3 UI 组件库
• Vite - 下一代前端构建工具
• UnoCSS - 即时原子化 CSS 引擎
• Pinia - Vue 状态管理库
• Vue Router - Vue.js 官方路由
• Vue I18n - Vue.js 国际化插件

📖 开发指南

环境要求

• Node.js >= 16
• pnpm >= 7

本地开发

# 克隆项目
git clone <repository-url>

# 进入项目目录
cd web-components-vue3

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

构建

# 构建生产版本
pnpm build

# 类型检查
pnpm type-check

# 代码检查
pnpm lint

# 代码格式化
pnpm format

测试

# 运行单元测试
pnpm test:unit

🎯 IDE 推荐

推荐使用 VSCode + Volar 进行开发（请禁用 Vetur）。

📄 许可证

ISC License

👥 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目。

📞 联系我们

如有问题或建议，请联系左松科技开发团队。